Colors

Simplified color system using CSS variables for theming. All colors adapt between light and dark modes and use 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

Deeper decorative tone for 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

Section Surface

--section-surface

SectionFrame blend (carousel fades, filter fades)

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 Ink

--surface-ink

Dark CTA background (stays dark in both themes)

Surface Ink Hover

--surface-ink-hover

CTA hover state

Text

Text hierarchy from primary to muted.

Foreground

--foreground

Primary text

Foreground Secondary

--foreground-secondary

Secondary text (50%)

Text Tertiary

--text-tertiary

Tertiary text (40%)

Text Muted

--text-muted

Muted/placeholder text (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

Theme-adaptive foreground overlays (white in dark mode, black in light mode) for faint tints, section-frame lines, and hover highlights.

Foreground Subtle

--foreground-subtle

Faint overlays, section-frame lines (~5%)

Foreground Overlay

--foreground-overlay

Hover highlights, carousel arrows (~10%)

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);