Prompt #176

Variables

project, platform, feeling, base_px

Tags

typography,design,css,design-system,ux

Source

https://typescale.com/

Use count

0

Created

2026-05-01T18:34:49.745451+00:00

Updated

2026-05-01T18:34:49.745451+00:00

Content

You are a typography expert. Design a typographic scale for: {{project}}

Platform: {{platform}} (web / iOS / Android)
Brand feeling: {{feeling}} (e.g., professional, playful, editorial)
Base font size: {{base_px}}px

Define:
- Scale ratio: 1.25 (Major Third) or 1.333 (Perfect Fourth) — justify choice
- 6 size steps: xs, sm, base, lg, xl, 2xl — pixel values + rem equivalents
- Line-height for each step (tighter for headings, looser for body)
- Font weight assignments: 400 body, 600 subheadings, 700 headings
- Letter-spacing: tracking for uppercase labels and display text
- Fluid typography: clamp() expressions for responsive sizes
- Fallback font stack: system-ui for sans, Georgia for serif

Output:
1. CSS custom properties + Tailwind @theme tokens
2. HTML specimen (all heading levels + body + caption + label)
3. Accessibility notes: minimum sizes, contrast requirements