Foundations

The token layer

Every visual decision resolves to a CSS custom property in ui/styles/tokens.css. The swatches and specimens on this page are read live from that stylesheet — toggle the theme and watch the ramps invert.

#219EFF azure RGB triplets for alpha 50–950 ramps
Color

Palette

Colors are stored as RGB triplets so consumers can apply alpha: rgb(var(--primary-500)) or rgb(var(--primary-500) / 0.16). Each ramp runs 50–950 and auto-inverts in dark mode — 100 flips dark, 900 flips light — so a single token class is correct in both themes. Click any swatch to copy its rgb(var(…)) form.

Ground

Azure-biased neutrals that everything sits on. --surface is the card plane, --background the page.

Primary — azure

Generated from the marketing azure #219EFF; 500 is the brand hex. Actions, focus, links, brand moments.

Secondary — slate

Quiet structure: secondary buttons, dividers, de-emphasized text.

Success — teal

Positive outcomes, healthy states, improving trends.

Warning — orange

Caution, thresholds approached, degraded-but-working.

Error — deep red

Failures and destructive actions. Deliberately darkened around #C81E22 — a move off the old rose.

Adding a color? New ramps must follow the convention: full 50–950 scale, plus the dark-mode inversion, defined in tokens.css in the same change. See the dark-mode pattern for why.
Typography

Three faces, one wordmark

Each face has one job. If text is a heading it's Sora; if it's data it's JetBrains Mono; everything else is Manrope.

Sora carries the headline.

--font-displayheadings · display values · card titles

Manrope carries the reading: body copy, labels, navigation, and everything conversational in the interface.

--font-sansbody · UI text · labels

1,024 sent · 98.7%

--font-monodata · code · badges

Ready, Set, Cloud

--font-logo (Raleway)wordmark lockups ONLY — never UI text

display / 30Page hero title
display / 22Section heading
display / 16Card title
sans / 15Primary body and nav labels
sans / 13Secondary copy, hints, captions
sans / 11 capsStat tile label
mono / 11 capsBadge
Shape

Radius

Sharper than the old app look, not fully square. Inputs and buttons sit at the 4px default; cards step up; pills go full.

--radius-sm · 2px

--radius · 4px

--radius-lg · 6px

--radius-xl · 8px

--radius-full · pill

Elevation

Shadows

Three steps, all tinted with the ink color. Cards rest at soft, lift to medium on hover; modals float at large.

--shadow-soft

cards at rest

--shadow-medium

hover · toasts

--shadow-large

modals