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` 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] ``` ---