ATLAS Meridia Style Guide

Export CSS

Typography

Font families, type scale, and text styling tokens.

Font Families

display

--font-display
Page titles, section headings, drop caps
Weights: 300, 400, 500, 600
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
'Cormorant Garamond', Georgia, serif

body

--font-body
Article body, prose content
Weights: 400, 500, 600
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
'Lora', Georgia, serif

ui

--font-ui
Navigation, buttons, labels, meta text
Weights: 300, 400, 500
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
'DM Sans', system-ui, sans-serif

mono

--font-mono
Code blocks, inline code
Weights: 400, 500
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
'IBM Plex Mono', monospace

chinese

--font-chinese
Chinese content, zh-TW locale
Weights: 300, 400, 500, 600
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
'Noto Serif TC', serif

Type Scale

--text-xs
0.75rem(12px)
The quick brown fox
Legal, footnotes
--text-sm
0.875rem(14px)
The quick brown fox
Captions, labels
--text-base
1.125rem(18px)
The quick brown fox
UI text
--text-body
1.25rem(20px)
The quick brown fox
Primary reading size
--text-lg
1.5rem(24px)
The quick brown fox
Lead paragraphs
--text-xl
1.75rem(28px)
The quick brown fox
Subheadings
--text-2xl
2.25rem(36px)
The quick brown fox
Section titles
--text-3xl
3rem(48px)
The quick brown fox
Page titles
--text-4xl
4rem(64px)
The quick brown fox
Hero headlines
--text-5xl
5.5rem(88px)
The quick brown fox
Display

Line Heights

--leading-tight1.05
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Display text
--leading-snug1.25
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Headlines
--leading-normal1.5
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
UI text
--leading-relaxed1.6
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Body prose

Letter Spacing

--tracking-tight-0.02em
ATLAS MERIDIA
Headlines
--tracking-body-0.01em
ATLAS MERIDIA
Body text