Typography
Inter is the primary typeface. The type scale uses rem-based sizes with consistent line heights.
Display XL
60px / 72px
The quick brown fox
Display LG
48px / 60px
The quick brown fox
Heading 1
36px / 44px
The quick brown fox
Heading 2
30px / 38px
The quick brown fox
Heading 3
24px / 32px
The quick brown fox
Heading 4
20px / 30px
The quick brown fox
Body LG
18px / 28px
The quick brown fox
Body MD
16px / 24px
The quick brown fox
Body SM
14px / 20px
The quick brown fox
Body XS
12px / 18px
The quick brown fox
Usage
css
/* Font stack (set in globals.css) */
:root {
font-family: style="color:#86efac">"Inter", system-ui, sans-serif;
font-feature-settings: style="color:#86efac">"cv02", style="color:#86efac">"cv03", style="color:#86efac">"cv04", style="color:#86efac">"cv11";
}
/* Heading example */
.page-title {
font-size: 30px;
font-weight: 600;
line-height: 38px;
color: style="color:#c084fc">var(--n-900);
}
/* Body text */
.body-md {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: style="color:#c084fc">var(--n-600);
}