Bootstrap a Design System

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: `/raw/principles/typography/architecture` - Visual quality signals: `/raw/principles/quality/visual-quality-signals` 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. The visual quality signals document (§2) defines type-specific quality checks: ensure weight, size, and tracking vary meaningfully across roles, and that the typographic character matches the visual direction brief. **Step 3 — Explore the scale (optional):** If you haven't settled on a ratio yet, open `/tools/type-scale` in a browser. Enter your base size and try ratios — Perfect Fourth (1.333) is a good starting point for most UI products; Major Third (1.250) for denser, more utilitarian interfaces; Perfect Fifth (1.500) or Golden Ratio (1.618) for editorial or expressive work. The calculator shows how each ratio distributes sizes from caption through display. **Step 4 — Generate the type scale:** My typography direction: {{typography_direction}} For each type role, output a token group in DTCG format: ```json { "type": { "body-lg": { "$description": "Default body text — prose, descriptions, form labels", "size": { "$type": "dimension", "$value": "16px" }, "weight": { "$type": "fontWeight", "$value": 400 }, "line-height": { "$type": "number", "$value": 1.6 }, "letter-spacing": { "$type": "dimension", "$value": "0em" } } } } ``` Define roles appropriate for this product's density and stance. At minimum: display (if applicable), heading-lg, heading-sm, body-lg, body-sm, label, caption, code. Every role must have a `$description` naming its purpose. 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 Quality check: weight, size, and tracking must vary meaningfully across roles — not size alone. Note any judgment call. Write to `tokens/src/typography.json`. This file is the authoritative source — CSS is compiled from it by Style Dictionary, not authored separately. **Step 5 — Update the living brief:** Update the Typography entry in Key Decisions and append to the decision log: ``` [date] — Type scale generated — [scale approach, typeface decisions, number of roles] ``` ---