Token Registry

Design language health

Overall 94 · 218 tokens · 6 themes

275 match

Color ramp · OKLCH-generated

Yellow

Brand-defining premium gold. Rich at every step, never muddy.

hue 92° · chroma 0.18

Lightness · Chroma curvesL 98% → 27%

LightnessChroma

Ramp health

Yellow ramp

Perceptual uniformity80%

Accessibility coverage100%

Theme coverage100%

Usage coverage100%

Studio analyses every ramp for hue drift, chroma collapse and contrast gaps every nightly build.

Primitive·Color·

Production

color.yellow.500

Yellow ramp step 500. Brand-defining premium gold. Rich at every step, never muddy.

Owner Maya Chenv2.4.0Created 2024-03-12Updated 2026-06-04

Used as

L 72 · C 0.15 · h 84°

HEX

#CF9B00

Value

#CF9B00

RGB

rgb(207, 155, 0)

HSL

hsl(45, 100%, 41%)

OKLCH

oklch(71.9% 0.148 84.4)

CSS Variable

var(--color-yellow-500)

Tailwind

color-yellow-500

Figma Variable

Color/Yellow/500

Impact map · actual consumers, not counts

Used by Components2

ButtonBadge

Used by Patterns2

KPI DashboardNotification Centre

Used by Flows2

Transfer FundsOpen Account

Used by Blueprints2

Retail BankingHome Loan

Design Language Sandbox

Validate color.yellow.500 across components, screens, themes & accessibility

Live • token-bound

Generated ramp

50 → 950 · perceptual OKLCH

100

200

300

400

500

600

700

800

900

950

#FFFAEF

255,250,239

h41 s100

L99

#FEF2DB

254,242,219

h39 s95

L96

#FEE5B2

254,229,178

h40 s97

L93

#F8D284

248,210,132

h40 s89

L88

#E6B649

230,182,73

h42 s76

L80

#CF9B01

207,155,1

h45 s99

L72

#B18000

177,128,0

h43 s100

L63

#916600

145,102,0

h42 s100

L54

#724E00

114,78,0

h41 s100

L45

#533700

83,55,0

h40 s100

L36

#3A2500

58,37,0

h38 s100

L28

Colour pair testing

WCAG 2.2

On whiteAa

2.52:1

Fail

On surfaceAa

2.35:1

Fail

On inkAa

7.66:1

AAA

White onAa

2.52:1

Fail

Ink onAa

7.66:1

AAA

Colour-blind simulation

3 deficiencies

Original

#CF9B00

Protanopia

#B8B826

Deuteranopia

#BCBF2F

Tritanopia

#CC434A