Foundation
Color System
Seven complete palettes — sourced from your Figma brand and expanded to enterprise scale. Each palette runs from 50 (lightest) to 900 (darkest) with a 10-step scale. Click any swatch to copy its hex value.
Primary · Purple From Figma ✦
Your brand purple — #7a5af8 — forms the 500 base. Used for primary actions, interactive elements, focus rings, and brand moments.
Primary use: Buttons, links, focus indicators, selected states, brand elements.
Token: --purple-500 / --color-primary
Secondary · Green From Figma ✦
Your brand green — #4ade80 — sits at 400. Used for progress, positive states, success indicators, and to complement purple.
Primary use: Progress bars, positive states, completed tasks, live indicators, success moments.
Token: --green-400 / --color-accent
Neutral
Standard gray scale for text, borders, backgrounds, and disabled states in both dark and light contexts.
Primary use: Body text, subtle borders, disabled UI, background fills.
Token: --neutral-{n}
Semantic Palettes
Semantic Colors
Purpose-built palettes for system states. Each maps directly to a meaning — never use Error red for decoration.
Success · Green
Positive outcomes, completed actions, live status, form validation passing.
Warning · Amber
Caution states, approaching limits, soft errors that don't block the user.
Error · Red From Figma ✦
Destructive actions, form validation failures, system errors. From your original Figma red palette.
Info · Blue
Neutral informational messages, tips, and non-urgent notifications.
Surfaces & Borders
A layered dark surface system creating depth without relying on shadows alone. Lighter = higher elevation.
Surface
#161618
--surface
Surface 2
#1c1c1e
--surface2
Surface 3
#242428
--surface3
Border
rgba(255,255,255, .07)
--border
Border Strong
rgba(255,255,255, .12)
--border-strong
Brand Black Figma
#111111
--brand-black
Header Border Figma
#454545
--header-border
Semantic Tokens
Application-level tokens that map palette values to UI roles. Always prefer semantic tokens over raw palette values.
| Token |
Value |
Color |
Description |
Usage Guidelines
Rules for keeping the colour system intentional, consistent, and accessible.
✓ Do
Use --primary for a single dominant action per page
Map semantic tokens (success, warning, error) to their meaning only
Keep text contrast ≥ 4.5:1 for body copy (WCAG AA)
Use surface layers (bg → surface → surface2 → surface3) to create depth
Use green as an accent for progress and positive states, not as a primary action colour
✕ Don't
Don't use error red for decorative purposes
Don't put purple-50 text on a white background (low contrast)
Don't use raw hex values — always reference a CSS variable
Don't use more than 2 palette hues in a single component
Don't use warning amber for success states or vice versa
Contrast & WCAG
All colour pairings below meet or exceed WCAG 2.1 requirements for the Nest dark theme.
| Pairing |
Ratio |
WCAG Level |
Use For |
|
White on #0d0d0f
|
18.1:1 |
AAA |
Primary body text |
| 70% White on Surface |
9.8:1 |
AAA |
Secondary text, descriptions |
| Purple-300 on Surface |
7.4:1 |
AAA |
Links, active nav items |
| White on Purple-500 |
4.7:1 |
AA |
Button labels (primary) |
| Dark on Success-500 |
5.1:1 |
AA |
Success badge text |
| 25% White on Surface |
2.1:1 |
Fail |
Placeholder only — never real text |