Colors

Semantic Tailwind tokens defined in @repo/tailwind-config/themes.css. Always use these — never raw colors like text-blue-500.

Surfaces

Tonal layers — depth comes from background contrast, not borders.

--bg-default—

Cards, active surfaces

bg-bg-default

--bg-muted—

Page base

bg-bg-muted

--bg-subtle—

Secondary cards

bg-bg-subtle

--bg-emphasis—

Section backgrounds

bg-bg-emphasis

--bg-inverted—

Deep navy accents

bg-bg-inverted

Brand

Logo blue. Use sparingly for CTAs and hero data.

--bg-brand—

Logo blue, primary CTAs

bg-bg-brand

--content-on-brand—

Text on brand surfaces

text-content-on-brand

--content-brand—

Hero metrics accent

text-content-brand

Accents

Secondary (sky blue) and tertiary (deep cyan) — for charts, chips, and editorial highlights. Not for CTAs.

--bg-accent-secondary—

Sky blue accent — chips, chart fills, editorial highlights

bg-bg-accent-secondary

--content-accent-secondary—

Text/icons on the secondary accent surface

text-content-accent-secondary

--bg-accent-tertiary—

Deep cyan accent — secondary chart series, badges

bg-bg-accent-tertiary

--content-accent-tertiary—

Text/icons on the tertiary accent surface

text-content-accent-tertiary

Editorial accents

Decorative palette for data cards and editorial highlights. Each hue family ships a default fill, a soft tinted background, and an ink color for text on the soft surface.

--bg-accent-coral—

Coral fill — heat indicators

bg-bg-accent-coral

--bg-accent-coral-soft—

Soft coral surface for tinted cards

bg-bg-accent-coral-soft

--content-on-accent-coral—

Ink text on coral-soft surfaces

text-content-on-accent-coral

--bg-accent-warm-teal—

Warm teal fill — growth indicators

bg-bg-accent-warm-teal

--bg-accent-warm-teal-soft—

Soft warm-teal surface

bg-bg-accent-warm-teal-soft

--content-on-accent-warm-teal—

Ink text on warm-teal-soft surfaces

text-content-on-accent-warm-teal

--bg-accent-dusty-blue—

Dusty blue fill — sentiment markers

bg-bg-accent-dusty-blue

--bg-accent-dusty-blue-soft—

Soft dusty-blue surface

bg-bg-accent-dusty-blue-soft

--content-on-accent-dusty-blue—

Ink text on dusty-blue-soft surfaces

text-content-on-accent-dusty-blue

--bg-accent-gold—

Gold fill — premium / loyalty

bg-bg-accent-gold

--bg-accent-gold-soft—

Soft gold surface

bg-bg-accent-gold-soft

--content-on-accent-gold—

Ink text on gold-soft surfaces

text-content-on-accent-gold

Sentiment palette

Data-visualization colors for chart slices and sentiment bars. Distinct from status tokens — these convey emotional read in data, not UI state.

--bg-sentiment-negative-deep—

Strong complaints, churn risk

bg-bg-sentiment-negative-deep

--bg-sentiment-negative—

Frustration, friction

bg-bg-sentiment-negative

--bg-sentiment-warning—

Defection, intent to switch

bg-bg-sentiment-warning

--bg-sentiment-neutral—

Comparisons, structural gaps

bg-bg-sentiment-neutral

--bg-sentiment-positive—

Praise, recommendations

bg-bg-sentiment-positive

--bg-sentiment-mute—

Background / inactive series

bg-bg-sentiment-mute

Status backgrounds

Subtle tinted surfaces for info, success, warning, error.

--bg-info—

Informational surfaces

bg-bg-info

--bg-success—

Success states — derived from tertiary cyan

bg-bg-success

--bg-attention—

Warning states

bg-bg-attention

--bg-error—

Error states

bg-bg-error

Status content

Pair with the matching status background.

--content-info—

Info text

text-content-info

--content-success—

Success text

text-content-success

--content-attention—

Warning text

text-content-attention

--content-error—

Error text

text-content-error

Borders

Use ghost borders sparingly — prefer tonal contrast.

--border-subtle—

Faintest divider

border-border-subtle

--border-muted—

Soft separation

border-border-muted

--border-default—

Standard borders

border-border-default

--border-emphasis—

Stronger borders

border-border-emphasis

Text

Hierarchy from muted to emphasis. Body text is content-default.

--content-muted—

Very light text

text-content-muted

--content-subtle—

Secondary text

text-content-subtle

--content-default—

Body text

text-content-default

--content-emphasis—

Headings

text-content-emphasis

--content-inverted—

Text on inverted surfaces

text-content-inverted