Featured play
5/6Bootstrap a Design System
generate-shape-tokens
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