Colors

Color Palette

Our color system is built for accessibility and visual hierarchy, drawing from the best practices of Helsinki DS (accessibility-first), Atlassian DS (enterprise scale), and Carbon (data-dense interfaces). Every color is tested for WCAG AA contrast.

Primary: Brand Blue

Brand scale

Name	Hex	CSS Variable
Brand 50	`#f0f4ff`	`--brand-50`
Brand 100	`#dbe4ff`	`--brand-100`
Brand 200	`#bac8ff`	`--brand-200`
Brand 300	`#91a7ff`	`--brand-300`
Brand 400	`#748ffc`	`--brand-400`
Brand 500	`#5c7cfa`	`--brand-500`
Brand 600	`#4c6ef5`	`--brand-600`
Brand 700	`#4263eb`	`--brand-700`
Brand 800	`#3b5bdb`	`--brand-800`
Brand 900	`#364fc7`	`--brand-900`

Neutrals

Gray scale

Swatch	Name	Hex
	Gray 50	`#f8f9fa`
	Gray 100	`#f1f3f5`
	Gray 200	`#e9ecef`
	Gray 300	`#dee2e6`
	Gray 400	`#ced4da`
	Gray 500	`#adb5bd`
	Gray 600	`#868e96`
	Gray 700	`#495057`
	Gray 800	`#343a40`
	Gray 900	`#212529`

Semantic Colors

Status & feedback

Swatch	Name	Hex
	Success	`#40c057`
	Warning	`#fab005`
	Error	`#fa5252`
	Info	`#339af0`

Color Roles

Role	Light mode	Dark mode	Inspired by
Page bg	`white` / `gray-50`	`gray-950`	Linear, Vercel
Text primary	`gray-900`	`gray-100`	Carbon, Polaris
Text secondary	`gray-600`	`gray-400`	Atlassian
Border	`gray-200`	`gray-700`	Stripe
Primary CTA	`brand-600`	`brand-500`	Helsinki DS
Hover	darken 10%	lighten 10%	Material 3

How the best systems handle color

Helsinki DS — Accessibility tokens

Helsinki maps every color to a semantic purpose rather than a raw palette. Colors are named by what they do, not what they are:

--color-success  → green
--color-warning  → amber
--color-error    → red

Atlassian — 900+ tokens, one system

Atlassian’s design system spans Jira, Confluence, Trello, and Bitbucket — each with distinct product identities. They use a layered token architecture:

Layer	Example	Purpose
Primitive	`blue-500`	Raw palette
Semantic	`color-background-brand`	Meaning-based
Component	`button-primary-bg`	Scoped to element

Carbon (IBM) — Built for data density

IBM’s Carbon system serves enterprise dashboards with thousands of data points:

Minimal accent color — blue used sparingly for data viz
Extensive gray scale — 10+ steps for precise layering
High contrast — all combinations meet WCAG AA

Usage Guidelines

Primary actions → brand-600 (default), brand-700 (hover)
Text → gray-900 (light), gray-100 (dark)
Borders → gray-200 (light), gray-700 (dark)
Semantic colors → reserved for status, alerts, badges
One primary per section — don’t compete for attention