Colors

Stable

A two-layer colour system — raw primitives and purpose-driven semantic tokens.

Two layers

The colour system has two layers. Primitives are the raw palette — never use them directly in components. Semantic tokens give each colour a purpose and allow the entire theme to shift with a single change.

PrimitivesRaw values

The raw colour palette — 7 scales with 10 steps each. Use as the source of truth in Figma variables.

Red · Orange · Yellow · Green · Green · Blue · Grey

SemanticAlways use in components

Purpose-driven aliases of primitives. Use these in every component — never a raw primitive value.

background/brand/primary→ Green/80

text/semantic/error/subtle→ Red/90

border/semantic/info/primary→ Blue/80

Semantic tokens

59 tokens across 4 categories. Hover any row to copy the token name or hex value.

Neutral

14 tokens

Token name

Primitive

Value

background/neutral/primary

Page surfaces, cards, modals

White

#ffffff

background/neutral/secondary

Subtle row alternation, tinted page bg

Greyscale/10

#f5f5f5

background/neutral/tertiary

Hover states on neutral surfaces

Greyscale/20

#e1e1e1

background/neutral/disabled

Disabled component backgrounds

Greyscale/60

#8f8f8f

text/neutral/primary

Body text, headings

Black

#000000

text/neutral/secondary

Secondary labels, captions

Greyscale/100

#3b3b3d

text/neutral/tertiary

Hints, placeholders

Greyscale/80

#656566

text/neutral/disabled

Disabled text

Greyscale/10

#f5f5f5

border/neutral/primary

Default borders for inputs and cards

Greyscale/20

#e1e1e1

border/neutral/inverse

Stronger emphasis borders

Greyscale/50

#a3a3a3

icon/neutral/primary

Primary icons

Black

#000000

icon/neutral/secondary

Secondary icons

Greyscale/100

#3b3b3d

icon/neutral/tertiary

Subtle / tertiary icons

Greyscale/90

#4f5052

icon/neutral/disabled

Disabled icons

Greyscale/10

#f5f5f5

Brand

9 tokens

Token name

Primitive

Value

background/brand/primary

Primary CTA buttons

Green/80

#318272

background/brand/secondary

CTA hover state

Green/70

#429f8d

background/brand/tertiary

Tinted brand surfaces, highlights

Green/50

#6cd9c4

text/brand/primary

Brand text on light backgrounds

Green/100

#15483e

text/brand/secondary

Brand text on dark backgrounds

Green/10

#f3fffc

border/brand/primary

Focused inputs, brand emphasis

Green/80

#318272

border/brand/inverse

Brand border on dark backgrounds

Green/20

#d0fff6

icon/brand/primary

Brand icons on light backgrounds

Green/100

#15483e

icon/brand/secondary

Brand icons on dark backgrounds

Green/10

#f3fffc

Success

8 tokens

Token name

Primitive

Value

background/semantic/success/subtle

Success alert background

Green/10

#f3fffc

background/semantic/success/bold

Success badge background

Green/60

#56bca8

text/semantic/success/subtle

Success text on subtle background

Green/90

#226558

text/semantic/success/bold

Success text on bold background

Green/10

#f3fffc

border/semantic/success/primary

Success state borders

Green/80

#318272

border/semantic/success/inverse

Success border on dark background

Green/20

#d0fff6

icon/semantic/success/subtle

Success icons on subtle background

Green/90

#226558

icon/semantic/success/bold

Success icons on bold background

Green/10

#f3fffc

Warning

8 tokens

Token name

Primitive

Value

background/semantic/warning/subtle

Warning alert background

Orange/10

#fff6ee

background/semantic/warning/bold

Warning badge background

Orange/60

#dd8a46

text/semantic/warning/subtle

Warning text on subtle background

Orange/80

#995824

text/semantic/warning/bold

Warning text on bold background

Orange/10

#fff6ee

border/semantic/warning/primary

Warning state borders

Orange/80

#995824

border/semantic/warning/inverse

Warning border on dark background

Orange/20

#ffe2ca

icon/semantic/warning/subtle

Warning icons on subtle background

Orange/80

#995824

icon/semantic/warning/bold

Warning icons on bold background

Orange/10

#fff6ee

Error

8 tokens

Token name

Primitive

Value

background/semantic/error/subtle

Error alert background

Red/10

#ffeae7

background/semantic/error/bold

Destructive buttons

Red/80

#bc1700

text/semantic/error/subtle

Error text on subtle background

Red/90

#931200

text/semantic/error/bold

Error text on bold background

Red/10

#ffeae7

border/semantic/error/primary

Error state borders

Red/80

#bc1700

border/semantic/error/inverse

Error border on dark background

Red/20

#ffc5bd

icon/semantic/error/subtle

Error icons on subtle background

Red/90

#931200

icon/semantic/error/bold

Error icons on bold background

Red/10

#ffeae7

Info

8 tokens

Token name

Primitive

Value

background/semantic/info/subtle

Info alert background

Blue/10

#ecf7ff

background/semantic/info/bold

Info badge background

Blue/70

#0070c6

text/semantic/info/subtle

Info text on subtle background

Blue/90

#004275

text/semantic/info/bold

Info text on bold background

Blue/10

#ecf7ff

border/semantic/info/primary

Info state borders

Blue/80

#00599d

border/semantic/info/inverse

Info border on dark background

Blue/20

#b7e0ff

icon/semantic/info/subtle

Info icons on subtle background

Blue/90

#004275

icon/semantic/info/bold

Info icons on bold background

Blue/10

#ecf7ff

Semantic states in practice

Each semantic state uses a coordinated set of background, text, and border tokens. Always pair the subtle background with subtle text and primary border.

✓

Payment confirmed

Your transaction has been processed successfully.

Success tokens used

bgbackground/semantic/success/subtle

texttext/semantic/success/subtle

borderborder/semantic/success/primary

⚠

Subscription expiring

Your plan expires in 3 days. Review your options.

Warning tokens used

bgbackground/semantic/warning/subtle

texttext/semantic/warning/subtle

borderborder/semantic/warning/primary

Action failed

Unable to save changes. Check your connection and try again.

Error tokens used

bgbackground/semantic/error/subtle

texttext/semantic/error/subtle

borderborder/semantic/error/primary

ℹ

Maintenance scheduled

System will be unavailable Sunday, 2–4 AM UTC.

Info tokens used

bgbackground/semantic/info/subtle

texttext/semantic/info/subtle

borderborder/semantic/info/primary

Primitive palettes

7 raw colour scales. These are the source of truth for all semantic tokens. Hover any swatch to see the step and hex — click to copy.Never use primitives directly in components.

GreenBrand

GreyscaleNeutral

RedError

OrangeWarning

YellowAttention

BlueInfo

Black & WhiteBase

Scale convention: Step 10 is the lightest tint, 100 is the darkest shade. Each step is perceptually spaced for predictable pairing — e.g. Green/10 as a background always pairs with Green/90 as text for accessible contrast.

←

Contribution Workflow

Typography

→