Tokens

Colour, type, spacing, shape and density as implemented in packages/ui-components/src/styles/globals.css. The why behind each value is in DESIGN.md. Components built on them: /showcase and /components.

Color

Toggle the mode to watch one class flip the whole system. Values are read from the rendered swatch, so they follow the mode; hover a hex for its oklch, click to copy it.

Brand

brand-navy—

brand-blue—

brand-green—

Gray ramp

50—

100—

200—

300—

400—

500—

600—

700—

800—

900—

Blue ramp

50—

100—

200—

300—

400—

500—

600—

700—

800—

900—

Green ramp

50—

100—

200—

300—

400—

500—

600—

700—

800—

900—

Ground

bg—

surface—

surface-1—

surface-2—

surface-3—

Ink

text—

text-muted—

border—

border-strong—

Primary

primary—

primary-hover—

primary-strong—

primary-soft—

primary-foreground—

Secondary

secondary—

secondary-foreground—

Status (solid = fills, -strong = text, -soft = tint)

success—

success-strong—

success-soft—

warning—

warning-strong—

warning-soft—

danger—

danger-strong—

danger-soft—

info—

info-strong—

info-soft—

hold—

hold-strong—

hold-soft—

running—

running-strong—

running-soft—

Attention and upcoming

attention—

attention-soft—

upcoming—

upcoming-soft—

Chart

chart-1—

chart-2—

chart-3—

chart-4—

chart-5—

chart-6—

Gradients

Deals move fast

bg-gradient-section135° · brand-navy 0% · brand-blue 38% · brand-green 98% · section backgrounds: heroes, title bands

Deals move fast

bg-gradient-action135° · brand-navy 0% · brand-blue 38% · brand-green 98% · filled button and outline edge; = the section gradient, hover twin 12% darker (fill) or turned 180° (edge, --gradient-action-reverse)

Deals move fast

bg-gradient-primary135° · primary-deep · primary (navy → blue in light) · progress fill, user message bubble

Typography

Alcyone throughout: display weight and tracking on h1–h3, body weights below. Rendered with the real elements so the base layer sets each one.

Display

Deals fast

Alcyone 100 lg · 72 md · 48 / 500 / 1 / -0.06em · accent 0.95em / 0.955 / -0.07em

Display sm

Buy and sell excess stock

Alcyone 72 lg · 56 md · 40 / 500 / 1.05 / -0.05em · accent 0.95em / -0.06em

Page title

Alcyone 34 / 500 / 1.15 / -0.02em

Section

Alcyone 24 / 600 / 1.25 / -0.015em

Subsection, card title

Alcyone 18 / 600 / 1.35 / -0.01em

Inline group heading

Alcyone 15 / 600 / 1.4

Minor label

Alcyone 13 / 500 / 1.4 · text-muted

Eyebrow

Section marker

Alcyone 13 / 500 / +0.06em · uppercase · text-muted

Body

Agents draft, people decide. The transaction boundary is the human's press.

Alcyone 15 / 400 / 1.65

Body emphasis

Labels and inline emphasis, never 700 in body.

Alcyone 15 / 500

Small

Helper text, captions, chips.

Alcyone 13 / 400 / 1.5

Caption

Timestamps, footnotes.

Alcyone 12 / 400 / +0.01em

Numbers

€12,480.50 · 98,210 · 14:32:07 · 2026-09-14 14:32

tabular-nums in tables and tiles; dates and times as ISO digits, set like money

Stat value

1,284€98,210

Alcyone 48 / 700 / 1.05 / -0.025em · text or brand-green

Spacing, shape, shell

4px base. Crisp radii, not a multiplier. Shell and density lengths are runtime variables.

Spacing scale

Radii

rounded-sm

4px · inputs, chips, xs/sm buttons

rounded-md / rounded

8px · buttons, cards

rounded-lg

12px · popovers, menus, panels

rounded-xl

16px · dialogs, sheets, drawers

rounded-full

9999px · pills, avatars

Shell and density

w-sidebar: 240px
w-rail: 56px
h-topbar: 48px
h-row: 52 / 40px
p-card: 24 / 16px
gap-section: 48 / 24px

z-index: sticky 10 · overlay 30 · modal 40 · dropdown 45 · toast 50 · tooltip 60

Density

Same markup twice. Left comfortable; right inside data-density=compact: 13px body, tighter padding and rows. Headings keep their family and size.

Reconcile Stripe payout

41 orders, €98,210.00

Running

Ledger agent is matching the payout to orders. Nothing needed from you yet.

Row at h-row€98,210.00

Reconcile Stripe payout

41 orders, €98,210.00

Running

Ledger agent is matching the payout to orders. Nothing needed from you yet.

Row at h-row€98,210.00