Diff

Ritual vs Nuxt

57 token-level differences between these two design systems.

Role tokens
Background
#ffffff #020420
Text
#142b6f #ffffff
Brand
#142b6f #00dc82
Border
#dfe3ec rgba(255, 255, 255, 0.08)
Display font
CircularXX DM Sans
Body size
16px 16px
colors 48 changed
~ bg #ffffff #020420
~ bg-soft #f7f8fa #0a0d2a
~ surface #ffffff #10142e
~ brand #142b6f #00dc82
~ brand-hover #0f2154 #00b86a
~ brand-soft #e7eaf3 #003b22
~ on-brand #ffffff #020420
~ text #142b6f #ffffff
~ text-strong #0f2154 #ffffff
~ text-muted #5a6680 #a0a8b8
~ border #dfe3ec rgba(255, 255, 255, 0.08)
~ border-strong #c3c9d8 rgba(255, 255, 255, 0.15)
~ warning #e6bd00 #fbbf24
+ bg-deep #050729
+ surface-strong #1a1f42
+ text-medium #dbdfe9
+ text-soft #7c8497
+ text-faint #525a6c
+ brand-deep #008a4f
+ brand-bright #80eeb4
+ glow rgba(0, 220, 130, 0.40)
+ glow-soft rgba(0, 220, 130, 0.18)
+ link #00dc82
+ link-hover #80eeb4
+ selected-bg rgba(0, 220, 130, 0.10)
+ disabled #525a6c
+ border-soft rgba(255, 255, 255, 0.04)
+ border-brand rgba(0, 220, 130, 0.40)
+ success-bg rgba(0, 220, 130, 0.12)
+ success-text #80eeb4
+ warning-bg rgba(251, 191, 36, 0.12)
+ warning-text #fcd34d
+ danger-bg rgba(239, 68, 68, 0.12)
+ danger-text #fca5a5
+ info-bg rgba(96, 165, 250, 0.12)
+ info-text #93c5fd
bg-deeper #eef0f5
bg-navy #142b6f
bg-cream #fbf7ee
surface-soft #f7f8fa
accent-yellow #ffd200
accent-yellow-soft #fff3bf
accent-yellow-deep #e6bd00
on-accent #142b6f
border-navy #142b6f
success #1f8a5b
danger #c2362b
info #142b6f
typography 5 changed
~ display {"family":"CircularXX","size":80} {"family":"DM Sans","size":88}
~ h1 {"family":"CircularXX","size":44} {"family":"DM Sans","size":56}
~ h2 {"family":"CircularXX","size":34} {"family":"DM Sans","size":44}
~ body {"family":"CircularXX","size":16} {"family":"Inter","size":16}
~ label {"family":"SFMono-Regular","size":13} {"family":"DM Mono","size":12}
radius 1 changed
~ button 12px 8px
spacing 3 changed
~ xs 0px 2px
~ lg 32px 24px
~ xl 64px 40px
↻ Swap direction · Nuxt → Ritual