Design system

The tokens, rules, and components that keep this site consistent. Switch the theme to see every value change together.

Principles

Two sizes: 16px for reading and 14px for metadata and controls, in weights 460, 500, and 560. Hierarchy comes from color, weight, and spacing.
8px grid: Fixed spacing and control sizes use multiples of 8. Every control keeps a 48px target.
Flat until it floats: Reading surfaces stay flat. Popups and dialogs get a smooth shadow ring instead of a border.
Quiet motion: Three durations share one easing curve. Reduced motion sets all three to zero.

Color

Semantic tokens map onto the Harmony neutral and orange ramps. Ratios are measured in your browser for the current theme. Text needs 4.5:1; focus rings and marks need 3:1.

--foreground on --backgroundBody text, titles, and active controls.–Needs 4.5:1
--muted-foreground on --backgroundDescriptions, metadata, and resting controls.–Needs 4.5:1
--muted-foreground on --mutedQuiet text on a muted surface.–Needs 4.5:1
--destructive on --backgroundErrors and destructive actions.–Needs 4.5:1
--primary-foreground on --primaryText placed on the orange accent.–Needs 4.5:1
--primary on --backgroundThe orange accent for marks, strokes, and selection.–Needs 3:1
--ring on --backgroundFocus outlines.–Needs 3:1
--border on --backgroundHairline dividers. Decorative, so no minimum applies.–Decorative

Type

Inter sets everything you read, Berkeley Mono sets code, and Cormorant Garamond sets quotes.

Inter

The quick brown fox jumps over the lazy dogfont-normal 400
The quick brown fox jumps over the lazy dogfont-medium 500
The quick brown fox jumps over the lazy dogfont-semibold 550

Berkeley Mono

The quick brown fox jumps over the lazy dogfont-mono 400

Cormorant Garamond

The quick brown fox jumps over the lazy dogfont-serif 500

Sizes and color

Body texttext-base 16/24
Small texttext-sm 14/20
Muted texttext-muted-foreground

Try Inter’s axes

Spacing

Pages use 32px between groups, 16px between a heading and its content, and 8px between a title and its description.

Spacing scale

8px 0.5rem
16px 1rem
24px 1.5rem
32px 2rem
48px 3rem
64px 4rem

Shape and elevation

Radius

Small marksrounded-sm 4px
Controlsrounded-md 8px
Popupsrounded-lg 12px
Panelsrounded-xl 16px
Switches, thumbsrounded-full 9999px

Elevation

Skip linksmooth-shadow-ring-sm
Menus, selects, dialogssmooth-shadow-ring-md
Floating panelssmooth-shadow-ring-lg

Motion

Every duration uses the same expo-out curve, cubic-bezier(0.22, 1, 0.36, 1), so changes start quickly and settle gently. Anything under 100ms reads as instant; 200–300ms feels responsive without drawing attention.

--micro-duration 200msPress feedback, small icon shifts, and menu feedback.
--control-duration 240msColor, border, focus, and popup changes on controls.
--panel-duration 300msDisclosures, tab indicators, and theme changes.

Reduced motion is on, so every duration resolves to 0ms.

Focus and access

Focus shows a 1px outline in the ring color, offset by 2px. It fades in over the control duration and becomes the system highlight in forced-colors mode. Press Tab on this page to see it.

Controls are at least 48px in both directions. Interactive studies keep their motion local, and reduced motion skips page entrances.

Components

Base UI primitives in components/ui, styled with the shared ui-control, ui-popup, and ui-menu-item utilities.

Button: Outline, ghost, destructive, and link variants. Default, small, and icon sizes, all 48px tall.
Input, Textarea: A 1px input border that darkens on hover. Placeholders use the muted foreground.
Select, Menus: Popups share ui-popup: 14px text, 48px items, and a 4px settle on open.
Checkbox, Radio, Switch: 16px marks centered in 48px targets. Checked states fill with the foreground.
Slider, Progress: An 8px muted track with a foreground range.
Tabs: An underline indicator that slides between triggers.
Dialog, Collapsible: A blurred backdrop for dialogs. Disclosures animate height over the panel duration.