Style guide

The live type scale and color tokens, pulled from globals.css. This page is the system's self-documentation and a visual-regression reference.

Headings

.h1Lock Serif displayclamp(32px, base×7, 84px)

Design that ships

.h2Lock Serif displayclamp(24px, base×5, 64px)

Design that ships

.h3Lock Serif displayclamp(20px, base×3, 48px)

Design that ships

.h4Hauss — large labelclamp(24px, base×5, 64px)

Design that ships

.h5Hauss — labelclamp(12px, base×2, 32px)

Design that ships

.h6Hauss — small labelclamp(10px, base×1.5, 24px)

Design that ships

Inside .h1–.h3 only: strong → Hauss, em → PP Pangaia, u → Sharp Roman. .h4–.h6 are flat Hauss labels and do not swap.

.h2base / strong / em / u

Lock Serif Hauss Pangaia Sharp Roman

.subhead--largeInter, gray

Section label, larger

.subheadInter, gray

Section label

.content pclamp(14px, base×2, 32px)

Body copy is Inter at a fluid size. Inline strong, emphasis, and links inherit the running color with an accent hover.

p.smallclamp(10px, base×1.5, 24px)

Small print — captions, footnotes, secondary detail.

--white#fefefePage background

--lightest#eeeeeeSubtle fills, image placeholders, prose underlines

--light#c0c0c0Hairline borders, input placeholders, muted arrows

--gray#707070Secondary text, subhead labels

--black#060606Primary text

--accent#1E40AFLinks, focus ring, brand wordmark