Typography
Inter as the default sans-serif. Sizes, weights, and line heights as CSS custom properties.
Font families
Token
Value
--source-font-sans
'Inter', system-ui, -apple-system, sans-serif
--source-font-mono
ui-monospace, 'SF Mono', 'Fira Code', monospace
Sizes
Token
Value
Sample
--source-text-xs
0.75rem
Ag
--source-text-sm
0.875rem
Ag
--source-text-base
1rem
Ag
--source-text-lg
1.125rem
Ag
--source-text-xl
1.25rem
Ag
--source-text-2xl
1.5rem
Ag
--source-text-3xl
1.875rem
Ag
--source-text-4xl
2.25rem
Ag
Weights
Token
Value
Sample
--source-font-normal
400
The quick brown fox
--source-font-medium
500
The quick brown fox
--source-font-semibold
600
The quick brown fox
Text colors
Token
Value
Sample
--source-color-text
var(--source-neutral-900)
The quick brown fox
--source-color-text-secondary
var(--source-neutral-600)
The quick brown fox
--source-color-text-label
var(--source-neutral-500)
The quick brown fox
--source-color-text-disabled
var(--source-neutral-400)
The quick brown fox
--source-color-text-subtle
var(--source-neutral-400)
The quick brown fox
--source-color-text-inverse
var(--source-neutral-0)
The quick brown fox
--source-color-text-default
var(--source-color-text)
The quick brown fox
Feedback text colors
Token
Value
Sample
--source-color-success
var(--source-success-600)
Status message text
--source-color-warning
var(--source-warning-600)
Status message text
--source-color-info
var(--source-info-600)
Status message text
--source-color-danger
var(--source-danger-500)
Status message text
Accent text
Token
Value
Use for
--source-color-accent-text
theme-dependent (e.g. blue-700)
Interactive text and highlighted inline labels that should follow the current accent theme.
--source-color-accent
theme-dependent (e.g. blue-600)
Underlines, indicators, and focus accents where a stronger visual signal is needed.
.promo-copy {
color: var(--source-color-accent-text);
}
.promo-copy a {
border-bottom-color: var(--source-color-accent);
}Body styles
Style
Sample
base / Regular
The quick brown fox jumps over the lazy dog.
sm / Regular
The quick brown fox jumps over the lazy dog.
sm / Secondary
The quick brown fox jumps over the lazy dog.
xs / Disabled
The quick brown fox jumps over the lazy dog.
Hero styles
Style
Sample
4xl / Semibold
Build faster.
3xl / Semibold
A design system.
2xl / Semibold
Tokens, components, and documentation.
xl / Semibold
Clone, import, and start building.
Links
State
Sample
Default
Read the documentation
Accent themed
Read the documentation
Hover
Border shifts to
--source-color-text
a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid var(--source-color-border-strong);
}
a:hover {
border-bottom-color: var(--source-color-text);
}/* Accent-themed link variant */
a.accent {
color: var(--source-color-accent-text);
border-bottom-color: var(--source-color-accent);
}When to use each weight
Do
Regular (400) for body copy and supporting text
Medium (500) for labels, nav items, and UI controls
Semibold (600) for headings and display text only
Don't
Use semibold for body paragraphs. It slows reading
Mix more than two weights on a single screen
Use weight to signal importance in dense tables
Size pairing
Do
Pair a display heading (2xl–4xl) with base or sm body text
Use xs for meta, timestamps, and labels inside dense components
Don't
Use more than three distinct sizes on a single view
Go below xs (12px) for any text that users must read
UI minimums
Element
Minimum
Why
Table headers
12px
Below 12px, uppercase labels lose readability and scanning speed in dense data views.
Contrast requirements
Token
Ratio
Use for
--source-color-text
16.1:1
Primary content. Exceeds WCAG AAA (7:1).
--source-color-text-secondary
5.4:1
Supporting text. Passes WCAG AA for normal text (4.5:1).
--source-color-text-disabled
2.6:1
Non-interactive, decorative only. Never for readable content.
Minimum sizes
Context
Minimum
Body text
14px (sm). 16px (base) preferred for long passages.
UI labels
12px (xs). Only when space-constrained and the label is non-critical.
Touch targets
Text inside touch targets must be legible at the minimum 44px target height
Line height
Use line-height: 1.5 (normal) for body text. Use line-height: 1.25 (tight) for large headings where tighter leading looks intentional. Never go below 1.2 for any readable text.