Step 5 · Generate Shape Tokens

Generate Shape Tokens

Variablesfill in to personalize the prompt
play · generate-shape-tokens
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` 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. **Step 3 — Generate the shape tokens:** My shape direction: {{shape_direction}} Output shape tokens as CSS custom properties: ```css --radius-none: 0px; --radius-sm: [value]; --radius-md: [value]; --radius-lg: [value]; --radius-xl: [value]; --radius-full: 9999px; ``` Include a component mapping table — which radius token each major component type should use: | Component type | Radius token | Notes | |---|---|---| | Buttons | | | | Inputs / form fields | | | | Cards | | | | Modals / dialogs | | | | Chips / badges | | | | Tooltips | | | Explain the personality choice: where this system sits on the sharp ↔ rounded spectrum and why. **Step 4 — Update the living brief:** Update the Shape entry in Key Decisions and append to the decision log: ``` [2026-05-13] — Shape tokens generated — [note personality stance and scale approach] ``` ---
Step 5 of 6 · Generate Shape Tokens
paste intoClaude CodeCursor