Foundations

Colour

Three brand colours extended into a full semantic token set, defined for light and dark. Indigo carries the brand, slate supports quietly, and green is a single spark reserved for the most important action on a view.

Indigo

#46449C

Slate

#8CA8B5

Signal Green

#6ABD45

Semantic tokens

Every token is defined for both themes. You are viewing the light values, so switch the theme to see the others. Click a row to copy the value.

Surfaces

The planes content sits on, from the page up to overlays.

--surface-page

The app background. Everything else sits above it.

#F6F7FACopy

--surface-raised

Cards, panels and raised content on a hairline border and a soft shadow.

#FFFFFFCopy

--surface-chrome

The sidebar and top bar. Recedes, separated by a border rather than a fill.

#FFFFFFCopy

--surface-well

Inset wells, code specimens and table zebra. Sits below the page.

#EEF0F5Copy

--surface-overlay

Modals, menus and popovers. Carries the strongest shadow.

#FFFFFFCopy

--surface-scrim

The dimming layer behind a modal.

rgba(21,21,31,.40)Copy

Borders

Hairlines in cool neutral greys, from quiet to pressured.

--border-subtle

Row dividers, card edges and internal hairlines.

#E2E5ECCopy

--border-default

Input borders and stronger dividers.

#CFD4DFCopy

--border-strong

Emphasis and hovered inputs.

#AEB4C2Copy

Text

Five weights of text plus an inverse for dark fills.

--text-strong

Headings, body and data.

#1E1E2ACopy

--text-body

Default reading text.

#424754Copy

--text-muted

Labels, meta, captions and helper text.

#7B8394Copy

--text-placeholder

Empty input text.

#AEB4C2Copy

--text-disabled

Inactive labels.

#C0C5D0Copy

--text-inverse

Text on indigo bands and dark fills.

#FFFFFFCopy

Brand

Indigo carries the brand. It brightens on dark so it still reads as brand.

--brand

Primary buttons, links, active states and headings on bands.

#46449CCopy

--brand-hover

Hover for brand elements.

#3D3B87Copy

--brand-pressed

Pressed for brand elements.

#333070Copy

--brand-tint

Selected row and subtle hover backgrounds.

#ECECF7Copy

--brand-contrast

Text and icons on a brand fill.

#FFFFFFCopy

--brand-strong

The deep indigo band and footer.

#24234FCopy

Accent

The green spark. One per view, the single most important action, never a wash.

--accent

One key action per view. A spark, never a fill behind content.

#6ABD45Copy

--accent-hover

Hover for the accent action.

#5FB03BCopy

--accent-pressed

Pressed for the accent action.

#52A030Copy

--accent-tint

A rare tinted background for an accent mark.

#EDF7E8Copy

--accent-contrast

The near-black ink label on the accent green. The only AA-safe label on it.

#123209Copy

Actions and state

The tokens buttons, links and focus derive from. Indigo primary, outline secondary.

--action-primary-bg

Primary button fill. Lifts one step on dark so white text stays legible.

#46449CCopy

--action-primary-fg

Primary button label.

#FFFFFFCopy

--action-accent-bg

Accent (spark) button fill.

#6ABD45Copy

--action-accent-fg

Accent button label. Always dark ink.

#123209Copy

--action-secondary-fg

Secondary and ghost button label.

#333070Copy

--link

Standalone links in prose.

#3D3B87Copy

--focus-ring

The focus ring, 2px at 2px offset.

#46449CCopy

--focus-glow

The soft inner glow on a focused input.

rgba(70,68,156,.16)Copy

Status

Four roles. Success is a bluer emerald, kept distinct from the accent green. Info renders neutral, never a generic blue.

--success-solid

Success icon or fill. The "this happened" emerald.

#1B9E68Copy

--success-bg

Success background tint.

#E3F4ECCopy

--warning-solid

Warning icon or fill.

#E28A0ECopy

--warning-bg

Warning background tint.

#FBEED6Copy

--danger-solid

Danger and destructive icon or fill.

#E14B4BCopy

--danger-bg

Danger background tint.

#FBE7E7Copy

--info-solid

Informational icon or fill. Neutral, never a generic blue.

#3E7E93Copy

--info-bg

Info background tint.

#E6EFF2Copy

Charts and data

A closed categorical palette, assigned to series by index so a series never reads as meaning.

1. Indigo

#46449C

2. Teal

#2E97A7

3. Amber

#D08A2C

4. Violet

#8E5CD0

5. Rose

#D05B84

6. Slate-blue

#5E7CA8

7. Emerald

#2FA06E

8. Gold

#B79427

9. Terracotta

#C05640

10. Cool grey

#8A93A6

Contrast checker

Check any pair against WCAG AA and AAA. The accent button, for instance, uses dark ink because white on the green fails.

Text

#333070

Background

#ffffff

1.00:1

AAFail

AAAFail

Governing rules

Indigo is the primary action. The primary button is an indigo fill with white text, not ink.
Green is a spark, never a primary and never a wash. At most one green element per view.
Save is not success. Accent green fills interactive controls; success emerald appears only in status.
Avoid bluish-purple gradients and rainbow palettes. Only very subtle single-hue surface washes.
Components read semantic tokens only, never a primitive and never a raw hex.
The green button uses dark ink. White text on the accent green fails AA.
Focus is always visible. A 2px ring at 2px offset, plus a soft glow on inputs.