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).
SkillScore82Maintained
Automatic
◆Frontend / UI pack
Last verified 8/27/2026
What it changes
Passed 18 of 22 test cases with the skill, and 15 of 22 without it.
Without skill68%
With skill82%
Checks it passed that the model alone missed
Output includes typography-tokens.json file.
Total typography role step count is capped between 7 and 9 roles.
Typography tokens bundle size, line-height, letter-spacing, weight, and family into semantic role tokens.
3 fixed15 passed either way4 still failing0 broke
Pass-rate lift
+14 pp
Tokens
+36%
Agent turns
0%
Response time
+3%
Model gemini-3.6-flashMeasured 8/27/2026v118 of 22 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 3 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 3
Prompt
Our team created individual Tailwind classes like `text-24`, `leading-tight`, and `tracking-tight` for engineers to combine manually on heading elements. What is the recommended way to structure these design tokens for consumption?
What was checked, without and with the skill
Checked
Without skill
With skill
Typography tokens bundle size, line-height, letter-spacing, weight, and family into semantic role tokens.
Missed
Passed
Raw pixel font size class composition is replaced by semantic role consumption.
Passed
Passed
case-08 · gemini-3.6-flash · 8/27/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md28 linessingle file
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
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.
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.
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).
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.
Vertical rhythm. Spacing-after rules per role (heading margins proportional to their size, paragraph spacing from body line-height), text-wrap: balance on headings, and measure limits (65-75ch for body prose) so line length stays readable at every viewport.
Export and retrofit.typography-tokens.json, Tailwind fontSize config (size + line-height + tracking tuples per role; v4 @theme), typography.css with role classes, and TYPOGRAPHY.md. Then map the step-1 inventory onto roles and replace -- with a per-case flag on anything that does not cleanly map (it is either a missing role or drift to delete).
Rules
Roles over sizes everywhere: text-h2, never text-[28px] -- and no role means the component asks the system for one, not the developer for a number.
Every step ships with its line-height and tracking. A size without its companions is half a token.
The scale has as few steps as hierarchy needs -- 7-9 roles cover almost any product; 12+ means roles are duplicating.
Body text is the anchor: it gets sized for reading first, and the scale grows around it -- never shrink body to make headings look bigger.
Load only the weights the roles use. Every unused weight is dead bytes on first paint.
Fluid type gets floor and ceiling checks: the clamp() minimum must stay readable on a 320px phone and the max must not blow the layout on ultrawide.
Quick Commands
"Build a type system for this project" -- full workflow
"Audit my typography" -- step 1 only
"Make my headings fluid" -- fluid conversion of an existing scale
"Retrofit components" -- step 6 against an existing system