Colors

The color system uses 13 tones (50–1200) per hue. Primary semantic families are used for UI meaning; accent families are reserved for charts/diagrams. All combinations target WCAG AA contrast.

Principles

Semantic Purpose

Grey: Interface neutrals, text hierarchy
Blue: Information, links, system feedback
Green: Success states, positive actions
Red: Errors and destructive actions
Yellow: Warnings and cautionary notices
Accent Hues: Lavender, Violet, Fuchsia, Magenta, Amber, Bronze, Olive, Teal — for charts/diagrams only

Accessibility Standards

WCAG AA: 4.5:1 contrast for normal text; never rely on color alone
Tone Scale: Consistent 13-step scale (50–1200) per hue for predictable contrast
Color Blind Friendly: Patterns/labels recommended for charts

Defaults & Backgrounds

Defaults: White = #ffffff; Black = #040404
Page backgrounds: Use white (#ffffff) or tone 50 of a color family (default: grey-50)
Card backgrounds: None, white, or tone 50. Use tone 50 on white backgrounds; use white on tone 50 backgrounds; no-background cards may be used on either.
Emphasis: Apply a background (white or tone 50) when mild emphasis is desired; use no background when no special focus is needed.

Grey Scale (50–1200)

Grey is our foundation for backgrounds, borders, and text hierarchy.

#f4f4f4

100

#efefef

200

#eaeaea

300

#8d8d8d

400

#878787

500

#828282

600

#767676

700

#707070

800

#6c6c6c

900

#666666

1000

#262626

1100

#202020

1200

#1a1a1a

Semantic Color Families

blue

Information, links, and system feedback.

#ecf7ff

100

#d7f4ff

200

#c4eaff

300

#4194ce

400

#378fca

500

#2d89c7

600

#037cbe

700

#0375b5

800

#0271af

900

#026ba6

1000

#002748

1100

#001f3a

1200

#001025

green

Success states and positive actions.

#ecf9f0

100

#dbf5e1

200

#c8eed3

300

#4d9d69

400

#459964

500

#3a935d

600

#23874e

700

#1f7f47

800

#1c7a43

900

#1d743f

1000

#002d0b

1100

#002408

1200

#001402

red

Errors and destructive actions.

#fff3f2

100

#ffebe7

200

#ffded9

300

#d96d6b

400

#d46563

500

#d05e5c

600

#c84d4f

700

#be4749

800

#b84245

900

#b13e42

1000

#52030d

1100

#44040b

1200

#300005

yellow

Caution, pending states, and highlights.

#f7f6e9

100

#f4efd6

200

#ede8c0

300

#9a8e3d

400

#968933

500

#918329

600

#867704

700

#7f7002

800

#7a6c00

900

#746600

1000

#2e2500

1100

#261e00

1200

#191300

Secondary Accent Families (Charts & Diagrams)

lavender

Accent for charts/diagrams (not for core UI semantics).

#f1f4ff

100

#e8efff

200

#dde4ff

300

#7a87dc

400

#7481d9

500

#6f7ad6

600

#636dcf

700

#5c67c5

800

#5962be

900

#555db6

1000

#1e1f55

1100

#161847

1200

#0c0c33

violet

Accent for charts/diagrams (not for core UI semantics).

#fbf2ff

100

#fbe9ff

200

#fadeff

300

#ae77cf

400

#aa70cb

500

#a46ac7

600

#9a5bbf

700

#9255b6

800

#8d51af

900

#874ca8

1000

#37114b

1100

#2f1040

1200

#1e052b

fuchsia

Accent for charts/diagrams (not for core UI semantics).

#fff0fb

100

#ffe9fe

200

#ffdafa

300

#cd6cac

400

#c864a7

500

#c45da2

600

#bb4d97

700

#b2478f

800

#ac438a

900

#a44083

1000

#4a0738

1100

#3d072e

1200

#2b021f

magenta

Accent for charts/diagrams (not for core UI semantics).

#fff1f5

100

#ffe9f3

200

#ffdded

300

#d9698b

400

#d56085

500

#d1597f

600

#c94773

700

#c0416d

800

#b83d67

900

#b13962

1000

#530024

1100

#44011d

1200

#300012

amber

Accent for charts/diagrams (not for core UI semantics).

#fff2ec

100

#ffebdd

200

#ffe0cb

300

#cc7751

400

#c77048

500

#c36a42

600

#ba5b2f

700

#b2542a

800

#aa5027

900

#a44c25

1000

#4b1100

1100

#3e0f00

1200

#2a0500

bronze

Accent for charts/diagrams (not for core UI semantics).

#fdf3e9

100

#ffecd6

200

#fce0c0

300

#b9823f

400

#b47b34

500

#af762a

600

#a56905

700

#9d6201

800

#975d00

900

#915903

1000

#3f1d00

1100

#331700

1200

#220d00

olive

Accent for charts/diagrams (not for core UI semantics).

#f2f8ea

100

#e6f4d7

200

#d8ebc0

300

#789741

400

#74943a

500

#6d8d30

600

#608113

700

#5a7a10

800

#56760f

900

#506f0d

1000

#192b00

1100

#132200

1200

#071200

teal

Accent for charts/diagrams (not for core UI semantics).

#ecf8f8

100

#dbf4f4

200

#c8edee

300

#449a9c

400

#3b9698

500

#2f8f92

600

#048487

700

#067c7f

800

#00787a

900

#007274

1000

#002b2d

1100

#002223

1200

#001314

Usage Guidelines

Do

Use semantic families (blue/green/red/yellow) according to meaning
Reserve accent families for charts, diagrams, and visual data
Test contrast ratios before implementation
Prefer grey tones for neutral interface areas and text hierarchy

Don't

Use accent hues to represent core UI semantics
Rely solely on color to convey information
Create custom colors outside the system
Use low-contrast combinations that fail WCAG AA

Accent Backgrounds (rare)

Accents are primarily for diagrams/charts, but may be used sparingly as page or section backgrounds for special contexts (presentations, landing pages, themed events/booths).
When an accent is used as a background, apply the same accessibility rules:
- Static text: use the background family's tone 1200
- Links: base tones by background (white=600, 50=700, 100=800, 200=900); hover/focus = tone 1000; active = #040404
- Clickable card borders: base 1px (white → tone 600, tone 50 → tone 700); hover/focus 2px tone 1000; active 2px #040404
Keep accent backgrounds exceptional and purposeful; default backgrounds remain white or grey-50.