Colors

Dark-mode-only color system built from CSS variables — no theme switching. The surface classes are the sanctioned exception: .surface-paper / .surface-white are a light plane inside the dark site, and .surface-ink a dark island within one. They re-point these same tokens for a subtree, so components adapt without any component-specific colours. Uses the production blue accent scale.

Accent

Primary accent family — 6 tokens cover everything from primary buttons to subtle background tints and strong glows.

Accent

--accent

Primary accent color

Accent Hover

--accent-hover

Lighter on hover

Accent Deep

--accent-deep

The dark end of the accent, and the one to reach for behind white text — 5.83:1, so it clears AA where --accent does not. Used for the service card title highlight and the hover CTA badge, plus hero and avatar gradients.

Accent Subtle

--accent-subtle

Soft background tint (~10%)

Accent Soft

--accent-soft

Mid borders, hover wash (~20%)

Accent Strong

--accent-strong

Strong borders, glows, shadows (~40%)

Backgrounds

Page background plus the SectionFrame blend color.

Background

--background

Page background

Surface Section

--surface-section

The panel a SectionFrame paints behind its content — only a whisper above the page background, so a framed section reads as a faint plane rather than a lighter slab. Translucent, so it composites onto any ground.

Surface Ink Panel

--surface-ink-panel

The opaque dark plane cards and panels sit on. Backs the CategoryFilters scroll fade, and — on a light ground — the card fills in .surface-paper .card-service / .card-carousel-item and the ink panel in .section-frame-bg-ink, whose washes end on transparent and would otherwise let the cream tint them. Equals --surface-section composited over --background at :root and under .surface-ink; deliberately diverges under .surface-paper.

Surfaces

Elevated surfaces for cards, inputs, popovers, and the always-dark ink surface used by the CTA button.

Surface

--surface

Cards, inputs, placeholders

Surface Elevated

--surface-elevated

Elevated cards, buttons, popovers

Surface Hover

--surface-hover

Hover states

Surface Card

--surface-card

Flat card plane (~#0f0f0f) — testimonial and ux-audit panels. The non-gradient counterpart to --gradient-card-surface. Opaque on purpose: a translucent version let decorative page glows bleed through and tint the larger cards.

Surface Ink

--surface-ink

CTA button fill. Note: the token --surface-ink is unrelated to the .surface-ink class, which restores dark tokens inside a light section.

Surface Ink Hover

--surface-ink-hover

CTA hover state

Text

Text hierarchy from primary to muted.

Foreground

--foreground

Primary text

Foreground Secondary

--foreground-secondary

Body copy, hero subtitles, descriptions (72%)

Text Tertiary

--text-tertiary

Tertiary text, metadata (40%)

Text Muted

--text-muted

Muted text and placeholders (30%)

Borders

Border colors for dividers and container outlines.

Border

--border

Default borders

Border Subtle

--border-subtle

Subtle borders

Decorative

Status colors for success (green), errors (red), and ratings (gold).

Green

--green

Success/available

Gold

--gold

Stars/ratings

Red

--red

Errors/danger

Orange

--orange

Attention/availability

Foreground opacity

White overlays at low opacity used for faint tints, section-frame lines, and hover highlights.

Foreground Subtle

--foreground-subtle

Faint overlays and illustration fills (~5%). Frame hairlines use --border-subtle, not this.

Foreground Overlay

--foreground-overlay

Hover highlights and the .spotlight-arrow fill (~10%). Carousel arrows use a solid --background so they read on whatever they overlay.

Usage

Tailwind Classes

bg-surface, bg-surface-elevated, bg-accent, bg-accent-hovertext-foreground, text-text-tertiary, text-accentborder-border, border-border-subtle, border-accent

CSS Variables

color: var(--foreground);background: var(--accent-subtle);box-shadow: 0 0 30px var(--accent-strong);