Ten brand colors spanning the full hue wheel (red → orange → amber → green → teal →
blue → indigo → violet → pink → warm), each run through generate_tokens.py --format all.
Every folder is a real, unedited generator output — nothing hand-tweaked.
| Folder | Brand | Temperature | on-brand contrast |
|---|---|---|---|
red/ |
#DC2626 |
warm | 4.54:1 ✓ AA |
orange/ |
#EA580C |
warm | 4.82:1 ✓ AA |
amber/ |
#F59E0B |
warm | 7.56:1 ✓ AA |
green/ |
#16A34A |
balanced | 5.12:1 ✓ AA |
teal/ |
#0D9488 |
cool | 4.57:1 ✓ AA |
blue/ |
#2563EB |
cool | 4.90:1 ✓ AA |
indigo/ |
#4F46E5 |
cool | 5.94:1 ✓ AA |
violet/ |
#7C3AED |
cool | 5.37:1 ✓ AA |
pink/ |
#DB2777 |
warm | 4.54:1 ✓ AA |
warm/ |
#C4502A |
warm | 4.56:1 ✓ AA |
Each folder contains all five export formats:
tokens.css— CSS custom properties, light +[data-theme="dark"]preview.html— standalone light/dark preview pagetokens.json— DTCG design-token formattailwind.config.js— Tailwind theme extension_tokens.scss— SCSS variables
Open index.html locally, or view the hosted version:
https://truman-t3.github.io/tinted-ui-tokens-skills/examples/
python3 scripts/generate_tokens.py --brand "#2563EB" --name "Acme" --format all --out examples/blue