Design BetterDesign System
typography.*

Typography

A four-font hierarchy built around F37 Lineca. Each typeface has a single primary role and should not stray from it.

Font families

typography.fontFamily.display
F37 Lineca · 100–900 · All headings, display, cover art, decks
Canonical display
Headlines carry weight
Weight range
100 · HairDesigned to last
200 · Extra LightDesigned to last
300 · LightDesigned to last
400 · RegularDesigned to last
500 · MediumDesigned to last
700 · BoldDesigned to last
800 · Extra BoldDesigned to last
900 · BlackDesigned to last
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz · 0123456789 · !@#&?
typography.fontFamily.body
Aktiv Grotesk · 200–700 · Body copy / UI text / Captions
Workhorse
Nine years. 250+ guests. One design system.
Thin 200Design shapes how people feel.
Thin Italic 200Design shapes how people feel.
Regular 400Design shapes how people feel.
Regular Italic 400Design shapes how people feel.
Bold 700Design shapes how people feel.
Bold Italic 700Design shapes how people feel.
typography.fontFamily.editorial
Source Serif 4 · Italic 400 · Pull-quotes / Editorial passages
Editorial
“The best design work is invisible. It just feels right.”
Italic only. Never use Source Serif 4 in roman weight.
typography.fontFamily.mono
JetBrains Mono · 400, 500 · Code / Token labels / Timestamps
Technical
color.brand.signal = #FF4725
typography.scale.lg = 24px
motion.duration.normal = 200ms
typography.fontFamily.body-fallback
Inter Tight · Body fallback when Aktiv Grotesk (Adobe Fonts) cannot be loaded
Fallback
Nine years. 250+ guests. One design system.
Used when Adobe Fonts CDN is unavailable (offline, blocked, or unloaded). Not for intentional design use.
typography.fontFamily.display-fallback
Space Grotesk · 400–700 · Digital fallback when F37 Lineca cannot be loaded
Fallback
Headlines carry weight
Used where F37 Lineca cannot be embedded or licensed (e.g., third-party embeds, some email clients). Not for new design work.

Size scale — 14px to 80px

4xl
80px
Great design is earned
3xl
62px
Great design is earned
2xl
48px
Great design is earned
xl
36px
Clarity before creativity
lg
28px
Nine years. 250+ guests.
md
22px
The work of design leadership
base
18px
Body copy at the default scale
sm
16px
Secondary text and labels
xs
14px
Captions, timestamps, fine print

Line height

typography.lineHeight.tight1.1
The best design work creates clarity where there was confusion. It simplifies without dumbing down.
Large display headlines ≥38px
typography.lineHeight.snug1.3
The best design work creates clarity where there was confusion. It simplifies without dumbing down.
Subheads 20–30px
typography.lineHeight.normal1.5
The best design work creates clarity where there was confusion. It simplifies without dumbing down.
Body copy, UI text
typography.lineHeight.relaxed1.7
The best design work creates clarity where there was confusion. It simplifies without dumbing down.
Long-form editorial prose

Usage rules

★

F37 Lineca is the canonical display face for all headings across product, print, cover art, episode title cards, slide decks, and documents.

·

Space Grotesk is the digital fallback where Lineca cannot be embedded or licensed. It should never appear alongside Lineca in the same context.

·

Aktiv Grotesk handles all body copy, UI labels, captions, and metadata. Inter Tight is the fallback when Adobe Fonts cannot load. Never use a display font for body text.

·

Source Serif 4 is italic-only. Use it for pull quotes, editorial deck subtitles, and moments that need a magazine register. Never use it roman.

·

JetBrains Mono is reserved for code, token names, timestamps, and technical metadata. Do not use it for UI copy.

·

No new typefaces. The four-face stack is the system. If you think you need a fifth face, you need to make the case.