Color

Two layers. Primitives are the raw ramps and never appear in a component. Semantics are the only names a component is allowed to reference — which is why swapping the theme needs no component changes at all.

Primitives

Primary · Amber

--primary-50

100

--primary-100

200

--primary-200

300

--primary-300

400

--primary-400

500

--primary-500

600

--primary-600

700

--primary-700

800

--primary-800

900

--primary-900

Secondary · Azure

--secondary-50

100

--secondary-100

200

--secondary-200

300

--secondary-300

400

--secondary-400

500

--secondary-500

600

--secondary-600

700

--secondary-700

800

--secondary-800

900

--secondary-900

Neutral · Warm

--neutral-0

--neutral-50

100

--neutral-100

200

--neutral-200

300

--neutral-300

400

--neutral-400

500

--neutral-500

600

--neutral-600

700

--neutral-700

800

--neutral-800

900

--neutral-900

950

--neutral-950

Primary alpha

--primary-a5

a10

--primary-a10

a20

--primary-a20

a40

--primary-a40

a60

--primary-a60

Semantics

Flip the theme in the header. Every swatch below repaints; not one component knows it happened.

Background

--bg-basePage

--bg-surfaceCards, sidebars, table shells

--bg-elevatedMenus, modals, toasts

--bg-insetWells — inputs, code blocks, table heads

--bg-hoverHover wash on any surface

--bg-selectedSelected rows and options

Text

--text-primaryBody and headings

--text-secondarySupporting copy, table cells

--text-tertiaryLabels, captions, placeholders

--text-brandBrand-coloured text and links

--text-on-brandText sitting on a brand fill

Border

--border-subtleDividers inside a row; control outlines

--border-defaultStructural separators, table rows

--border-strongOutline buttons, hovered fields

--border-focusFocused control

Data

--data-positiveGains, success

--data-negativeLosses, failure

--data-warningDegraded, timeout

--data-infoNeutral emphasis