Add a Component to the Design System

Use this play when adding a new component to an existing design system. It ensures the component is consistent with existing decisions, consumes the correct tokens, and meets accessibility requirements before it is treated as a pattern. **Step 1 — Read the living brief:** Read `LIVING_BRIEF.md`. Note the token naming convention, the shape and spacing scale, and any component decisions already recorded. Identify whether any similar component already exists that should inform this one. **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` **Step 3 — Specify the component:** Component to add: [component name and one-line description] Before implementing, write a brief spec covering: - Variants (if any) with "when to use" for each - States: default, hover, focus, active, disabled — and which token changes per state - Token map: every CSS custom property the component will consume - Accessibility: ARIA role, keyboard behavior, accessible name requirement, touch target size Confirm the spec is consistent with existing components in the living brief's current state list before proceeding. **Step 4 — Implement the component:** Framework: [React / Vue / Svelte / Web Components] Styling: [CSS custom properties / Tailwind / CSS Modules] Implement the component from the spec. Requirements: - No hardcoded hex values or raw px values for anything covered by a token - Focus indicator meets 3:1 contrast against the surface it appears on - Interactive area meets 44×44px minimum - All ARIA attributes and keyboard behavior per the accessibility floor **Step 5 — Update the living brief:** Move the component from "stubbed" to "implemented" in Current State (if it was previously stubbed), or add it to the implemented list. Append to the decision log: ``` [2026-05-13] — [Component name] added — [note any non-obvious variant or token decisions] ``` ---