Typography

Cosmic throughout: ExtraBold for display, Bold for UI and labels, Regular or Light for body. Each style is a type class; only its size token changes per breakpoint, while line height and tracking are unitless or em, so they scale with it.

Type styles

Resize the window to see the sizes change. Size per breakpoint is in the next table.

.type-hero-name --type-hero-size extra-bold lh 0.729 tracking -0.01em uppercase

Hero name — Cosmic Extra Bold, uppercase, orange

Sami

.type-hero-subtitle --type-subtitle-size bold lh 1.06 tracking 0.03em

Hero subtitle — Cosmic Bold, orange

Product Designer who understands both the business and the people.

.type-quote-body --type-quote-body-size regular lh --line-height-quote-body tracking 0.02em

Quote body — Cosmic Regular, dark on orange bg

Sami is a fantastic designer and person.

.type-quote-mark --type-quote-mark-size bold lh --line-height-quote-mark tracking 0

Quote mark — Cosmic Bold, large decorative glyph

”

.type-attribution-name --type-badge-size bold lh 1.5 tracking 0.04em

Quote attribution name — Cosmic Bold

James Dashwood

.type-attribution-role --type-badge-size regular lh 1.5 tracking 0.05em

Quote attribution role — Cosmic Regular

Sr Product Manager, ex-Happeo

.type-work-heading --type-work-heading-size extra-bold lh 0.9375 tracking -0.01em

WORK section heading — Cosmic Extra Bold

WORK

.type-article-title --type-article-title-size extra-bold lh 0.96 tracking 0

Article title — Cosmic Extra Bold

Redesigning admin oversight

.type-lead --type-lead-size light lh 1.25 tracking 0.02em

Article lead — Cosmic Light

I designed the new admin view that brings every Page into one place.

.type-figure --type-figure-size bold lh 1.1 tracking 0

Key figure — Cosmic Bold (Figma "Display/M": 100 / 110 at 1440)

41%

.type-figure-text --type-figure-text-size bold lh 0.96 tracking 0

Key figure in words ("Pages 2.0 unblocked") — smaller, tight

Pages 2.0 unblocked

.type-footer-heading --type-footer-heading-size extra-bold lh 0.82 tracking -0.01em

Footer heading — Cosmic Extra Bold, two forced lines

Let’s work together.

.type-eyebrow --type-h3-size bold lh 1.33 tracking 0 uppercase

Problem

.type-h3 --type-h3-size bold lh 1.33 tracking 0

Beta requirements

.type-h2 --type-h2-size bold lh 0.96 tracking 0.03em

Finding the right problem

.type-body --type-body-size regular lh 1.5 tracking 0.05em

Admins had no single place to see all their Pages.

.type-body-note --type-body-note-size regular lh 1.5 tracking 0.05em

Body note — Cosmic Regular, small print

.type-card-title --type-card-title-size bold lh 1 tracking 0

Work card title — Cosmic Bold, tight

Solving the cold-start problem

.type-card-date --type-card-date-size light lh 1.5 tracking 0

Work card date — Cosmic Light

01–06/2025

.type-badge --type-badge-size bold lh 1.5 tracking 0.04em

Badge label — Cosmic Bold, small

Product Design

.type-nav --type-nav-size bold lh 1.5 tracking 0.04em

Nav label — Cosmic Bold, fixed size all breakpoints

About

Sizes per breakpoint

Token	Base	≥ 390	≥ 640	≥ 744	≥ 1024	≥ 1440	≥ 1920	Note
`--type-nav-size`	`16px`							constant at all widths
`--type-button-size`	`16px`					`22px`
`--type-hero-size`	`110px`	`120px`			`180px`	`240px`
`--type-subtitle-size`	`16px`	`18px`			`27px`	`36px`
`--type-quote-body-size`	`20px`	`24px`			`32px`	`36px`
`--type-quote-mark-size`	`120px`			`160px`
`--type-work-heading-size`	`64px`	`80px`			`160px`	`160px`
`--type-card-title-size`	`28px`	`32px`			`40px`	`48px`
`--type-card-date-size`	`14px`	`16px`			`24px`	`32px`
`--type-badge-size`	`12px`	`14px`			`16px`
`--type-badge-lg-size`	`16px`				`22px`			article header badges
`--type-footer-heading-size`	`56px`	`64px`	`96px`		`128px`		`160px`
`--type-body-size`	`18px`							Figma Body/Regular: article copy
`--type-body-note-size`	`16px`
`--type-article-title-size`	`40px`	`48px`	`72px`		`96px`
`--type-h2-size`	`24px`	`28px`			`32px`	`36px`		h2 and big list numbers (Figma Heading/Label: 36)
`--type-metric-size`	`48px`				`64px`	`80px`
`--type-lead-size`	`20px`	`24px`			`28px`	`32px`
`--type-figure-size`	`56px`	`64px`			`80px`	`100px`		key figures: number
`--type-figure-text-size`	`32px`	`36px`			`48px`	`64px`		key figures: words instead of a number
`--type-h3-size`	`20px`				`24px`			h3 and eyebrow (Figma Heading/Label Small: 24)

Article text

Inside .article-body, plain h2, h3, p and li get the article styles automatically (Figma 110:1214): H2 Bold 36 · lh 0.96, H3 Bold 24/32, Body Regular 18 · lh 1.5 · 5%. Use the classes elsewhere. 24px (--spacing-lg) between all blocks. See Article text.

All body copy on the site is 18 (.type-body), the footer included.

Quote mark

Always ” (U+201D, slanted in Cosmic), never ". Beside the quote it is top-aligned to the text by --quote-mark-align-offset, computed from Cosmic's font metrics below, so the alignment holds at every size.

Family, weights and metrics

Token	Base	Note
`--font-family-sans`	`'Cosmic', 'Space Grotesk', system-ui, sans-serif`
`--font-weight-light`	`300`
`--font-weight-regular`	`400`
`--font-weight-medium`	`500`
`--font-weight-bold`	`700`
`--font-weight-extra-bold`	`800`
`--font-weight-black`	`900`

Token	Base	Note
`--font-metric-ascent`	`0.9`
`--font-metric-content`	`1.1`	ascent + descent
`--font-metric-cap`	`0.699`	cap height = top of the ” glyph too
`--line-height-quote-body`	`1.25`
`--line-height-quote-mark`	`0.70`