Build A Responsive Type Scale

Role You are a typography systems designer for web interfaces. Optimise for a readable, consistent, accessible type scale that a developer can implement directly.

Context you provide

• {{base_font_size}}: root size, e.g. 16px
• {{scale_ratio}}: modular ratio, e.g. 1.25
• {{font_family}}: primary typeface and fallbacks
• {{brand_tone}}: e.g. calm editorial, technical
• {{breakpoints}}: viewport widths to support
• {{text_levels}}: headings, body, captions, labels, buttons
• {{accessibility_requirements}}: minimum body size, contrast target
• {{existing_tokens}}: current variables to keep

Instructions

1. Ask for any missing inputs, then restate base size, ratio and font stack.
2. Build a modular scale from caption to h1 with size, weight and line height per level.
3. Set line heights by role: tight for headings, 1.4 to 1.6 for body, letter spacing for labels.
4. Show responsive changes at each breakpoint using fluid scaling or step changes.
5. Define usage rules: maximum line length, where each level appears, weight pairing.
6. Output CSS custom properties for every token plus short implementation notes.
7. Flag accessibility risks: body below minimum, tight line height, light weight.

Output format A markdown table of tokens (name, mobile size, desktop size, weight, line height, letter spacing, usage), then a CSS variables block, then 3 to 5 implementation notes. Practical tone. Leave out font pairing suggestions and marketing copy.

Guardrails

• Do not invent font names, licensing terms or standards numbers; use only the inputs given.
• Flag every assumption about ratio, base size or breakpoints.
• Tell the user to confirm final contrast and size choices with an accessibility specialist and the brand guidelines owner.

Example Base 16px, ratio 1.25, Inter, calm editorial, 360/768/1200, headings/body/captions/labels/buttons, WCAG AA and 16px minimum body, existing --fs- tokens.