Colour

One dial reskins everything

Drag these. Every swatch, button, shadow and focus ring on this page is derived from the two hue values below — nothing is hardcoded.

Brand hue 34 Accent hue 288

:root { --hue-brand: 34; --hue-accent: 288; }

Brand

Accent

Neutral

Semantic

Type

A voice and an interface

Fraunces for anything meant to be read as a voice; Inter Tight for anything meant to be read as an interface. Every size is a clamp(), so no breakpoint ever touches a font size again.

--t-4xl / .display

Handsome is as handsome does

--t-3xl / h1

The quick brown fox

--t-xl / h2

Jumps over the lazy dog

--t-lg / h3

Pack my box with five dozen jugs

--t-md / .lead

How vexingly quick daft zebras jump. The five boxing wizards jump quickly, and the job requires extra pluck.

--t-base / body

Sphinx of black quartz, judge my vow. Two driven jocks help fax my big quiz, and the public never once suspected a thing about any of it.

--t-sm / .muted

Waltz, bad nymph, for quick jigs vex.

--t-xs / .eyebrow

Section label

--font-mono

const limitingMagnitude = 6.7 - lightPollution * 4.6;

Components

The parts

Buttons

Pills

Default Quiet Live

Input

Elevation

1

2

3

4

glow

Radii

sm

md

lg

xl

full

Space

Using it

<link rel="stylesheet" href="/css/tokens.css">
<link rel="stylesheet" href="/css/system.css">

<!-- reskin the whole project -->
<style>:root { --hue-brand: 250; --hue-accent: 180; }</style>