Design system

The Harbour palette

A deliberate, restrained colour system. One confident teal accent does the talking, grounded on a near-neutral ink slate, with green, amber and red reserved strictly for meaning. Click any swatch to copy its hex.

Primary accent

Harbour Teal

Calm, credible and unmistakably not purple. It carries primary buttons, links, focus rings and key highlights.

brand-600 #0f766e

In context

How the accent reads against the neutrals.

Live Success Warning Error

Harbour Teal

brand-*

Brand / accent

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

#f0fbf8

#d7f4ec

#b0e8db

#7dd6c4

#45bba6

#1d9e8a

#0f766e

#0c5d57

#0e4a46

#103d3a

#04211f

Ink Slate

gray-*

Neutral / surfaces

Text, borders, surfaces and backgrounds. A near-neutral slate with a faint cool cast.

#f7f8f8

#eef0f1

#e1e4e6

#c8cdd0

#99a0a5

#6d747a

#515860

#3d444b

#262c32

#171b20

#0c0e12

Grass

green-*

Success

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

#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