Primitives

Colours

A 12-step scale for each semantic role. Token names follow Untitled UI conventions - swap the CSS custom property values to establish DEW's colour identity.

Gray

Neutral scale used for text, borders, backgrounds, and surface layers.

#FCFCFC

#F8F8F7

100

#F2F2F1

200

#E5E4E2

300

#D2D0CE

400

#B5B2AF

500

#8F8B87

600

#706B68

700

#585451

800

#423E3B

900

#2E2925

950

#1A1715

Brand

Primary brand colour - DEW Marine Teal.

#F6FBFC

#EDF7F9

100

#DCECEF

200

#C3D9DF

300

#9CA9B3

400

#4D788A

500

#2A667C

600

#185E74

700

#0D576E

800

#0A485A

900

#073542

950

#041E27

Secondary

Secondary brand colour - DEW Seagrass Green. Used sparingly, as an accent to Brand - pills, alerts, and labels. Coded as "accent" (--color-accent-*) to avoid colliding with the neutral bg-secondary/text-secondary hierarchy tokens below.

#F7FBFB

#EEF6F6

100

#DEEAEA

200

#C9DBDB

300

#B6C7C7

400

#80A9A9

500

#649898

600

#568F8F

700

#4A8C8C

800

#3B7272

900

#2A5555

950

#162D2D

Error

Destructive actions, error states, and critical feedback.

#FFFBFA

#FEF3F2

100

#FEE4E2

200

#FECDCA

300

#FDA29B

400

#F97066

500

#F04438

600

#D92D20

700

#B42318

800

#912018

900

#7A271A

950

#55160C

Warning

Cautionary states and advisory feedback.

#FFFCF5

#FFFAEB

100

#FEF0C7

200

#FEDF89

300

#FEC84B

400

#FDB022

500

#F79009

600

#DC6803

700

#B54708

800

#93370D

900

#7A2E0E

950

#4E1D09

Success

Positive outcomes, confirmations, and progress.

#F6FEF9

#ECFDF3

100

#DCFAE6

200

#ABEFC6

300

#75E0A7

400

#47CD89

500

#17B26A

600

#079455

700

#067647

800

#085D3A

900

#074D31

950

#053321

Semantic tokens

Aliases that map raw palette steps to UI roles. Use these in components - never raw palette values.

Token	References	Usage
`--bg-primary`	`gray-25`	Main app background
`--bg-secondary`	`gray-50`	Secondary surfaces, sidebars
`--bg-tertiary`	`gray-100`	Hover states, subtle fills
`--text-primary`	`gray-900`	Headings, primary text
`--text-secondary`	`gray-600`	Body copy, descriptions
`--text-tertiary`	`gray-500`	Captions, hints, placeholders
`--border-default`	`gray-200`	Default borders and dividers
`--border-strong`	`gray-300`	Focused or elevated borders