Diff

Reddit vs Luma AI

93 token-level differences between these two design systems.

Role tokens
Background
#dae0e6 #ffffff
Text
#1a1a1b #000000
Brand
#ff4500 #000000
Border
#edeff1 #e5e5e5
Display font
IBM Plex Sans __graphik_7126cf
Body size
14px 16px
colors 85 changed
~ bg #dae0e6 #ffffff
~ text #1a1a1b #000000
~ text-muted #7c7c7c #666666
~ text-soft #878a8c #999999
~ brand #ff4500 #000000
~ link #0079d3 #000000
~ link-hover #0061a8 #666666
~ border #edeff1 #e5e5e5
~ border-strong #ccc #d4d4d4
~ shadow-elevated rgba(28,28,28,0.16) rgba(0,0,0,0.16)
~ success #46d160 #16a34a
~ warning #ffb000 #d97706
~ danger #ea0027 #dc2626
~ info #0079d3 #2563eb
+ bg-dark #000000
+ bg-near #0a0a0a
+ text-invert #ffffff
+ text-muted-dark #a3a3a3
+ brand-invert #ffffff
+ accent-ink #000000
+ accent-snow #ffffff
+ accent-graphite #171717
+ accent-fog #f5f5f5
+ link-invert #ffffff
+ link-invert-hover #cccccc
+ selected #f0f0f0
+ disabled #cccccc
+ neutral-0 #ffffff
+ neutral-50 #fafafa
+ neutral-100 #f5f5f5
+ neutral-200 #e5e5e5
+ neutral-300 #d4d4d4
+ neutral-400 #a3a3a3
+ neutral-500 #737373
+ neutral-600 #525252
+ neutral-700 #404040
+ neutral-800 #262626
+ neutral-900 #171717
+ neutral-950 #0a0a0a
+ neutral-1000 #000000
+ surface-fog #f5f5f5
+ surface-dark #0a0a0a
+ surface-graphite #171717
+ border-dark #ffffff1f
+ border-dark-soft #ffffff0d
+ ring #000000
+ ring-invert #ffffff
+ shadow-ambient rgba(0,0,0,0.06)
+ shadow-standard rgba(0,0,0,0.10)
+ shadow-dark rgba(0,0,0,0.6)
+ success-bg #f0fdf4
+ success-text #15803d
+ warning-bg #fffbeb
+ warning-text #b45309
+ danger-bg #fef2f2
+ danger-text #b91c1c
+ info-bg #eff6ff
+ info-text #1d4ed8
bg-soft #f6f7f8
bg-deep #030303
surface-hover #f6f7f8
surface-elevated #ffffff
surface-deep #1a1a1b
text-strong #030303
text-body #1c1c1c
text-faint #9b9b9b
text-on-brand #ffffff
brand-hover #e63e00
brand-active #cc3700
brand-soft #ffe4d6
brand-deep #a83100
upvote #ff4500
downvote #7193ff
link-visited #7c4dff
border-subtle #f6f7f8
border-card #ccc
on-bg #1a1a1b
shadow-color rgba(28,28,28,0.08)
award-gold #ffb000
award-silver #c8c9d0
award-platinum #39d8ff
flair-blue #46d160
flair-pink #ff66ac
flair-green #46d160
community-blue #0079d3
typography 5 changed
~ display {"family":"IBM Plex Sans","size":56} {"family":"__graphik_7126cf","size":80}
~ h1 {"family":"IBM Plex Sans","size":40} {"family":"__graphik_7126cf","size":52}
~ h2 {"family":"IBM Plex Sans","size":32} {"family":"__graphik_7126cf","size":40}
~ body {"family":"IBM Plex Sans","size":14} {"family":"__graphik_7126cf","size":16}
~ label {"family":"IBM Plex Mono","size":12} {"family":"SFMono-Regular","size":13}
radius identical
No differences.
spacing 3 changed
~ xs 4px 0px
~ sm 8px 4px
~ md 16px 12px
↻ Swap direction · Luma AI → Reddit