Style guide

The live type scale, color tokens, and spacing system 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

Display font swaps

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

.h1base / strong / em / u

Lock Serif Hauss Pangaia Sharp Roman

.h2base / strong / em / u

Lock Serif Hauss Pangaia Sharp Roman

.h3base / strong / em / u

Lock Serif Hauss Pangaia Sharp Roman

Subheads

.subhead--largeInter, gray

Section label, larger

.subheadInter, gray

Section label

Body copy

.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 underline-color shift on hover.

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

Small print — captions, footnotes, secondary detail.

Spacing scale

All spacing derives from --base: clamp(4px, 0.5vw, 16px). Multiply by a fixed factor. At 1440px viewport, base ≈ 7.2px.

×0.5

×1

×2

×3

×5

×8

×10

Class naming: .padding--80 = base×10, .margin-top--24 = base×3. The number is the pixel value at 1920px (where base = 9.6px), not the multiplier.

Color tokens

Click any swatch to copy the CSS variable. Contrast ratios measured against --white (#fefefe).

--white#fefefePage background

--lightest#eeeeeeSubtle fills, image placeholders1.36:1

--light#c0c0c0Hairline borders, input placeholders, muted arrows1.80:1

--gray#707070Secondary text, subhead labels4.91:1 ✓ AA

--black#060606Primary text20.09:1 ✓ AAA

--accent#1E40AFLinks, focus ring, brand wordmark8.65:1 ✓ AAA

Interaction states

Global transition timing: --transition: 0.15s. All interactive elements carry cursor: pointer and a color/opacity shift on hover.

Linksunderline-color shift

Default link — resting underline uses --light; hover and focus deepen it to --gray. Text color stays inherited; only the underline shifts.

Focus ring2px accent, 2px offset

Simulated focusTab through this page to see live focus rings.

Button.button