DS-GN uses OKLCH color values for perceptual uniformity across the palette. Colors are organized into primitives and semantic tokens.
Color Primitives
Blue (Brand)
| Token | Value |
|---|---|
--color-blue-50 | oklch(97% 0.014 254.604) |
--color-blue-100 | oklch(93.2% 0.032 255.585) |
--color-blue-300 | oklch(80.9% 0.105 251.813) |
--color-blue-400 | oklch(70.7% 0.165 254.624) |
--color-blue-500 | oklch(62.3% 0.214 259.815) |
--color-blue-600 | oklch(54.6% 0.245 262.881) |
--color-blue-700 | oklch(48.8% 0.243 264.376) |
--color-blue-800 | oklch(42.4% 0.199 265.638) |
--color-blue-900 | oklch(37.9% 0.146 265.522) |
Orange (Accent)
| Token | Value |
|---|---|
--color-orange-100 | oklch(95.4% 0.038 75.164) |
--color-orange-300 | oklch(83.7% 0.128 66.29) |
--color-orange-500 | oklch(70.5% 0.213 47.604) |
--color-orange-600 | oklch(64.6% 0.222 41.116) |
--color-orange-700 | oklch(55.3% 0.195 38.402) |
Neutral
| Token | Value |
|---|---|
--color-neutral-50 | oklch(98.5% 0 0) |
--color-neutral-200 | oklch(92.2% 0 0) |
--color-neutral-500 | oklch(55.6% 0 0) |
--color-neutral-700 | oklch(37.1% 0 0) |
--color-neutral-900 | oklch(20.5% 0 0) |
Semantic Tokens
Semantic tokens map purpose to color values and adapt for light/dark surfaces:
| Token | Light | Dark |
|---|---|---|
--brand-on-light / --brand-on-dark | Blue 500 | Blue 400 |
--accent-on-light / --accent-on-dark | Orange 600 | Orange 500 |
--surface-on-light / --surface-on-dark | White | Neutral 900 |
--text-on-light / --text-on-dark | Neutral 900 | Neutral 50 |
Usage
Import the token stylesheet in your app:
@import '@ds-gn/tokens/public';Use tokens as CSS custom properties:
.my-element {
color: var(--brand-on-light);
background: var(--surface-on-light);
}