Design

Shared components and design tokens. Import from components/ui.

Spacing

Six-step scale from 4px to 64px. Used for gaps, padding, and margins.

4--m

8--m-s

12--m-m

20--m-l

40--m-xl

64--m-2xl

Typography

System font stack. Six sizes from 10px to 64px.

--fs-xs (10px)Extra small — chart labels, badges

--fs-s (11px)Small — captions, metadata

--fs-sm (14px)Small-medium — body text, controls

--fs-m (18px)Medium — base font size

--fs-l (24px)Large — section headings

--fs-xl (64px)Extra large

Colours

Adaptive palette using light-dark() and color-mix(). Toggle the theme in the nav bar to preview.

Background--c-bg

Text--c-font

Contrast light--c-bg-contrast-light

Contrast dark--c-bg-contrast-dark

Accent--c-accent

Overlay--c-overlay

Overlay dark--c-overlay-dark

Border on dark--c-border-on-dark

Headings

Three visual levels. The as prop overrides the HTML element independently.

Level 1 — Section heading (24px)

Level 2 — Subsection heading (18px)

Level 3 — Minor heading (14px)

Caption

Muted secondary text for metadata and labels.

<Heading level={2}>Title</Heading><Caption>Secondary text</Caption>

Card

Bordered surface container. Adapts to light and dark themes via color-mix.

Label

128

Description text goes here

Another card

42%

Some detail about this metric

Third example

7 days

<Card as="article">content</Card>

Thumb

Image thumbnail with sharp corners. Default (150px) and small (112px) variants.

Default (150px)

Small (112px)

<Thumb size="small" src="..." alt="..." />

Inputs & Controls

Form elements with consistent border, radius, and focus ring treatment.

Input

Input (disabled)

Select (default)

Select (compact)

Segmented toggle

<Input placeholder="..." /><Select variant="compact">...</Select><SegmentedToggle options={[...]} value={v} onChange={set} ariaLabel="..." />

Pill

Rounded link/button for navigation and actions. Surface (filled) and ghost (transparent) variants.

Surface (default)

Overview Colour Gear

Ghost

Open in Search ↗

<Pill href="#" variant="ghost">Link</Pill><PillButton>Action</PillButton>For <Link>: className={`${pillStyles.base} ${pillStyles.surface}`}

Overlay Button

Dark glass button for actions on thumbnails and media. Default and small (icon-only) sizes.

↗ Open

<OverlayButton size="small">×</OverlayButton>

Chart Tooltip

Accent-tinted tooltip shown on hover over chart bars/cells. Visible here for reference.

<ChartTooltip>Label · 42</ChartTooltip>

Buttons

Shared button styles from common.module.css.

Standard button

Link button

Split button

Primary

className={commonStyles.button}

Stack

Utility classes for vertical rhythm. grid + gap at each spacing level.

.stack (8px)

.stackL (20px)

.stackXl (40px)

.stackPage (64px)

className={commonStyles.stack}