Agent skill · design visual · onewave-ai
typography-scale-builder
Build a complete typographic system -- modular or fluid type scale, line-height and tracking per size, weight roles, and vertical rhythm -- exported as tokens, Tailwind config, and CSS. Pairs with font-pairing-suggester (which picks the fonts; this builds the system they live in).
Why this skill is useful
Adds a comprehensive typographic system with exportable tokens and configurations that the AI wouldn't reliably generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-07-15. 242 stars on the source repository.
What this skill does
Typography Scale Builder Typography is the design system's skeleton: most products that look "off" have inconsistent type long before they have bad colors. Build the scale as a system with roles and math, then make the codebase actually use it. Input: the chosen fonts (or run font-pairing-suggester first), the product type (marketing site, dense app UI, long-form editorial), and the target range of devices. Workflow 1. Audit what exists. Inventory every font-size, line-height, letter-spacing, and font-weight in the codebase. The typical finding -- 23 font sizes, 9 of them within 2px of each other -- is the case for the system. Map which are actually distinct roles vs. accumulated drift. 2. Choose the scale math. Base size (16px body floor for marketing/editorial; 13-14px acceptable for dense app UI) and ratio -- modest for UI-heavy products (1.125-1.2, more usable steps, less drama), larger for marketing/editorial (1.25-1.333, real hierarchy). Fluid by default for marketing sites: clamp() per step so headings scale between viewport bounds without breakpoint jumps; fixed steps are fine for app UI. 3. Set the companions per step -- the part single-number "scales" skip: line-height tightens as size grows (body ~1.5-1.6, headings down to 1.1-1.2 at display sizes); letter-spacing goes negative at display sizes (-1% to -2.5%) and slightly positive for small caps/labels; weight roles per font (which weight is body, emphasis, heading, display -- and which loaded weights get deleted because nothing uses them). 4. Define the roles. Semantic tokens, not size names: display, h1-h4, body-lg, body, body-sm, caption, overline, code. Each role = size step + line-height + tracking + weight + family, as one token. Components consume roles; nobody composes raw steps. 5. Vertical rhythm. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills onewave-ai/typography-scale-builder