Foundations / Colour

Colour

A deliberately tight palette: one violet, ink, and warm neutrals. Components reference semantic aliases — never raw hex — so re-colouring the whole system is a one-line change in tokens.css.

Brand

Violet is the only accent. Ink is the dark ground and default text colour.

Violet

--c-violet#6642C1

The accent. Buttons, links, active states, focus rings.

Violet 600

--c-violet-600#5836AB

Darker violet for hover / pressed.

Ink

--c-ink#1A1420

Near-black. Dark sections and default text.

Neutrals

White

--c-white#FFFFFF

Page background.

Cream

--c-cream#F4F1EC

Surfaces, cards, raised panels.

Ink 70

--c-ink-70#4A4453

Muted / secondary text.

Mist

--c-mist#A9D6E6

Soft section tint (sampled from a hero).

Semantic aliases

These are the tokens you use in components. Each maps a role to a raw colour.

TokenMaps toUsed for

--bg-page

White Default page background

--bg-surface

Cream Cards, panels, raised surfaces

--bg-dark

Ink Dark sections & panels

--fg-default

Ink Primary text

--fg-muted

Ink 70 Secondary text

--fg-accent

Violet Accent text / icons

--fg-on-dark

White Text on dark backgrounds

Borders & overlays

Semi-transparent tokens for hairlines and glass panels. The glass tokens are white overlays meant for use on imagery / dark grounds.

--border-default rgba(26,20,32,.14) Default hairline borders

--border-strong rgba(26,20,32,.28) Emphasised borders

--glass-bg rgba(255,255,255,.14) Glass panel fill (on imagery)

--glass-border rgba(255,255,255,.35) Glass panel border

Transparencies

Two transparency scales carry most of the depth. White-on-dark opacities set text hierarchy over ink and imagery; accent tints (via color-mix) give soft violet backgrounds without a second colour.

White on dark

100% Headings on dark

90% Feature text on dark

82% Body on dark

72% Secondary on dark

60% Muted / legal on dark

35% Glass borders

14% Glass fills

8% Subtle chips on dark

Accent tints

color-mix(… 6%) Subtle accent background

color-mix(… 12%) Tinted panel

color-mix(… 16%) Badge / pill background

These transparency values are used as literals across components, not yet as named tokens — a good candidate to tokenise (e.g. --fg-on-dark-70, --tint-accent-16) when the system firms up.

In context

How the roles combine. Text is single-colour; the accent is violet only; fills are flat — no gradients.

bg-page

Heading on white

Muted body text sits below in Ink 70.

Accent

bg-surface

Heading on cream

Cream cards separate content from the page.

Accent

bg-dark

Heading on ink

On-dark text uses white at reduced opacity.

Accent

Rules

Use semantic aliases in components (--fg-accent), not raw hex. Keep the accent violet only. Fills stay flat.

Don't

Introduce new colours, mix violet + ink in one heading, or use gradients. If a design needs a colour that isn’t here, add a token first.