tinted-ui-tokens · live examples
One color in, a tinted system out
Ten brand colors, each turned into a full brand-tinted token set — light + dark, every
text pair and on-brand button keeps WCAG AA (≥4.5:1).
Each card uses the real generated tokens.css values — no screenshots.
Click preview ↗ for the full interactive light/dark toggle.
Ruby #DC2626
on-brand contrast 4.54:1 · WCAG AA ✓
Heading
muted subtitle text
Button
light
Heading
muted subtitle text
Button
dark
Tangerine #EA580C
on-brand contrast 4.82:1 · WCAG AA ✓
Heading
muted subtitle text
Button
light
Heading
muted subtitle text
Button
dark
Marigold #F59E0B
on-brand contrast 7.56:1 · WCAG AA ✓
Heading
muted subtitle text
Button
light
Heading
muted subtitle text
Button
dark
Emerald #16A34A
on-brand contrast 5.12:1 · WCAG AA ✓
Heading
muted subtitle text
Button
light
Heading
muted subtitle text
Button
dark
Teal #0D9488
on-brand contrast 4.57:1 · WCAG AA ✓
Heading
muted subtitle text
Button
light
Heading
muted subtitle text
Button
dark
Azure #2563EB
on-brand contrast 4.9:1 · WCAG AA ✓
Heading
muted subtitle text
Button
light
Heading
muted subtitle text
Button
dark
Indigo #4F46E5
on-brand contrast 5.94:1 · WCAG AA ✓
Heading
muted subtitle text
Button
light
Heading
muted subtitle text
Button
dark
Violet #7C3AED
on-brand contrast 5.37:1 · WCAG AA ✓
Heading
muted subtitle text
Button
light
Heading
muted subtitle text
Button
dark
Rose #DB2777
on-brand contrast 4.54:1 · WCAG AA ✓
Heading
muted subtitle text
Button
light
Heading
muted subtitle text
Button
dark
Terracotta #C4502A
on-brand contrast 4.56:1 · WCAG AA ✓
Heading
muted subtitle text
Button
light
Heading
muted subtitle text
Button
dark