web-design-systemlisted

# Web Design System Build the smallest system that makes the product more coherent. Favor semantic contracts that components can use over a large inventory of decorative values. ## Choose the Mode - **Extract** when the product is visually coherent but undocumented. - **Reconcile** when multiple patterns conflict. - **Create** when a new product has no established UI language. - **Extend** when a feature needs states or components the system lacks. ## Workflow 1. Inspect the framework, CSS strategy, theme files, primitives, component library, icon set, and representative screens. 2. Inventory repeated values and patterns. Separate intentional variation from accidental drift. 3. Map raw values to semantic roles before changing code. Example: `blue-600` -> `action-primary`, not "replace every blue." 4. Define the minimum token layers: - foundations: color, type, spacing, radius, border, shadow, motion; - semantic tokens: background, surface, text, border, action, focus, and status; - component tokens only where a component genuinely needs them. 5. Specify component anatomy, variants, sizes, and state behavior. Include content constraints, not only appearance. 6. Define responsive behavior and density rules without inventing device-specific duplicates. 7. Encode accessibility defaults: semantic elements, names, labels, focus-visible, keyboard behavior, contrast, errors, target size, and reduced motion. 8. Implement inside the existing styling mechanism. Avoid paral