Bootstrap a Design System

You are helping me generate shape (border-radius) tokens for my design system. **Step 1 — Read the living brief:** Read `LIVING_BRIEF.md`. Note the brand stance (expressive vs. utilitarian) — this directly drives radius personality. **Step 2 — Read the references:** Read the following from the Sistema knowledge base: - Shape architecture synthesis: `/raw/principles/shape/architecture` - Visual quality signals: `/raw/principles/quality/visual-quality-signals` This synthesis covers the radius-as-personality spectrum, scale approach options (named semantic / numeric / global-factor), component family consistency rules, and pill shape guidance. Use it to select an approach appropriate for this product. The visual quality signals document (§3.1) defines shape-related bans — specifically the uniform-radius default and the side-stripe accent pattern. **Step 3 — Generate the shape tokens:** My shape direction: {{shape_direction}} Output shape tokens in DTCG format. Include radius, elevation shadows, and a component mapping table as `$description` on each radius stop: ```json { "radius": { "none": { "$type": "dimension", "$value": "0px", "$description": "Tooltips, chips in dense contexts" }, "sm": { "$type": "dimension", "$value": "...", "$description": "Inputs, select fields" }, "md": { "$type": "dimension", "$value": "...", "$description": "Buttons, badges" }, "lg": { "$type": "dimension", "$value": "...", "$description": "Cards, panels" }, "xl": { "$type": "dimension", "$value": "...", "$description": "Modals, dialogs, sheets" }, "full": { "$type": "dimension", "$value": "9999px", "$description": "Pills, avatars, toggle tracks" } }, "shadow": { "sm": { "$type": "shadow", "$value": { "offsetX": "0px", "offsetY": "1px", "blur": "3px", "spread": "0px", "color": "..." } }, "md": { "$type": "shadow", "$value": { "offsetX": "0px", "offsetY": "4px", "blur": "12px", "spread": "0px", "color": "..." } } } } ``` Radius must not be uniform across all components — there must be a hierarchy. Values must match the shape personality from the visual direction. Check against the side-stripe ban. Explain the personality choice: where this system sits on the sharp ↔ rounded spectrum and why. Write to `tokens/src/shape.json`. This file is the authoritative source — CSS is compiled from it by Style Dictionary, not authored separately. **Step 4 — Update the living brief:** Update the Shape entry in Key Decisions and append to the decision log: ``` [date] — Shape tokens generated — [radius personality, scale range, shadow approach] ``` ---