typography-system

Typography System

Produce a working type scale for this codebase — tokens wired into the existing styling system and applied to real headings/body/UI text — not an essay about type. Governing principle: sizes come from a modular scale chosen for the product's density; readability constraints (line-height, measure, contrast) are non-negotiable and override aesthetics.

When to use / handoffs

• Use for type scales, font selection/loading, heading hierarchy, readability fixes, fluid type.
• No token infrastructure at all yet → run skills/frontend-design/design-foundation first (or create the type tokens as its first slice).
• Text colors failing contrast is shared ground with skills/frontend-design/color-system — fix the pairs you touch here; send palette-wide work there.
• Headings sized right but the page still scans poorly → skills/frontend-design/visual-hierarchy-refactoring.

Step 1 — Inspect the codebase

1. Count font sizes. Grep for font-size:\s*[\d.]+(px|rem), Tailwind text-(xs|sm|base|lg|xl|\dxl) and arbitrary text-\[. Distinct count >8–10 = sprawl; record the list with frequencies.
2. Find the fonts. Grep for font-family|@font-face|fonts.googleapis|next/font and check tailwind.config.* / @theme for fontFamily. Count families and loaded weights.
3. Check line-height and measure. Grep line-height|leading- and max-width.*ch|max-w-prose.
4. Check existing tokens. If design-foundation ran, extend its file; never start a parallel system.
5. Classify the product's density from the screens themselves: data tables/dashboards/many controls = dense; landing/marketing = spacious; long-form reading = editorial.

Step 2 — Intake

Ask in one batch, only what's missing: brand feel in a few words (or "pick for me"), and keep current fonts or open to change? Infer density from the code, base size 16px unless dense-data (then 14px body is acceptable). Don't stall — with visible screens, state assumptions and build.