GitHub

Color

Two tiers: fixed primitive ramps (the raw palette) and intent-based semantic roles that components reference. Theme by overriding the semantic layer — primitives never move.

Brand color

The active theme's brand ramp — these semantic tokens update live when you switch themes.

Brand (current theme)
subtle
border
fill
hover

Primitive ramps

Raw values. Never used directly in components — they exist so semantic roles can point at them.

Step usage

Each ramp follows the Radix scale convention. Quick reference:

StepsPurpose
1–2App and component backgrounds
3–5Interactive component backgrounds (hover, pressed)
6–8Borders and separators
9Solid fills — buttons, badges, overlays. Highest chroma in the scale.
10Hover state for a step-9 fill
11Low-contrast colored text on surfaces (outline buttons, links, labels)
12High-contrast text

Foreground text on step-9 fills: use white for most scales. Use a dark foreground (step 12 or --color-gray-12) only for the bright scales: Lime, Yellow, Amber, Sky, Mint — their step-9 is light enough that white text fails contrast.

Gray
1
2
3
4
5
6
7
8
9
10
11
12
Gray — dark
1
2
3
4
5
6
7
8
9
10
11
12
Grass — primary
1
2
3
4
5
6
7
8
9
10
11
12
Grass — dark
1
2
3
4
5
6
7
8
9
10
11
12
Blue
1
2
3
4
5
6
7
8
9
10
11
12
Blue — dark
1
2
3
4
5
6
7
8
9
10
11
12
Teal
1
2
3
4
5
6
7
8
9
10
11
12
Orange — accent
1
2
3
4
5
6
7
8
9
10
11
12
Copper — AI contexts
1
2
3
4
5
6
7
8
9
10
11
12
Lime — success
1
2
3
4
5
6
7
8
9
10
11
12
Lime — dark
1
2
3
4
5
6
7
8
9
10
11
12
Green
1
2
3
4
5
6
7
8
9
10
11
12
Red
1
2
3
4
5
6
7
8
9
10
11
12
Red — dark
1
2
3
4
5
6
7
8
9
10
11
12
Yellow
1
2
3
4
5
6
7
8
9
10
11
12
Yellow — dark
1
2
3
4
5
6
7
8
9
10
11
12
Gray alpha
1
2
3
4
5
6
7
8
9
10
11
12
Black alpha
1
2
3
4
5
6
7
8
9
10
11
12
White alpha
1
2
3
4
5
6
7
8
9
10
11
12

Semantic roles

What components actually consume. Re-skinning a project = reassigning these.

--color-primary Primary actions, links, focus
--color-primary-hover Primary hover
--color-secondary Secondary emphasis
--color-accent Accent / highlight
--color-background App background
--color-surface Cards, panels
--color-surface-sunken Recessed surfaces
--color-border Default borders
--color-text-primary Primary text
--color-text-secondary Secondary text
--color-text-muted Muted / meta text
--color-success Success
--color-warning Warning
--color-danger Danger / error
--color-info Informational

Theming

A spoke project overrides semantic roles under a scope; the brand changes everywhere at once, components untouched:

[data-theme="beacon"] {
  --color-primary: #1f7a6d;
  --color-primary-hover: #155a50;
  --color-surface-sunken: #f0f6f4;
}