Design system

Colour palette

Brand, accent and gray remaps with the theme picker. Green, amber and red stay fixed for meaning. Click any swatch to copy its default-theme hex.

Primary accent

Harbour Teal

Carries primary buttons, links, focus rings and key highlights. Switch themes to see this surface update live.

brand-600 #0f766e

In context

How the accent reads against the neutrals.

Live Success Warning Error

Harbour Teal

brand-*

Brand / primary

The primary accent for the selected colour theme. Use brand-600 for solid fills and links, brand-500 in dark mode.

#f0fbf8

#d7f4ec

#b0e8db

#7dd6c4

#45bba6

#1d9e8a

#0f766e

#0c5d57

#0e4a46

#103d3a

#04211f

Accent

accent-*

Secondary action

Secondary actions, info states, and complementary highlights. Remaps with each colour theme.

#eff6ff

#dbeafe

#bfdbfe

#93c5fd

#60a5fa

#3b82f6

#2563eb

#1d4ed8

#1e40af

#1e3a8a

#172554

Neutral

gray-*

Surfaces / text

Text, borders, surfaces and backgrounds. Tint shifts with the selected theme so chrome stays coherent.

#f7f8f8

#eef0f1

#e1e4e6

#c8cdd0

#99a0a5

#6d747a

#515860

#3d444b

#262c32

#171b20

#0c0e12

Grass

green-*

Success

Positive states, confirmations and upward trends. Kept distinct from brand colour.

#f0fdf4

#dcfce7

#bbf7d0

#86efac

#4ade80

#22c55e

#16a34a

#15803d

#166534

#14532d

#052e16

Amber

amber-*

Warning

Cautions, pending states and attention without alarm.

#fffbeb

#fef3c7

#fde68a

#fcd34d

#fbbf24

#f59e0b

#d97706

#b45309

#92400e

#78350f

#451a03

Red

red-*

Danger

Destructive actions, errors and validation failures. A clean red — no pink drift.

#fef2f2

#fee2e2

#fecaca

#fca5a5

#f87171

#ef4444

#dc2626

#b91c1c

#991b1b

#7f1d1d

#450a0a

How to use it

A few rules keep the system calm: lean on neutrals, let the brand accent punctuate, and reserve the status colours for meaning.

Accent sparingly

Use brand-600 for the single most important action on a screen. Too much accent dilutes it.

Neutrals carry structure

Surfaces, text and borders all come from the gray ramp — 50–200 for surfaces, 500–950 for text.

Status means status

Green, amber and red signal outcomes only — never decoration — so users learn to trust them.

Token	Light	Dark	Used for
Page background	`gray-50`	`gray-950`	App & marketing canvas
Surface / card	`white`	`gray-900`	Cards, panels, menus
Border	`gray-200`	`gray-800`	Dividers & outlines
Body text	`gray-600`	`gray-300`	Paragraphs & labels
Heading text	`gray-900`	`white`	Titles & emphasis
Accent	`brand-600`	`brand-400`	Primary actions & links

See the palette in action

Every component in the library is built on these exact tokens.

Browse components