Diff

Deloitte vs CodeSandbox

57 token-level differences between these two design systems.

Role tokens
Background
#ffffff #0e0e0e
Text
#000000 #f0f0f0
Brand
#86bc25 #eaff96
Border
#e3e3e3 rgba(240,240,240,0.10)
Display font
Open Sans TWK Everett
Body size
16px 16px
colors 53 changed
~ bg #ffffff #0e0e0e
~ surface #ffffff #1d1d1d
~ text #000000 #f0f0f0
~ text-strong #000000 #ffffff
~ text-muted #666666 #a0a0a0
~ text-soft #767676 #8a8a8a
~ brand #86bc25 #eaff96
~ brand-deep #5c8a1a #d6f06a
~ brand-soft #eef7e0 rgba(234,255,150,0.14)
~ on-brand #000000 #343434
~ border #e3e3e3 rgba(240,240,240,0.10)
~ border-strong #666666 rgba(240,240,240,0.18)
~ link #1076a8 #e3ff73
~ link-hover #0c5d85 #edff9a
~ success #86bc25 #7ee787
~ warning #ed8b00 #f0b429
~ danger #da291c #ff6b6b
~ info #1076a8 #e3ff73
+ bg-deep #080808
+ bg-elevated #1d1d1d
+ surface-high #262626
+ surface-low #141414
+ text-faint #5c5c5c
+ brand-hover #f1ffb0
+ brand-tint rgba(234,255,150,0.07)
+ lime-text #e3ff73
+ lime-text-hover #edff9a
+ border-soft rgba(240,240,240,0.06)
+ border-brand rgba(234,255,150,0.45)
+ success-bg rgba(126,231,135,0.14)
+ warning-bg rgba(240,180,41,0.14)
+ danger-bg rgba(255,107,107,0.14)
+ shadow-deep rgba(0,0,0,0.6)
+ shadow-soft rgba(0,0,0,0.4)
+ shadow-glow rgba(234,255,150,0.22)
surface-soft #f5f5f5
surface-strong #e3e3e3
surface-dark #333333
surface-dark-elev #4a4a4a
text-body #000000
text-on-dark #ffffff
text-on-dark-mute #cccccc
accent #1076a8
accent-hover #0c5d85
accent-soft #e7f1f6
on-accent #ffffff
border-on-dark #5e5e5e
focus #1076a8
scrim rgba(0,0,0,0.55)
success-soft #eef7e0
warning-soft #fdf0dc
danger-soft #fbe9e7
info-soft #e7f1f6
typography 4 changed
~ display {"family":"Open Sans","size":64} {"family":"TWK Everett","size":120}
~ h1 {"family":"Open Sans","size":40} {"family":"TWK Everett","size":56}
~ h2 {"family":"Open Sans","size":32} {"family":"TWK Everett","size":40}
~ body {"family":"Open Sans","size":16} {"family":"Inter","size":16}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · CodeSandbox → Deloitte