Documentation

Documentation

Colors

DS-GN's color system built on OKLCH for perceptual uniformity.

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);
}
Esc