Diff

Readwise vs CodeSandbox

67 token-level differences between these two design systems.

Role tokens
Background
#fdf7ef #0e0e0e
Text
#2c2418 #f0f0f0
Brand
#ff7a45 #eaff96
Border
#e5d9c4 rgba(240,240,240,0.10)
Display font
Tiempos Headline TWK Everett
Body size
17px 16px
colors 56 changed
~ bg #fdf7ef #0e0e0e
~ bg-deep #f9f0e0 #080808
~ surface #f5ecdf #1d1d1d
~ text #2c2418 #f0f0f0
~ text-strong #1a1308 #ffffff
~ text-muted #6b5e4a #a0a0a0
~ text-soft #9b8d75 #8a8a8a
~ text-faint #b6a888 #5c5c5c
~ brand #ff7a45 #eaff96
~ brand-hover #e8602a #f1ffb0
~ brand-deep #a83a14 #d6f06a
~ brand-soft #ffe4d4 rgba(234,255,150,0.14)
~ link #ff7a45 #e3ff73
~ link-hover #cc4a1a #edff9a
~ border #e5d9c4 rgba(240,240,240,0.10)
~ border-soft #f0e7d5 rgba(240,240,240,0.06)
~ border-strong #d4c4a8 rgba(240,240,240,0.18)
~ on-brand #ffffff #343434
~ success #3d6b4a #7ee787
~ warning #c97a1f #f0b429
~ danger #b94326 #ff6b6b
~ info #4d6580 #e3ff73
+ bg-elevated #1d1d1d
+ surface-high #262626
+ surface-low #141414
+ brand-tint rgba(234,255,150,0.07)
+ lime-text #e3ff73
+ lime-text-hover #edff9a
+ 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)
bg-alt #ffffff
surface-soft #fbf3e7
surface-warm #f5ecdf
surface-deep #e8d9c2
surface-paper #ffffff
text-on-brand #ffffff
text-on-dark #fdf7ef
brand-active #cc4a1a
brand-paler #fff0e6
accent #3d6b4a
accent-soft #dfeae0
accent-deep #27432f
highlight-bg #fff4d6
highlight-text #2c2418
underline #ff7a45
link-visited #7d3c84
scrim rgba(44,36,24,0.45)
shadow-warm rgba(60,40,15,0.05)
shadow-card rgba(60,40,15,0.10)
shadow-elev rgba(60,40,15,0.18)
warning-soft #fdf0d8
typography 5 changed
~ display {"family":"Tiempos Headline","size":68} {"family":"TWK Everett","size":120}
~ h1 {"family":"Tiempos Headline","size":60} {"family":"TWK Everett","size":56}
~ h2 {"family":"Tiempos Headline","size":40} {"family":"TWK Everett","size":40}
~ body {"family":"Inter","size":17} {"family":"Inter","size":16}
~ label {"family":"JetBrains Mono","size":12} {"family":"SFMono-Regular","size":13}
radius 2 changed
~ button 10px 8px
~ card 16px 12px
spacing 4 changed
~ xs 4px 0px
~ sm 8px 4px
~ md 16px 12px
~ xl 48px 64px
↻ Swap direction · CodeSandbox → Readwise