Diff

CodeSandbox vs Recraft

52 token-level differences between these two design systems.

Role tokens
Background
#0e0e0e #000000
Text
#f0f0f0 #ffffff
Brand
#eaff96 #d2fc31
Border
rgba(240,240,240,0.10) rgba(255, 255, 255, 0.10)
Display font
TWK Everett ABC Gravity Condensed
Body size
16px 16px
colors 49 changed
~ bg #0e0e0e #000000
~ surface #1d1d1d #141414
~ text #f0f0f0 #ffffff
~ text-muted #a0a0a0 #a3a3a3
~ text-soft #8a8a8a #737373
~ text-faint #5c5c5c #525252
~ brand #eaff96 #d2fc31
~ brand-deep #d6f06a #bce815
~ brand-soft rgba(234,255,150,0.14) rgba(210, 252, 49, 0.14)
~ on-brand #343434 #0000ee
~ link #e3ff73 #ffffff
~ link-hover #edff9a #d2fc31
~ border rgba(240,240,240,0.10) rgba(255, 255, 255, 0.10)
~ border-strong rgba(240,240,240,0.18) rgba(255, 255, 255, 0.18)
~ success-bg rgba(126,231,135,0.14) rgba(74, 222, 128, 0.12)
~ warning-bg rgba(240,180,41,0.14) rgba(250, 204, 21, 0.12)
~ danger-bg rgba(255,107,107,0.14) rgba(248, 113, 113, 0.12)
+ bg-alt #0a0a0a
+ surface-soft #1c1c1c
+ surface-elevated #242424
+ on-brand-ink #000000
+ cta-secondary-bg rgba(255, 255, 255, 0.9)
+ cta-secondary-text #0000ee
+ selected-bg rgba(255, 255, 255, 0.08)
+ disabled #525252
+ border-subtle rgba(255, 255, 255, 0.05)
+ border-lime rgba(210, 252, 49, 0.45)
+ success-text #86efac
+ warning-text #fde047
+ danger-text #fca5a5
+ info-bg rgba(210, 252, 49, 0.10)
+ info-text #d2fc31
bg-deep #080808
bg-elevated #1d1d1d
surface-high #262626
surface-low #141414
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 #7ee787
warning #f0b429
danger #ff6b6b
info #e3ff73
shadow-deep rgba(0,0,0,0.6)
shadow-soft rgba(0,0,0,0.4)
shadow-glow rgba(234,255,150,0.22)
typography 3 changed
~ display {"family":"TWK Everett","size":120} {"family":"ABC Gravity Condensed","size":80}
~ h1 {"family":"TWK Everett","size":56} {"family":"ABC Gravity Condensed","size":40}
~ h2 {"family":"TWK Everett","size":40} {"family":"ABC Gravity Condensed","size":32}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Recraft → CodeSandbox