System

Palette / Semantic color tokens and 11-step scales.

Core Tokens

Tokens are organized by role. Surface is the canvas, Brand carries identity and the interactive accent, and Semantic colors signal state.

Surface

Background

--background

Foreground

--foreground

Brand

Accent

--accent

Brand 1

--brand-1

Brand 2

--brand-2

Semantic

Destructive

--destructive

Warning

--warning

Success

--success

11-Step Color Tokens

The same Surface, Brand, and Semantic groups, expanded from a single swatch into a full 50 to 950 scale.

Surface

Neutral

--neutral-*

50
100
200
300
400
500
600
700
800
900
950

Brand

Accent

--accent

50
100
200
300
400
500
600
700
800
900
950

Brand 1

--brand-1

50
100
200
300
400
500
600
700
800
900
950

Brand 2

--brand-2

50
100
200
300
400
500
600
700
800
900
950

Semantic

Destructive

--destructive

50
100
200
300
400
500
600
700
800
900
950

Warning

--warning

50
100
200
300
400
500
600
700
800
900
950

Success

--success-*

50
100
200
300
400
500
600
700
800
900
950