--- prompt-id: "02" name: Typography scale + brand-font substitution status: live mcp: none model: Sonnet 4.6 environment: Claude Code (auto-save) or Claude.ai (manual save) inputs: - output/tokens.css (from Prompt 01) - specs/.spec.md (TYPOGRAPHY section) - brand font families (optional — carried forward from Prompt 01 Q2) outputs: - output/tokens.css (updated with typography scale) chains: [1, 9] prereqs: ["01"] documented-in: Ch03 — Token Architecture, Ch06 — Typography --- # Prompt 02 — Typography scale (with optional brand fonts) Layers the typography token block on top of `output/tokens.css` from Prompt 1. Applies brand fonts if they were noted in Prompt 1's Q2. **Run after Prompt 1.** Token file is updated in place — not a new file. --- ``` ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ META-HEADER — run this before generating any CSS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ STEP -2 — DETECT ENVIRONMENT Claude Code: will read output/tokens.css automatically and update it. Claude.ai: ask the user to paste the contents of output/tokens.css so you can read it as context. STEP -1 — PREREQUISITE CHECK Read output/tokens.css. If it does not exist or is empty: STOP. "Prompt 1 must run first. output/tokens.css is missing. Please run prompts/01-tokens-from-spec.md before this prompt." Read output/chain-state.md if present. Extract: - Archetype confirmed in Prompt 1 - Brand fonts noted in Prompt 1 Q2 (carry forward automatically) STEP 0 — BRAND FONTS CONFIRMATION If brand fonts were noted in Prompt 1 (from chain-state.md): Confirm: "From Prompt 1, you noted these brand fonts: Display: [family] Body: [family] Mono: [family or 'default'] Applying them now. Confirm or update?" If no brand fonts were noted AND not running in Chain Mode: Ask: "Do you have brand fonts to substitute for the archetype defaults? (a) No — use archetype defaults (b) Yes — provide display, body, and optionally mono families" ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ MAIN PROMPT BODY ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PROMPT 02 — TYPOGRAPHY SCALE (with optional brand-font substitution) YOUR ROLE You generate the typography token block on top of an existing tokens.css. You match the type-scale shape (fluid clamp() vs fixed modular) to the archetype's TYPOGRAPHY rules. You optionally substitute brand fonts while preserving role rules. STEP 0 — RECEIVE INPUTS PASTE 1 — existing tokens.css from Prompt 1: [paste here, or read from output/tokens.css if file-access available] PASTE 2 — [archetype].spec.md (TYPOGRAPHY section): [paste here, or read from specs/.spec.md if available] YOUR BRAND DISPLAY FONT (optional): [font name + import URL] YOUR BRAND BODY FONT (optional): [font name + import URL] YOUR BRAND MONO FONT (optional): [font name + import URL] Brand fonts are optional. Without them, use the archetype's default font assignments. STEP 1 — VALIDATE FONT ROLE COMPATIBILITY Check brand fonts against archetype TYPOGRAPHY rules: - Harbor: display = serif (italic-capable for editorial flourish), body = sans - Sentinel: display + body = sans-serif (same family allowed), mono optional - Current: display + body = native or sans, mono optional - Lattice: display + body = sans, mono = required (tabular numerics) - Meridian: body = serif preferred (sans allowed for technical), display = sans If a supplied brand font violates the archetype's role (e.g., a serif for Sentinel's body), FLAG IT BACK and propose either keeping the archetype default OR overriding (which breaks the archetype). Do not silently substitute incompatible fonts. STEP 2 — EMIT FONT FAMILY TOKENS Generate: --font-display: [brand display | archetype default], [fallback stack]; --font-body: [brand body | archetype default], [fallback stack]; --font-mono: [brand mono | archetype default], ui-monospace, monospace; Include @import url() at the top of the file for any web-fonts. Use font-display: swap for all custom fonts. STEP 3 — EMIT TYPE SCALE Per archetype: - Fluid clamp() (Harbor / Current / Meridian display): clamp(min, base + vw, max). - Fixed modular (Sentinel / Lattice): 1.125 (Sentinel) or 1.067 (Lattice) modular ratio with a 14px or 12px base. - Reading-comfortable (Meridian body): 17-19px body with 1.75 leading. Token names: --text-xs, --text-sm, --text-base, --text-lg, --text-xl, --text-2xl, --text-hero --leading-tight, --leading-snug, --leading-normal, --leading-relaxed --tracking-tight, --tracking-normal, --tracking-wide --weight-regular, --weight-medium, --weight-semibold, --weight-bold STEP 4 — VERIFY READING ERGONOMICS For body text in particular: - Body font size at viewport >= 1024px: 14px floor for Sentinel/Lattice, 16px floor otherwise. - Reading-width cap (max-width on body p): 80ch for Meridian, 70ch for Harbor, no cap for Sentinel/Lattice/Current. - Reduced-motion respected for any text-related transitions (e.g., fade-in). - iOS Safari: any input font-size below 16px triggers auto-zoom. Flag if applicable. STEP 5 — DELIVER THE FINAL UPDATED tokens.css Output the complete updated tokens.css as a single fenced code block. No prose before or after. CONSTRAINTS - No font fallback shorter than 3 levels deep (custom -> category -> system). - No text-transform: uppercase on body text — only on UI labels and eyebrows. - All sizes use the type-scale tokens. No magic px values in component CSS. - Honor TYPOGRAPHY's BANNED FONTS list from the archetype spec. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ META-FOOTER — run after the updated tokens.css block is generated ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SAVE Claude Code: overwrite output/tokens.css with the updated version. Confirm: "Updated: output/tokens.css (typography added)" Claude.ai: "Copy the fenced block above and replace the contents of output/tokens.css with it. The file now includes both color/spacing tokens (from Prompt 1) and typography tokens (from Prompt 2)." HTML PREVIEW OFFER "Would you like an HTML preview of the full token set — palette, spacing, and typography rendered together? I can generate output/tokens-preview.html now so you can verify type sizes and fonts in a browser before building components." CHAIN STATE LOG Append to output/chain-state.md: [timestamp] Prompt 2 complete Fonts applied: [default | brand — display: X, body: Y] Output: output/tokens.css (updated) HANDOFF "tokens.css is complete with color + typography. Next → Prompt 03 — Foundation components (Button, Input, Badge, Card, Alert, Dialog, Table, Form, Empty state) To continue: Chain Mode: type 'next' Ad-hoc: paste prompts/03-foundation-components.md" ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ```