Scales

Light row above, dark row below. The same step number does the same job in both — that's the whole point, and it's why dark mode needs no second round of colour picking.

slateNeutral — backgrounds, borders, body text
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
indigoAccent — primary, ring, focus
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
redDestructive — delete, failure
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
amberWarning — pending, caution
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
grassSuccess — completed, healthy
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12

What each step is for

1App background

2Subtle background

3Component fill

4Hovered fill

5Active fill

6Subtle border

7Border

8Hovered border

9Solid

10Hovered solid

11Low-contrast text

12High-contrast text

Token mapping

Live values — these are what globals.css resolves right now.

--backgroundslate-1
--cardslate-2
--mutedslate-3
--secondaryslate-4
--borderslate-6
--inputslate-7
--primaryindigo-9
--ringindigo-8
--muted-foregroundslate-11
--foregroundslate-12
--destructivered-9