Foundations

Surfaces, text, borders, status — every semantic token placed in its canonical role. Toggle the theme to verify both light and dark render with the intended hierarchy.

Surfaces

Five-step depth scale. Body is the outermost wrap; surface is the content carrier; muted, subtle, and elevated handle nested context, pressed states, and overlays.

--bg-body Page background

Off-white L:99 — outermost wrapper

--bg-surface Card / primary content surface

Pure white — sits on body, no border needed

--bg-muted Quiet section / sidebar

L:97 — recedes from body slightly

--bg-subtle Pressed state / divider zones

L:94 — clearly distinct from body

--bg-elevated Modal / popover

White + shadow

Text hierarchy

Every text role is named, paired with its contrast target on light bg, and shown at its intended typographic treatment.

--text-primary Headings & key UI labels

--text-secondary Body paragraphs, the default for <p>

--text-muted Captions, secondary UI text

--text-meta Dates · Timestamps · Mono labels

--text-link Inline link in body text

--text-accent Personality accents — names, signatures

Borders

Four-step border weight scale. Use --border-subtle for the bulk of dividers; step up only when a region must read as enclosed.

--border-light Almost imperceptible · table rows, list separators

--border-subtle Standard list/section divider

--border-default Inputs, cards, regular UI structure

--border-strong Emphasised border · selected state, focus ring fallback

Buttons

Primary fills with Mongoose · secondary uses Mountbatten dust · ghost is a transparent token over surface.

--color-primary-main · --text-inverse

--color-accent-main · --text-inverse

transparent · --text-primary · --border-default

Semantic / status

Alert-style banners. border-top: 2px solid with a soft tinted bg — never gradient, never border-left.

Success --color-success-* · H:142

Saved successfully.

Warning --color-warning-* · H:62

Heads up — review this.

Error --color-error-* · H:25

Couldn't reach the server.

Info --color-info-* · H:260

For your reference.

Composed page sample

All roles working together. Hover any block to flash its token name.

Stratos

Color · Typography · Motion

A design system that feels like itself.

Built around Mongoose gold, Mountbatten dust, and Abbey charcoal — same hue family, different lightness levels, no AI-slop colors.

2026 · Article 1

Title of the writing

A two-line excerpt that demonstrates body text against a card surface. Notice the subtle border and softened bg around the card.

2026 · Article 2

Title of the writing

A two-line excerpt that demonstrates body text against a card surface. Notice the subtle border and softened bg around the card.

2026 · Article 3

Title of the writing

A two-line excerpt that demonstrates body text against a card surface. Notice the subtle border and softened bg around the card.