Tokens · Token families
Color palette
The primitive colour scales. For theme authors only: components never use them.
Files: tokens.json → color
Building a component? Use the semantic colours instead. These scales are what a theme points the semantic tokens at.
blue
- 10
- 20
- 30
- 40
- 50
- 60
- 70
- 80
- 90
- 100
gray
- 10
- 20
- 30
- 40
- 50
- 60
- 70
- 80
- 90
- 100
green
- 10
- 20
- 30
- 40
- 50
- 60
- 70
red
- 10
- 20
- 30
- 40
- 50
- 60
- 70
yellow
- 10
- 20
- 30
- 40
- 50
- 60
- 70
teal
- 10
- 20
- 40
- 50
- 60
- 70
purple
- 10
- 20
- 40
- 50
- 60
- 70
Raw values, never used directly in components. LUZ's own palette: scripts/build-palette.js computes every step in OKLCH from one lightness curve shared by all families, a chroma curve and a hue per family.