stage 2 · primitive tokenstokensshapeprimitives

Generate Shape Tokens

Border radii as a personality decision, not a default — with a component mapping table so buttons, cards, inputs, and overlays stay visually consistent.

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: `{{sistema_url}}/raw/principles/shape/architecture` - Visual quality signals: `{{sistema_url}}/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] ``` ---
2 KB refs
paste intoClaude CodeCursor

Part of a campaign

Tip

Plays work best when your agent has read DESIGN.md first. Run session-start at the beginning of each session to orient it.

How plays work

Covers DESIGN.md setup, pulling KB references into prompts, and running plays end-to-end.

Read the guide