Diff

Chevrolet vs Things

59 token-level differences between these two design systems.

Role tokens
Background
#ffffff #f2f5f7
Text
#333333 #303336
Brand
#cd9834 #5c9cf5
Border
#d6d6d6 #26344a1a
Display font
Louis Inter
Body size
16px 17px
colors 54 changed
~ bg #ffffff #f2f5f7
~ bg-soft #f4f4f4 #ffffff
~ surface #ffffff #e8ecef
~ text #333333 #303336
~ text-strong #1a1a1a #0a1320
~ text-muted #666666 #26344a80
~ text-faint #999999 #26344a40
~ brand #cd9834 #5c9cf5
~ brand-deep #003876 #2c6dbf
~ border #d6d6d6 #26344a1a
~ border-strong #a6a6a6 #26344a2e
~ border-soft #e6e6e6 #26344a10
~ shadow-elev rgba(0,0,0,0.12) rgba(20,30,50,0.10)
~ success #1f8b46 #34a853
~ warning #f0a020 #f59e0b
~ danger #dc1f2c #dc3545
~ info #003876 #5c9cf5
+ surface-elev #dde2e6
+ text-body #3f454d
+ text-soft #000f24a3
+ brand-hover #4385e0
+ brand-soft #dceaff
+ brand-softer #eaf2ff
+ cta-bg #1a1a1f
+ cta-text #ffffff
+ shadow-icon rgba(20,30,50,0.08)
+ shadow-card rgba(20,30,50,0.04)
+ scrim rgba(10,19,32,0.50)
+ success-soft #e6f4ea
+ warning-soft #fff8e1
+ danger-soft #fde7ea
+ info-soft #dceaff
bg-card #ffffff
bg-strong #e8e8e8
bg-dark #1a1a1a
bg-dark-elev #262626
bg-deep #000000
bg-blue-deep #003876
surface-soft #f4f4f4
surface-table #fafafa
text-ink #1a1a1a
brand-deep-hover #002b5e
brand-disabled #cccccc
on-dark #ffffff
on-dark-soft #bcbcbc
accent-red #dc1f2c
accent-red-deep #a8161f
accent-yellow #f4d35e
border-on-dark rgba(255,255,255,0.16)
link #003876
link-hover #002b5e
ring #003876
shadow-soft rgba(0,0,0,0.06)
shadow-deep rgba(0,0,0,0.32)
typography 5 changed
~ display {"family":"Louis","size":72} {"family":"Inter","size":56}
~ h1 {"family":"Louis","size":40} {"family":"Inter","size":40}
~ h2 {"family":"Louis","size":32} {"family":"Inter","size":32}
~ body {"family":"Louis","size":16} {"family":"Inter","size":17}
~ label {"family":"JetBrains Mono","size":11} {"family":"SFMono-Regular","size":12}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Things → Chevrolet