Token generator
Token diff
Paste two token-generator share URLs (or just the query strings) and see exactly what changed between them — color shifts, scale steps, semantic re-mappings, type ramp, spacing, shape, motion. Useful when you're proposing a rebrand and need to talk concretely about what moves.
#4F46E5·complementary·oklch
#007953·triadic·oklch
Configuration7 of 8 differ
Primary
A
#4F46E5
B
#007953
Accent
A
#828700
B
#A948E5
Harmony
A
complementary
B
triadic
Color mode
A
oklch
B
oklch
Type ratio
A
minor-third
B
major-third
Density
A
cozy
B
comfortable
Radius
A
subtle
B
rounded
Shadow
A
balanced
B
soft
Color scales33 of 77 steps differ
primary
11 differ50
100
200
300
400
500
600
700
800
900
950
accent
11 differ50
100
200
300
400
500
600
700
800
900
950
neutral
11 differ50
100
200
300
400
500
600
700
800
900
950
success
identical50
100
200
300
400
500
600
700
800
900
950
warning
identical50
100
200
300
400
500
600
700
800
900
950
danger
identical50
100
200
300
400
500
600
700
800
900
950
info
identical50
100
200
300
400
500
600
700
800
900
950
Typography9 of 10 steps differ
| Step | A · size | B · size | A · line | B · line |
|---|---|---|---|---|
| xs | 0.6944rem | 0.64rem | 1.5 | 1.5 |
| sm | 0.8333rem | 0.8rem | 1.5 | 1.5 |
| base | 1rem | 1rem | 1.5 | 1.5 |
| lg | 1.2rem | 1.25rem | 1.5 | 1.5 |
| xl | 1.44rem | 1.5625rem | 1.4 | 1.4 |
| 2xl | 1.728rem | 1.9531rem | 1.2 | 1.2 |
| 3xl | 2.0736rem | 2.4414rem | 1.2 | 1.2 |
| 4xl | 2.4883rem | 3.0518rem | 1.2 | 1.2 |
| 5xl | 2.986rem | 3.8147rem | 1.2 | 1.2 |
| 6xl | 3.5832rem | 4.7684rem | 1.2 | 1.2 |
Spacing20 of 21 steps differ
| Step | A | B |
|---|---|---|
| 0 | 0 | 0 |
| 1 | 0.25rem | 0.2813rem |
| 2 | 0.5rem | 0.5625rem |
| 3 | 0.75rem | 0.8438rem |
| 4 | 1rem | 1.125rem |
| 5 | 1.25rem | 1.4063rem |
| 6 | 1.5rem | 1.6875rem |
| 8 | 2rem | 2.25rem |
| 10 | 2.5rem | 2.8125rem |
| 12 | 3rem | 3.375rem |
| 16 | 4rem | 4.5rem |
| 20 | 5rem | 5.625rem |
| 24 | 6rem | 6.75rem |
| 32 | 8rem | 9rem |
| 40 | 10rem | 11.25rem |
| 48 | 12rem | 13.5rem |
| 56 | 14rem | 15.75rem |
| 64 | 16rem | 18rem |
| 0.5 | 0.125rem | 0.1406rem |
| 1.5 | 0.375rem | 0.4219rem |
| 2.5 | 0.625rem | 0.7031rem |
Shape & elevation11 of 13 differ
Radius
| none | 0 | 0 |
| sm | 0.125rem | 0.25rem |
| md | 0.25rem | 0.5rem |
| lg | 0.375rem | 0.75rem |
| xl | 0.625rem | 1.25rem |
| 2xl | 1rem | 2rem |
| 3xl | 1.5rem | 3rem |
| full | 9999px | 9999px |
Shadow
| sm | 0 1px 2px 0 rgba(35, 36, 40, 0.06) | 0 1px 2px 0 rgba(33, 37, 35, 0.04) |
| md | 0 4px 6px -1px rgba(35, 36, 40, 0.1), 0 2px 4px -2px rgba(35, 36, 40, 0.06) | 0 4px 8px -2px rgba(33, 37, 35, 0.06), 0 2px 4px -2px rgba(33, 37, 35, 0.04) |
| lg | 0 10px 15px -3px rgba(35, 36, 40, 0.1), 0 4px 6px -4px rgba(35, 36, 40, 0.06) | 0 12px 20px -6px rgba(33, 37, 35, 0.08), 0 4px 8px -4px rgba(33, 37, 35, 0.04) |
| xl | 0 20px 25px -5px rgba(35, 36, 40, 0.1), 0 8px 10px -6px rgba(35, 36, 40, 0.06) | 0 24px 32px -10px rgba(33, 37, 35, 0.1), 0 8px 12px -6px rgba(33, 37, 35, 0.06) |
| 2xl | 0 25px 50px -12px rgba(35, 36, 40, 0.25) | 0 36px 48px -16px rgba(33, 37, 35, 0.14) |