Foundations · ColorsSemantic · 8 palettes

Color is how Dew communicates.

Semantic tokens that keep meaning consistent across themes.

Principles Semantic colors Color palettes Chart colors Overlays Text tokens Icon tokens

PrinciplesHow to use color

Semantic first. Palette never.

Color communicates meaning, hierarchy, and interaction state. Tokens define the role of a color rather than its visual appearance — so the system supports theming, dark mode, and future palette changes without touching a single component.

Color

Raw value

#12344D

Primitive color tokens

Elephant 900 (E900)

Semantic color tokens

color.text.primary

Figma variable

color/text/primary

Token function

token('color.text.primary');

CSS variable

var(--color-text-primary)

Do this

Use semantic naming

Apply colors based on their purpose, not their appearance. Use tokens like color.text.brand or color.icon.semantic.error so theming and dark mode just work.

Color

Raw value

#12344D

Tokens skipped

Primitive and semantic layers are bypassed.

Figma variable

#12344D

Token function

color: '#12344D';

CSS variable

color: #12344D;

Don't

Avoid hard-coded values

Never paste a hex code or reference a palette token directly in a component. Dark mode and future themes rely on the semantic layer — bypassing it silently breaks them.

Semantic colorsRole → palette

Five roles, mapped to the palette.

Semantic tokens map roles like success, warning, and error to palette values — so components stay intact when themes or palettes change.

Role

Palette

Purpose

Typical usage

Success

Jungle

Positive feedback

Success messages, valid input states

Warning

Casablanca

Attention required

Warning text, alerts, caution states

Error

Persimmon

Failure / destructive

Error messages, validation failures

Info

Azure

Informational

Helper text, banner, neutral feedback

Highlight

Iris

Emphasis

Selected, special state, highlighted text

Color palettes8 families · 87 shades

The raw palette.

Palette tokens are the underlying values. They power the semantic layer — but they never ship inside components directly.

Smoke

(S) · 14 shades

Neutral

(N) · 13 shades

Elephant

(E) · 10 shades

Azure

(A) · 10 shades

Jungle

(J) · 10 shades

Casablanca

Persimmon

(P) · 10 shades

Iris

(I) · 10 shades

Chart colors20 categorical · static in light & dark

Categorical data colors.

Twenty perceptually distinct hues for data visualisation. Identical in light and dark themes so charts stay legible across surfaces. Use them in order — the earliest categories are the easiest to tell apart.

Cat 01

#5f9cec

Cat 02

#8cc0e3

Cat 03

#eb8900

Cat 04

#ffcf57

Cat 05

#778e4a

Cat 06

#72ba7a

Cat 07

#907d52

Cat 08

#e0c8af

Cat 09

#558c93

Cat 10

#b4d8d8

Cat 11

#d54e16

Cat 12

#ffa5b7

Cat 13

#175caa

Cat 14

#2082a6

Cat 15

#a155b9

Cat 16

#524094

Cat 17

#c39a6d

Cat 18

#fdb416

Cat 19

#b487e2

Cat 20

#f765a4

Overlays16 tokens · fixed alpha

Overlays adapt to their background.

Fixed-alpha colors that blend with whatever sits underneath. Use them for component backdrops — hover, selected row, tag fill, focus scrim — where the overlay should shift visually with the surface below.

Caution

Low contrast against the background. Always pair overlays with an icon, border, or text so the region stays perceivable.
Standalone use needs a solid fill in the container behind the overlay layer.
Revalidate contrast when dark-theme derivatives are updated.

Chromatic tints

20% opacity

S200·20%

#abb8c4

A200·20%

#a5d2ff

C200·20%

#f8a34b

P200·20%

#f89ea0

J200·20%

#4fc9af

I200·20%

#bfa9fd

Chromatic shades

20% opacity

S700·20%

#3b4854

A700·20%

#003fd2

C700·20%

#723600

P700·20%

#891c1e

J700·20%

#00513f

I700·20%

#5d0cbc

Neutral & dark overlays

Element backdrops

E900·50%

#12334c

E900·70%

#12334c

A200·10%

#a5d2ff

A700·10%

#003fd2

Text tokens11 tokens

Text tokens.

Semantic text colors communicate status, feedback, and meaning across the interface. Use these tokens in every UI element instead of referencing palette colors or raw hex.

Token

Usage

Light

Dark

color.text.brand

Use for all links, Hyperlink, Tag pill text.

Aa#003fd2

Aa#6aa8ff

color.text.primary

Main text, body copy, headings, buttons.

Aa#12334c

Aa#eaeef2

color.text.secondary

Supporting text, subheads, metadata.

Aa#485a68

Aa#8e9dac

color.text.disabled

Disabled text states.

Aa#6f8396

Aa#586d7e

color.text.placeholder

Placeholder text inside inputs.

Aa#8e9dac

Aa#6f8396

color.text.inverse

Text on inverse (dark / colored) backgrounds.

Aa#ffffff

Aa#000000

color.text.semantic.success

Text on green backgrounds for success.

Aa#00795c

Aa#daf3ee

color.text.semantic.warning

Text on orange backgrounds for warnings.

Aa#ac5000

Aa#feecd5

color.text.semantic.error

Text on red backgrounds for errors.

Aa#cd2629

Aa#ffe9ee

color.text.semantic.info

Text used for informational messages.

Aa#003fd2

Aa#def0ff

color.text.semantic.highlight

Text used to highlight emphasis or special state.

Aa#8537fa

Aa#9561fb

Icon tokens10 tokens

Icon tokens.

Semantic icon colors pair with text to reinforce feedback and hierarchy. Match the icon color to the text color it accompanies.

Token

Usage

Light

Dark

color.icon.primary

Default icon color across UI.

✳#2b3640

✳#eaeef2

color.icon.secondary

Secondary or supporting icons.

✳#485a68

✳#6f8396

color.icon.selected

Selected / active icon state.

✳#003fd2

✳#6aa8ff

color.icon.disabled

Disabled icon state.

✳#6f8396

✳#586d7e

color.icon.inverse

Icons on inverse (dark / colored) backgrounds.

✳#ffffff

✳#000000

color.icon.semantic.success

Icons indicating success.

✳#00795c

✳#009272

color.icon.semantic.warning

Icons indicating caution.

✳#ac5000

✳#cf6121

color.icon.semantic.error

Icons indicating error or destructive action.

✳#cd2629

✳#f33735

color.icon.semantic.info

Icons used for informational messages.

✳#276cf0

✳#6aa8ff

color.icon.semantic.highlight

Icons used to highlight emphasis.

✳#8537fa

✳#9561fb