---
name: components
description: Choose and implement reusable interface components from exact anatomy, token states, accessibility rules, and machine-readable numeric specs.
---

# Components

Use when designing or implementing reusable controls and interface patterns. Do not use to choose a whole page layout (`page-patterns`), stack (`stack`), or color palette (`color`).

## Procedure

1. Open [the component index](references/index.md), then load only the selected component's cheat sheet.
2. If implementing or reviewing details, load that component's full spec and `*.spec.json`; scripts and linters use the JSON spec, not prose.
3. Resolve colors through the generated `tokens.json` / `tokens.css` state paths for both modes. Preserve visible focus and reduced-motion behavior.
4. Use the framework-agnostic CSS examples first. Adapt syntax only after the stack decision.
5. Check size, target, keyboard, and state requirements against the relevant references below.

## Inputs and outputs

- Inputs: approved theme, color-engine output, design tokens, stack decision, and component need.
- Outputs: component-specific CSS and behavior, numeric spec, and reviewed accessibility states.
- Every component has a short card, a full on-demand spec, and a machine-readable spec file.

## Reference routing

| Need | Load |
|---|---|
| Shared color, shape, border, typography, spacing, motion, and backdrop rules | [shared rules](references/shared-rules.md) |
| Target size references and platform units | [target size](references/target-size.md) |
| Component-to-card/full-spec/spec routing | [component index](references/index.md) |