Design System

Type System

Five font families, weight aliases, and a full type scale. Tokens mirror ocupop-type.css.

ocupop-type.css · April 2026

Font Families

Primary · Sans

Aa Bb Cc
Gg Qq Rr

Commuters Sans

Dharma Type · 8 weights · Licensed · --font-sans · Default for body + UI

300400500600700800900

Show weight scale

300 The work shapes the world around us. Light

400 The work shapes the world around us. Regular

600 The work shapes the world around us. SemiBold

700 The work shapes the world around us. Bold

800 The work shapes the world around us. ExtraBold

900 The work shapes the world around us. Heavy

Alt · Sans

Aa Bb Cc
Gg Qq Rr

Work Sans

Wei Huang · 9 weights · Free/Google · --font-sans-alt · Fallback or swap

300400500600700800900

Show weight scale

300 The work shapes the world around us. Light

400 The work shapes the world around us. Regular

500 The work shapes the world around us. Medium

600 The work shapes the world around us. SemiBold

700 The work shapes the world around us. Bold

800 The work shapes the world around us. ExtraBold

900 The work shapes the world around us. Black

Primary · Serif

Aa Bb Cc
Gg Qq Rr

Berlingske Serif

Playtype · 7 weights · Licensed · --font-serif · Editorial + pull quotes

300400600700900

Show weight scale

300 The work shapes the world around us. Light

400 The work shapes the world around us. Regular

600 The work shapes the world around us. SemiBold

700 The work shapes the world around us. Bold

900 The work shapes the world around us. Black

Alt · Serif

Aa Bb Cc
Gg Qq Rr

Playfair Display

Claus Eggers Sørensen · Free/Google · --font-serif-alt · Fallback or swap

400500600700800900

Show weight scale

400 The work shapes the world around us. Regular

500 The work shapes the world around us. Medium

600 The work shapes the world around us. SemiBold

700 The work shapes the world around us. Bold

800 The work shapes the world around us. ExtraBold

900 The work shapes the world around us. Black

Mono

0xAB fn(){} → ≠ ≤

JetBrains Mono

JetBrains · 100–800 · Free/Google · --font-mono · Code, data, tokens

300400500600700800

Show weight scale

300 The work shapes the world around us. Light

400 The work shapes the world around us. Regular

500 The work shapes the world around us. Medium

600 The work shapes the world around us. SemiBold

700 The work shapes the world around us. Bold

800 The work shapes the world around us. ExtraBold

Type Scale

--type-display

size 3.5rem / 56px

leading 1.1

tracking −0.02em

weight 900 Heavy

family Sans

The work shapes the world.

--type-h1

size 2.5rem / 40px

leading 1.2

tracking −0.01em

weight 700 Bold

family Sans

Design systems that scale with intention.

--type-h2

size 1.75rem / 28px

leading 1.25

tracking −0.01em

weight 700 Bold

family Sans

Color, type, and motion working as one system.

--type-h3

size 1.25rem / 20px

leading 1.3

tracking 0em

weight 600 SemiBold

family Sans

Card title or sidebar heading at this level

--type-body

size 1rem / 16px

leading 1.6

tracking 0em

weight 400 Regular

family Sans · default

Good design is not about decoration. It is about solving problems with clarity and intention — making the complex feel simple, and the unfamiliar feel approachable.

Secondary body copy sits at the same scale, softened by --text-2 for hierarchy without size change.

--type-body-serif

size 1rem / 16px

leading 1.6

tracking 0em

weight 400 Regular

family Serif · editorial alt

The best typographic systems don't shout. They guide — quietly, reliably — so the reader can stay inside the content without ever noticing the container.

Berlingske italic for pull quotes, captions, or emphasis within editorial prose.

--type-small

size 0.875rem / 14px

leading 1.4

tracking 0em

weight 400 Regular

family Sans

Image caption, footnote, or secondary label. This size works well beneath a figure or alongside a timestamp. Keep lines short — under 60ch — for best legibility at this scale.

--type-overline

size 0.75rem / 12px

leading 1.4

tracking 0.1em

weight 600 SemiBold

family Sans · uppercase

Category Label · Section Tag · Eyebrow

--type-micro

size 0.6875rem / 11px

leading 1.3

tracking +0.02em

weight 400 Regular

family Sans

Legal copy · Timestamps · Badge labels · Form helper text · Tooltip content at this smallest tier.

Contextual Pairing — Sans + Serif

Case Study · Brand Systems

Building a design system that travels across media.

A cohesive visual language isn't about restricting creativity — it's about establishing a shared grammar so teams can move fast without drifting apart. The following work explores how a single token layer can span web, print, and motion.

"The goal was never consistency for its own sake. It was coherence — the feeling that every surface belongs to the same world."

Berlingske Serif carries the pull quote above while Commuters Sans handles body and UI. The contrast in structure gives editorial moments room to breathe without breaking system rules.

--font-sans · --font-serif pairing Overline → H1 → Body Sans → Pull Serif → Body Sans

JetBrains Mono — Code Specimen

/* ocupop-type.css — font family stacks */
:root {
  --font-sans:      "Commuters Sans", "Helvetica Neue", Arial, sans-serif;
  --font-sans-alt:  "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --font-serif:     "Berlingske Serif", Georgia, serif;
  --font-serif-alt: "Playfair Display", Georgia, serif;
  --font-mono:      "JetBrains Mono", ui-monospace, monospace;

  /* safe weight aliases — no 500 for --font-sans */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-heavy:     900;
}