creatordesign system
GitHub
Typography
Foundation · Creator Design System

Typography

Space Grotesk (display) · Inter (body) · IBM Plex Mono (the slate). The scale is fluid, so no component ever needs a breakpoint-specific font size.

Display & headings

Space Grotesk, tight tracking, near-black ink. Inter carries the reading; IBM Plex Mono slates the metadata. The full scale, as specimens:

H1 · 700Rebuilding my theme
H2 · 600From the blog
H3 · 600How I edit in one sitting
H4 · 600Field notes on shipping
Lead · 400The first paragraph runs a size up to set the tone.
Body · 400Body copy is Inter at 1rem with 1.55–1.75 leading, capped to a reading measure.
Small · 400Secondary UI text and dense metadata rows.
Caption · 400Muted captions, footnotes and helper text.
Kicker · monoField notes
Timecode · monoEP.07 · 00:14:22 · 6 min read

.t-h1…h4 · .t-lead · .t-body · .t-small · .eyebrow · .t-slate — the whole voice

Display One
Display Two
Heading 1 — Rebuilding my Ghost theme
Heading 2 — Shipping in public
Heading 3 — Field notes
Heading 4 — Episode summary

Lead — the trick was never a faster computer. It was cutting the decisions I make after the shoot to almost zero.

Body — Inter at 17px, 1.65 line-height, capped to a 68ch measure. The invisible workhorse: you should never notice it, which is the whole job.

Label · slate voice · ep.07

00:14:22 · TAKE 03 · 1080p60

Animated underline link const build = story
Reps beat virality, every time.
180+

.t-link · .t-code · .t-quote · .t-stat — roles, not sizes

TokenSizeJob
--text-6xl52 → 112pxdisplay one
--text-4xl36 → 60pxh1, stat numbers
--text-2xl24 → 32pxh3
--text-md17pxlong-form body
--text-xs12pxthe slate voice

fluid — clamp() between a 360px and a 1440px viewport · mono is never body · display is never under 20px