Diff

Obsidian vs Liquid Death

54 token-level differences between these two design systems.

Role tokens
Background
#0f0f0f #000000
Text
#eeeeee #ffffff
Brand
#7c3aed #ffffff
Border
#2a2a2a #ffffff
Display font
Inter Acumin Pro
Body size
16px 16px
colors 47 changed
~ bg #0f0f0f #000000
~ surface #161616 #000000
~ text #eeeeee #ffffff
~ text-muted #a3a3a3 #9ca3af
~ brand #7c3aed #ffffff
~ brand-hover #6d28d9 #e5e5e5
~ brand-active #5b21b6 #cccccc
~ border #2a2a2a #ffffff
~ border-soft #1f1f1f #262626
~ border-strong #3a3a3a #ffffff
~ shadow-card rgba(0,0,0,0.50) transparent
~ shadow-modal rgba(0,0,0,0.70) transparent
~ scrim rgba(0,0,0,0.65) rgba(0,0,0,0.85)
~ success #4ade80 #22c55e
~ warning #fbbf24 #f59e0b
~ danger #f87171 #ff0000
~ info #a78bfa #007aff
+ bg-page #000000
+ surface-raised #0a0a0a
+ surface-inverse #ffffff
+ text-soft #6b7280
+ text-on-white #000000
+ text-on-brand #000000
+ link #ffffff
+ link-hover #9ca3af
+ border-input #ffffff
+ outline-focus #ffffff
+ accent-electric #007aff
+ accent-blood #ff0000
+ cta-hell-yes-bg #000000
+ cta-hell-yes-text #ffffff
+ cta-contest-bg #ffffff
+ cta-contest-text #000000
bg-deep #0a0a0a
surface-elev #1f1f1f
surface-hover #262626
text-secondary #b0b0b0
text-faint #737373
brand-text #a78bfa
brand-text-hover #c4b5fd
brand-soft #2a1a4a
on-brand #ffffff
border-brand #7c3aed
shadow-ambient rgba(0,0,0,0.40)
success-soft #14321f
warning-soft #33270a
danger-soft #3a1717
typography 4 changed
~ display {"family":"Inter","size":60} {"family":"Acumin Pro","size":96}
~ h1 {"family":"Inter","size":40} {"family":"Acumin Pro","size":60}
~ h2 {"family":"Inter","size":32} {"family":"Acumin Pro","size":48}
~ body {"family":"Inter","size":16} {"family":"Acumin Pro","size":16}
radius 3 changed
~ button 8px 0px
~ card 12px 0px
~ pill 9999px 0px
spacing identical
No differences.
↻ Swap direction · Liquid Death → Obsidian