Tool · Kit comparison
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
#00744F·triadic·oklch
Configuration
9 of 10 differA
#4F46E5
B
#00744F
A
#7E8300
B
#9F3DDA
A
complementary
B
triadic
A
oklch
B
oklch
A
minor-third
B
major-third
A
cozy
B
comfortable
A
subtle
B
rounded
A
balanced
B
soft
A
standard
B
expressive
A
step 600
B
step 400
Color scales
33 of 77 steps differprimary
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
Semantic roles
47 of 92 differA role differs when it resolves to a different colour or points at a different primitive. Only changed roles are listed — when the primitive is the same in both kits the hexes are shown, otherwise the re-mapping.
light
23 of 46 differ- bg#fafafc → #f9fafa
- bg-subtle#f1f1f4 → #f0f3f1
- bg-muted#e0e1e6 → #dee3e0
- fg#232428 → #212523
- fg-muted#64666d → #606864
- fg-subtle#7e8088 → #7a837e
- border#e0e1e6 → #dee3e0
- border-strong#c5c7ce → #c2c9c5
- brand#4f46e5 → #00744f
- brand-hover#3d2ec1 → #005c3e
- brand-active#2b1497 → #00412b
- brand-subtle#f9faff → #eefff6
- brand-subtle-fg#2b1497 → #00412b
- accent#7e8300 → #9f3dda
- accent-subtle#f0f7a7 → #f6edff
- accent-subtle-fg#373a00 → #4b006f
- ring#6668ff → #009164
- chart-1#727cd9 → #009f6d
- chart-2#9c8500 → #be609d
- chart-3#ba62a5 → #0095b8
- chart-4#1c9e63 → #ca653b
- chart-5#cc6345 → #7b79d7
- chart-6#0096b1 → #968800
dark
24 of 46 differ- bg#111115 → #0f1311
- bg-subtle#232428 → #212523
- bg-muted#36383d → #343a36
- surface#232428 → #212523
- fg#fafafc → #f9fafa
- fg-muted#c5c7ce → #c2c9c5
- fg-subtle#a2a4ac → #9fa7a2
- border#36383d → #343a36
- border-strong#4e4f56 → #4b524e
- brand#6668ff → #009164
- brand-hover#8e9aff → #10b981
- brand-active#b9c3ff → #6ddcab
- brand-subtle#0c0041 → #00170c
- brand-subtle-fg#d9dfff → #aaf2ce
- accent#a2a800 → #c570ff
- accent-subtle#242600 → #34004e
- accent-subtle-fg#dce546 → #ecd5ff
- ring#8e9aff → #10b981
- chart-1#96a2fc → #4dc492
- chart-2#c2aa3c → #e388c1
- chart-3#df8ac9 → #26bce6
- chart-4#5ac389 → #ef8e66
- chart-5#f08c6e → #9f9ffa
- chart-6#12bee0 → #bbae3f
Chart palette
12 of 12 differlight
1
2
3
4
5
6
dark
1
2
3
4
5
6
Typography
9 of 10 steps differ| Step | A · size | B · size | A · line | B · line | A · track | B · track |
|---|---|---|---|---|---|---|
| xs(differs) | 0.6944rem | 0.64rem | 1.5 | 1.5 | 0 | 0 |
| sm(differs) | 0.8333rem | 0.8rem | 1.5 | 1.5 | 0 | 0 |
| base | 1rem | 1rem | 1.5 | 1.5 | 0 | 0 |
| lg(differs) | 1.2rem | 1.25rem | 1.5 | 1.5 | -0.005em | -0.005em |
| xl(differs) | 1.44rem | 1.5625rem | 1.4 | 1.4 | -0.010em | -0.010em |
| 2xl(differs) | 1.728rem | 1.9531rem | 1.2 | 1.2 | -0.015em | -0.015em |
| 3xl(differs) | 2.0736rem | 2.4414rem | 1.2 | 1.2 | -0.020em | -0.020em |
| 4xl(differs) | 2.4883rem | 3.0518rem | 1.2 | 1.2 | -0.025em | -0.025em |
| 5xl(differs) | 2.986rem | 3.8147rem | 1.2 | 1.2 | -0.030em | -0.030em |
| 6xl(differs) | 3.5832rem | 4.7684rem | 1.2 | 1.2 | -0.030em | -0.030em |
Spacing
20 of 21 steps differ| Step | A | B |
|---|---|---|
| 0 | 0 | 0 |
| 1(differs) | 0.25rem | 0.2813rem |
| 2(differs) | 0.5rem | 0.5625rem |
| 3(differs) | 0.75rem | 0.8438rem |
| 4(differs) | 1rem | 1.125rem |
| 5(differs) | 1.25rem | 1.4063rem |
| 6(differs) | 1.5rem | 1.6875rem |
| 8(differs) | 2rem | 2.25rem |
| 10(differs) | 2.5rem | 2.8125rem |
| 12(differs) | 3rem | 3.375rem |
| 16(differs) | 4rem | 4.5rem |
| 20(differs) | 5rem | 5.625rem |
| 24(differs) | 6rem | 6.75rem |
| 32(differs) | 8rem | 9rem |
| 40(differs) | 10rem | 11.25rem |
| 48(differs) | 12rem | 13.5rem |
| 56(differs) | 14rem | 15.75rem |
| 64(differs) | 16rem | 18rem |
| 0.5(differs) | 0.125rem | 0.1406rem |
| 1.5(differs) | 0.375rem | 0.4219rem |
| 2.5(differs) | 0.625rem | 0.7031rem |
Shape & elevation
11 of 13 differ| none | 0 | 0 |
| sm(differs) | 0.125rem | 0.25rem |
| md(differs) | 0.25rem | 0.5rem |
| lg(differs) | 0.375rem | 0.75rem |
| xl(differs) | 0.625rem | 1.25rem |
| 2xl(differs) | 1rem | 2rem |
| 3xl(differs) | 1.5rem | 3rem |
| full | 9999px | 9999px |
| sm(differs) | 0 1px 2px 0 rgba(35, 36, 40, 0.06) | 0 1px 2px 0 rgba(33, 37, 35, 0.04) |
| md(differs) | 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(differs) | 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(differs) | 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(differs) | 0 25px 50px -12px rgba(35, 36, 40, 0.25) | 0 36px 48px -16px rgba(33, 37, 35, 0.14) |
Motion
8 of 10 differ| instant(differs) | 50ms | 40ms |
| fast(differs) | 120ms | 100ms |
| base(differs) | 200ms | 160ms |
| slow(differs) | 320ms | 260ms |
| slower(differs) | 500ms | 400ms |
| standard | cubic-bezier(0.2, 0, 0, 1) | cubic-bezier(0.2, 0, 0, 1) |
| emphasized(differs) | cubic-bezier(0.3, 0, 0, 1) | cubic-bezier(0.34, 1.56, 0.64, 1) |
| decelerate(differs) | cubic-bezier(0, 0, 0, 1) | cubic-bezier(0.05, 0.7, 0.1, 1) |
| accelerate(differs) | cubic-bezier(0.3, 0, 1, 1) | cubic-bezier(0.3, 0, 0.8, 0.15) |
| linear | linear | linear |