Diff

Liquid Death vs Tinybird

61 token-level differences between these two design systems.

Role tokens
Background
#000000 #0a0a0a
Text
#ffffff #ffffff
Brand
#ffffff #27f795
Border
#ffffff #262626
Display font
Acumin Pro Inter
Body size
16px 16px
colors 54 changed
~ bg #000000 #0a0a0a
~ surface #000000 #151515
~ brand #ffffff #27f795
~ brand-active #cccccc #1fd87f
~ text-strong #ffffff #e6e6e6
~ text-muted #9ca3af #888888
~ link #ffffff #27f795
~ link-hover #9ca3af #1fd87f
~ border #ffffff #262626
~ border-strong #ffffff #383838
~ success #22c55e #27f795
~ warning #f59e0b #fc9f5b
~ danger #ff0000 #ff8389
~ info #007aff #00c1ff
+ bg-deep #000000
+ surface-soft #101010
+ surface-elevated #1e1e1e
+ surface-mint-tint rgba(255,255,255,0.05)
+ text-body #b0b0b0
+ text-faint #5a5a5a
+ brand-dark #008060
+ brand-disabled #16402e
+ on-brand #0a0a0a
+ on-brand-dark #ffffff
+ on-dark #ffffff
+ border-mint #27f795
+ shadow-color rgba(0,0,0,0.6)
+ shadow-glow-mint rgba(39,247,149,0.18)
+ code-text #ffffff
+ code-invocation #27f795
+ code-success #27f795
+ code-error #ff8389
+ code-identifier #00c1ff
+ code-value #fc9f5b
+ code-diff-added #008060
bg-page #000000
surface-raised #0a0a0a
surface-inverse #ffffff
brand-hover #e5e5e5
text-soft #6b7280
text-on-white #000000
text-on-brand #000000
border-soft #262626
border-input #ffffff
outline-focus #ffffff
scrim rgba(0,0,0,0.85)
shadow-card transparent
shadow-modal transparent
accent-electric #007aff
accent-blood #ff0000
cta-hell-yes-bg #000000
cta-hell-yes-text #ffffff
cta-contest-bg #ffffff
cta-contest-text #000000
typography 4 changed
~ display {"family":"Acumin Pro","size":96} {"family":"Inter","size":80}
~ h1 {"family":"Acumin Pro","size":60} {"family":"Inter","size":64}
~ h2 {"family":"Acumin Pro","size":48} {"family":"Inter","size":44}
~ body {"family":"Acumin Pro","size":16} {"family":"Inter","size":16}
radius 3 changed
~ button 0px 8px
~ card 0px 12px
~ pill 0px 9999px
spacing identical
No differences.
↻ Swap direction · Tinybird → Liquid Death