Typography
A harmonious type system with carefully balanced sizes, weights, and spacing for optimal readability.
Font Families
Primary typefaces used throughout the interface.
Sans
$font-family-sansThe quick brown fox jumps over the lazy dog. 0123456789
Mono
$font-family-monoThe quick brown fox jumps over the lazy dog. 0123456789
Type Scale
Font sizes from extra small to hero display text.
$font-size-xs0.75rem12px
Extra small text$font-size-sm0.875rem14px
Small text for captions and labels$font-size-base1rem16px
Base text size for body content$font-size-lg1.125rem18px
Large text for emphasis$font-size-xl1.25rem20px
Extra large for subheadings$font-size-2xl1.5rem24px
Heading level 4$font-size-3xl1.875rem30px
Heading level 3$font-size-4xl2.25rem36px
Heading level 2$font-size-5xl3rem48px
Heading 1$font-size-6xl3.75rem60px
Display$font-size-7xl4.5rem72px
HeroUsage in SCSS
@use '@/styles/variables' as *;
.heading {
font-size: $font-size-4xl;
}
.body {
font-size: $font-size-base;
}Font Weights
Weight variations for text emphasis and hierarchy.
Aa
light300
Aa
normal400
Aa
medium500
Aa
semibold600
Aa
bold700
Usage in SCSS
@use '@/styles/variables' as *;
.title {
font-weight: $font-weight-bold;
}
.label {
font-weight: $font-weight-normal;
}Line Heights
Line spacing options for different content types.
none1
No extra line spacing. This is a sample paragraph demonstrating line height.
tight1.25
Compact headings. This is a sample paragraph demonstrating line height.
snug1.375
Subheadings. This is a sample paragraph demonstrating line height.
normal1.5
Default body text. This is a sample paragraph demonstrating line height.
relaxed1.625
Long-form content. This is a sample paragraph demonstrating line height.
loose2
Maximum readability. This is a sample paragraph demonstrating line height.
Usage in SCSS
@use '@/styles/variables' as *;
.heading {
line-height: $line-height-tight;
}
.paragraph {
line-height: $line-height-relaxed;
}