_Typography
Manrope for headlines and display. Sora for body and UI. Two typefaces that balance geometric elegance with everyday legibility.
Primary Typeface
Manrope
Used for logo lockups, headlines, display copy, and titles. Its geometric elegance and modern structure reflect the confidence and clarity of our brand voice.
Download Manrope on Google Fonts ›Secondary Typeface
Sora
Used for body copy, supporting UI text, and long-form content. It balances legibility with personality, maintaining a cohesive tone across applications.
Download Sora on Google Fonts ›_TypeScale
Display
72px
Phase2_ Design System
H1
48px
Phase2_ Design System
H2
36px
Phase2_ Design System
H3
30px
Phase2_ Design System
H4
24px
Phase2_ Design System
H5
20px
Phase2_ Design System
Body Large
18px
Phase2_ Design System
Body
16px
Phase2_ Design System
Small
14px
Phase2_ Design System
XS
12px
Phase2_ Design System
_ManropeWeights
Light
300
The quick brown fox jumps over the lazy dog
Regular
400
The quick brown fox jumps over the lazy dog
Medium
500
The quick brown fox jumps over the lazy dog
SemiBold
600
The quick brown fox jumps over the lazy dog
Bold
700
The quick brown fox jumps over the lazy dog
ExtraBold
800
The quick brown fox jumps over the lazy dog
_SoraWeights
Light
300
The quick brown fox jumps over the lazy dog
Regular
400
The quick brown fox jumps over the lazy dog
Medium
500
The quick brown fox jumps over the lazy dog
SemiBold
600
The quick brown fox jumps over the lazy dog
Bold
700
The quick brown fox jumps over the lazy dog
_Usage
Manrope_
Headlines, page titles, section headers, display text, and the logo wordmark.
Use SemiBold or Bold for headlines. Medium for subheadings. Light for oversized display moments where the type itself is the design.
Sora_
Body copy, UI labels, form inputs, navigation, captions, and metadata.
Use Regular for body text. Medium for emphasis within paragraphs. Bold sparingly — only for inline callouts like Phase2_ in running text.
_Tokens
Headings
'Manrope', sans-serif
CSS: var(--font-manrope)
Tailwind: font-heading
Body / UI
'Sora', sans-serif
CSS: var(--font-sora)
Tailwind: font-sans
Code
ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace
CSS: var(--font-mono)
Tailwind: font-mono