Design Showcase
Dynamic Design Token - Color
Primary Color
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Secondary Color
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Tertiary Color
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Grays
zero
text
one
two
three
four
five
six
seven
eight
nine
ten
zero
one
two
three
four
five
six
seven
eight
nine
text
ten
:hover switches to green
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
:hover reduces chroma to zero
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
:hover reduces lightness to zero
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
:hover lightness and chroma to zero
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
oklch in 30deg steps
0deg
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
30deg
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
60deg
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
90deg
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
120deg
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
150deg
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
180deg
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
210deg
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
240deg
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
270deg
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
300deg
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
330deg
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
oklch l in 0.1 steps
l 0
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
l 0.1
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
l 0.2
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
l 0.3
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
l 0.4
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
l 0.5
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
l 0.6
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
l 0.7
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
l 0.8
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
l 0.9
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
l 1
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
oklch c in 0.1 steps
c 0
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
c 0.1
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
c 0.2
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
c 0.3
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
c 0.4
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
c 0.5
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
c 0.6
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
c 0.7
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
c 0.8
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
c 0.9
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
c 1
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
oklch c and l in 0.1 steps
c = l = 0
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
c = l = 0.1
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
c = l = 0.2
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
c = l = 0.3
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
c = l = 0.4
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
c = l = 0.5
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
c = l = 0.6
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
c = l = 0.7
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
c = l = 0.8
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
c = l = 0.9
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
c = l = 1
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten