# Color Swatch

See how Color Swatch shapes every screen.

## Use it when

- You need one shared rule to shape many screens consistently.

## Do not use it when

- The value is local content or a one-off product decision.

## Workflow states

- documented
- applied
- reviewed

## Interaction conditions

- default

## Named events

- `APPLY`
- `REVIEW`
- `RESET`

## What Kit owns

- Semantic visual roles, component anatomy, interaction expression, and complete visible states.
- At least 44-pixel controls, visible focus, keyboard and touch behavior, phone containment, and reduced motion.
- Solid surfaces, legible hierarchy, and compatibility with every complete Kit visual system.

## What the product owns

- The product's content hierarchy and exceptional constraints.
- Which states and events are actually legal for this product and user.

## Accessibility

- Use native semantics first and expose the current state without relying on color alone.
- Keep every action reachable by keyboard with a visible focus indicator and an understandable name.
- Announce asynchronous success or failure when the changed object does not make the outcome obvious.

## Phone behavior

- Contain the complete task at 320 pixels without hiding the primary action behind sideways scrolling.
- Recompose dense layouts for touch instead of shrinking controls or text.

## Proof before release

- Exercise every declared state and every legal event, including failure and recovery.
- Verify keyboard order, focus return where focus moves, touch targets, and reduced motion.
- Check 320, 375, 414, 768, and desktop widths with no page overflow or unreachable action.

## Plain-English project request

> Use Kit's Color Swatch for this product. You need one shared rule to shape many screens consistently. Preserve the active visual kit and the product's routes, content, data, permissions, and business rules. Model APPLY, REVIEW, RESET as named events; render documented, applied, reviewed as workflow states and default as separate interaction conditions where they apply. Keep 44-pixel controls, visible focus, phone containment, honest loading and failure, and reduced-motion behavior. Do not add glass, glow, decorative gradients, resting loops, or a new dependency.

## Live component

- [Vanilla](https://kit.scottelling.com/kit/vanilla#color-swatch)
- [Purple Rain](https://kit.scottelling.com/kit#color-swatch)
- [JADE](https://kit.scottelling.com/kit/jade#color-swatch)
- [OS](https://kit.scottelling.com/kit/os#color-swatch)
- [Animation Studio](https://kit.scottelling.com/kit/animation#color-swatch)
- [Voltage](https://kit.scottelling.com/kit/voltage#color-swatch)
- [Calm Desktop](https://kit.scottelling.com/kit/calm#color-swatch)
- [Draftline](https://kit.scottelling.com/kit/draftline#color-swatch)
- [Sableline](https://kit.scottelling.com/kit/sableline#color-swatch)
- [Shadow](https://kit.scottelling.com/kit/shadow#color-swatch)