Explore
Color System
The Color Engine follows a deterministic HSL pipeline. Given the same semantic tokens, it always produces the same colors — always WCAG AA compliant.
Generation Pipeline
Hue Anchor: Derived from domain (e.g. Industrial → 220° cool blue)
Primary Palette: 11 stops (50–950) with saturation curve applied
Neutral Palette: Cool-neutral or warm-neutral based on primary temperature
Semantic Colors: Success (140°–160°), warning, danger, info hues
Surface & Text: Light + dark mode surfaces with WCAG AA contrast validation
Industrial
cool · high contrastLight
Primary
50
100
200
300
400
500
600
700
800
900
950
Neutral
50
100
200
300
400
500
600
700
800
900
950
Semantic
success#678e77
warning#908364
danger#906864
info#69758c
Surfaces
background#f7f7f8
surface#ffffff
surfaceMuted#eaeaeb
surfaceHover#d8d8da
Dark
Primary
50
100
200
300
400
500
600
700
800
900
950
Neutral
50
100
200
300
400
500
600
700
800
900
950
Semantic
success#678e77
warning#908364
danger#906864
info#69758c
Surfaces
background#141415
surface#232325
surfaceMuted#313235
surfaceHover#45474a
Wellness
warm · medium contrastLight
Primary
50
100
200
300
400
500
600
700
800
900
950
Neutral
50
100
200
300
400
500
600
700
800
900
950
Semantic
success#6a8b78
warning#8d8268
danger#8d6b68
info#89796c
Surfaces
background#f8f7f7
surface#ffffff
surfaceMuted#ebebea
surfaceHover#dad9d8
Dark
Primary
50
100
200
300
400
500
600
700
800
900
950
Neutral
50
100
200
300
400
500
600
700
800
900
950
Semantic
success#6a8b78
warning#8d8268
danger#8d6b68
info#89796c
Surfaces
background#151414
surface#252423
surfaceMuted#353331
surfaceHover#4a4745
Creative
warm · medium contrastLight
Primary
50
100
200
300
400
500
600
700
800
900
950
Neutral
50
100
200
300
400
500
600
700
800
900
950
Semantic
success#33c16f
warning#ca9a2b
danger#ca382b
info#b93c70
Surfaces
background#f8f7f7
surface#ffffff
surfaceMuted#ebeaea
surfaceHover#dad8d9
Dark
Primary
50
100
200
300
400
500
600
700
800
900
950
Neutral
50
100
200
300
400
500
600
700
800
900
950
Semantic
success#33c16f
warning#ca9a2b
danger#ca382b
info#b93c70
Surfaces
background#151414
surface#252324
surfaceMuted#353133
surfaceHover#4a4547
Mobility
neutral-cool · high contrastLight
Primary
50
100
200
300
400
500
600
700
800
900
950
Neutral
50
100
200
300
400
500
600
700
800
900
950
Semantic
success#3db870
warning#bf9636
danger#bf4136
info#4583b0
Surfaces
background#f7f7f8
surface#ffffff
surfaceMuted#eaebeb
surfaceHover#d8d9da
Dark
Primary
50
100
200
300
400
500
600
700
800
900
950
Neutral
50
100
200
300
400
500
600
700
800
900
950
Semantic
success#3db870
warning#bf9636
danger#bf4136
info#4583b0
Surfaces
background#141515
surface#232425
surfaceMuted#313335
surfaceHover#45484a
Professional Services
cool · high contrastLight
Primary
50
100
200
300
400
500
600
700
800
900
950
Neutral
50
100
200
300
400
500
600
700
800
900
950
Semantic
success#7a7a7a
warning#7a7a7a
danger#7a7a7a
info#7a7a7a
Surfaces
background#f7f7f8
surface#ffffff
surfaceMuted#eaeaeb
surfaceHover#d8d8da
Dark
Primary
50
100
200
300
400
500
600
700
800
900
950
Neutral
50
100
200
300
400
500
600
700
800
900
950
Semantic
success#7a7a7a
warning#7a7a7a
danger#7a7a7a
info#7a7a7a
Surfaces
background#141415
surface#232325
surfaceMuted#313235
surfaceHover#45464a
Education
warm-neutral · medium contrastLight
Primary
50
100
200
300
400
500
600
700
800
900
950
Neutral
50
100
200
300
400
500
600
700
800
900
950
Semantic
success#53a274
warning#a68c4e
danger#a6564e
info#586f9d
Surfaces
background#f7f7f8
surface#ffffff
surfaceMuted#eaeaeb
surfaceHover#d8d8da
Dark
Primary
50
100
200
300
400
500
600
700
800
900
950
Neutral
50
100
200
300
400
500
600
700
800
900
950
Semantic
success#53a274
warning#a68c4e
danger#a6564e
info#586f9d
Surfaces
background#141415
surface#232325
surfaceMuted#313235
surfaceHover#45474a