Implements a specified component in React using your token classes, following the patterns in your DESIGN.md.
play · implement-component
You are helping me implement a UI component that consumes my design system's token system.
**Step 1 — Read the living brief:**
Read `LIVING_BRIEF.md`. Note the token naming convention, framework, and any implementation patterns already established.
**Step 2 — Read the references:**
Read the following from the Sistema knowledge base:
- Token architecture synthesis: `{{sistema_url}}/raw/principles/tokens/architecture`
- Accessibility floor: `{{sistema_url}}/raw/principles/accessibility/floor`
The token architecture synthesis defines correct token consumption patterns. The accessibility floor defines the non-negotiable requirements that every component implementation must meet.
**Step 3 — Implement the component:**
Component: [e.g. Button, Text Input, Card]
Framework: [React / Vue / Svelte / Web Components]
Styling: [CSS custom properties / Tailwind / CSS Modules / styled-components]
Component specification or requirements:
[Paste your component spec here, or describe the variants, states, and behavior needed.]
My token setup:
[Paste the relevant token names from your system — color roles, shape roles, typography roles — that the component should consume.]
Output production-ready component code. Requirements:
- Use semantic token names throughout via CSS custom properties — no hardcoded hex values or raw px values for anything covered by a token
- Implement all required ARIA attributes and keyboard behavior per the accessibility floor spec
- Implement a visible focus indicator that meets the 3:1 contrast requirement
- Ensure the interactive area meets 44×44px minimum
- Include prop types and a brief usage example
**Step 4 — Update the living brief:**
Update the Components implemented list in Current State and append to the decision log:
```
[2026-05-13] — [Component name] implemented — [note any non-obvious decisions]
```
---