stage 2 · primitive tokenstokenstypographyprimitives
Generate a Type Scale
Generates a modular type scale with optical sizing, line-height, and letter-spacing values matched to your system's density and brand stance.
Variablesfill in to personalize the prompt
play · generate-type-scale
You are helping me generate a typography token set for my design system.
**Step 1 — Read the living brief:**
Read `LIVING_BRIEF.md`. Note the density target, any typeface decisions already made, and the product's expressive vs. utilitarian stance.
**Step 2 — Read the references:**
Read the following from the Sistema knowledge base:
- Typography architecture synthesis: `{{sistema_url}}/raw/principles/typography/architecture`
This synthesis covers scale construction (modular vs. hand-tuned, ratio selection by context), role taxonomy decisions (named roles vs. numeric steps), and non-negotiable legibility constraints (line height per role, measure, letter-spacing direction by size). Use it as the decision framework — do not copy any specific design system's scale.
**Step 3 — Generate the type scale:**
My typography direction:
{{typography_direction}}
For each type role, output a token block with this structure:
```css
/* [Role name] — [one-line usage description] */
--type-[role]-size: [value];
--type-[role]-weight: [value];
--type-[role]-line-height: [value]; /* unitless, e.g. 1.4 */
--type-[role]-letter-spacing: [value]; /* em, e.g. -0.01em */
```
Define roles appropriate for this product's density and stance. At minimum:
- A display role (large hero text, if applicable)
- Heading roles (at least large and small)
- Body roles (at least regular and small)
- A label role (UI labels, captions, metadata)
Apply non-negotiable legibility constraints from the synthesis:
- Body roles: line height ≥ 1.5 (unitless)
- Heading roles: line height 1.1–1.3
- Display roles: line height 1.0–1.1
- Letter spacing: negative on large sizes (display/heading), positive on small sizes (label/caption) when legibility requires it
Note any decision that required a judgment call.
**Step 4 — Update the living brief:**
Update the Typography entry in Key Decisions and append to the decision log:
```
[2026-05-13] — Type scale generated — [note scale approach and role taxonomy]
```
---
In this play
Variables1
Prompt body
References1
References pulled in
principles/typography/architectureTip
Plays work best when your agent has read DESIGN.md first. Run session-start at the beginning of each session to orient it.
In this play
Variables1
Prompt body
References1
References pulled in
principles/typography/architectureTip
Plays work best when your agent has read DESIGN.md first. Run session-start at the beginning of each session to orient it.