Typography
A modern type system built for clarity, hierarchy, and readability
Type Scale
display
Hero sections, page titles
headline
Section headers, major headings
title
Card titles, sub-sections
subtitle
Emphasized body text
body
Default body text
caption
Helper text, labels
overline
Small labels, metadata
Sans Serif
Neue Haas Grotesk Display
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()
font-family: 'Neue Haas Grotesk Display', system-ui, -apple-system, sans-serifPrimary font for all UI elements and body text
Monospace
SF Mono
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()
font-family: 'SF Mono', 'Roboto Mono', 'Courier New', monospaceCode blocks, technical content, and fixed-width needs
Line Height
Tight (1.25)
This text has tight line height. It's useful for large headings where you want a more compact appearance. Use sparingly for body text.
Normal (1.5)
This text has normal line height. It provides good readability for body text and is the default for most content. Comfortable for extended reading.
Relaxed (1.75)
This text has relaxed line height. It gives more breathing room between lines. Useful for improved readability in certain contexts.