Typography
Two typefaces carry the system: Roslindale (Variable) for display, and Inter for text. The specimens, scale, and weights below are rendered live from the tokens.
roslindale · Roslindale Variable Faire voyager son âme d'enfant
inter · Inter Faire voyager son âme d'enfant
h5 · 24px
Every detail is considered
h1 · 64px
Every detail is considered
h2 · 48px
Every detail is considered
h3 · 36px
Every detail is considered
h4 · 32px
Every detail is considered
intro · 16px
Every detail is considered
base · 16px
Every detail is considered
sm · 14px
Every detail is considered
xs · 12px
Every detail is considered
extralight · 200
The drive takes 2.5 hours
light · 300
The drive takes 2.5 hours
regular · 400
The drive takes 2.5 hours
semibold · 600
The drive takes 2.5 hours
bold · 700
The drive takes 2.5 hours
black · 900
The drive takes 2.5 hours
Using type
Section titled “Using type”Roslindale is where the brand’s warmth shows — headlines, an occasional oversized phrase, a lead paragraph. Never set a long passage in it. Inter handles everything meant to be read at length.
The scale runs from --font-size-xs (12px) up through --font-size-h1
(64px), with --font-size-h2 through --font-size-h5 as the steps between.
Pick the step that fits the hierarchy rather than nudging arbitrary pixel
values — consistent steps are what make a set of pages feel like one brand.
Weights range from --font-weights-extralight (200) to
--font-weights-black (900). Reach for regular and semibold for nearly
everything; the extremes (extralight, black) are for display moments,
not body copy.
Line height and letter spacing are tokens too — --line-heights-tight
through --line-heights-relaxed, and --letter-spacing-tight through
--letter-spacing-wider. Use them instead of ad-hoc values so type rhythm
stays consistent across pages.