Design system · Component review 28

Demo palette

A color inventory needs a predictable reading order and precise copy targets. The candidate refines the Design System token gallery while keeping the Guide’s original fixed-color palette intact.

The refined shared palette is adopted. The Guide palette keeps its original presentation.

Blue token scale

All treatments show the same thirteen preset steps. The original copies the literal color; the shared palette copies var(--color-blue-*), which is what its Design System usage documents.

01

Original Guide

Fixed color-step grid

0
5
10
20
30
40
50
60
70
80
90
95
100
blue
0
5
10
20
30
40
50
60
70
80
90
95
100

The Guide shows every fixed step with its original click-to-copy swatch and keeps this established UI.

02

Current

Shared preset-variable palette

Preset palette
Select a swatch to copy its variable.

blue

0
5
10
20
30
40
50
60
70
80
90
95
100
Choose a swatch to copy its CSS variable reference. Each swatch shows the fixed preset value in both themes.

The newer gallery reads preset variables and copies their CSS variable references through native buttons.

03

Adopted

Precise token gallery

Preset palette
Select a swatch to copy its variable.

blue

0
5
10
20
30
40
50
60
70
80
90
95
100
Choose a swatch to copy its CSS variable reference. Each swatch shows the fixed preset value in both themes.

The same values gain a 44px chip target, clearer family heading and a quieter in-flow copy result that does not cover other rows.

Actual Guide palette

The colors Guide keeps all families and its original swatch behavior.

Open /guide/colors
0
5
10
20
30
40
50
60
70
80
90
95
100
blue
0
5
10
20
30
40
50
60
70
80
90
95
100
violet
0
5
10
20
30
40
50
60
70
80
90
95
100

The Design System palette is a separate inventory of CSS variable names. It does not replace the original Guide component.