Diff

Nintendo vs Cloudinary

61 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#1f1f1f #0d152e
Brand
#e60012 #3448c5
Border
#e5e5e5 #dbe0eb
Display font
Nintendo Sans Inter Display
Body size
16px 16px
colors 50 changed
~ bg-soft #f5f5f5 #f5f7fb
~ surface #ffffff #f5f7fb
~ brand #e60012 #3448c5
~ brand-hover #cc0010 #2b3da8
~ brand-active #a8000d #23328e
~ brand-deep #8a000a #1a266b
~ text #1f1f1f #0d152e
~ text-muted #5a5a5a #5a6080
~ text-faint #bcbcbc #8c91a8
~ link #0066cc #3448c5
~ link-hover #cc0010 #2b3da8
~ border #e5e5e5 #dbe0eb
~ border-strong #cccccc #a8b0c4
~ border-soft #f0f0f0 #e9ecf3
~ success #00a345 #3fc998
~ warning #ff8c00 #f5b324
~ danger #e60012 #ff5e58
~ info #0066cc #3448c5
+ bg-elev #ffffff
+ bg-strong #e9ecf3
+ bg-dark #0d152e
+ bg-dark-elev #162042
+ text-body #2c3354
+ brand-soft #e1e5f7
+ on-dark #ffffff
+ accent-coral #ff5e58
+ accent-coral-soft #fde0de
+ accent-amber #f5b324
+ accent-amber-soft #fdedc6
+ accent-mint #3fc998
+ accent-mint-soft #d6f3e7
+ shadow-tint rgba(13, 21, 46, 0.06)
+ shadow-deep rgba(13, 21, 46, 0.18)
+ code-bg #0d152e
+ code-text #d9e0f5
+ code-keyword #7eb6ff
+ code-string #ffb074
+ code-comment #8c91a8
+ selection rgba(52, 72, 197, 0.18)
+ ring rgba(52, 72, 197, 0.45)
bg-warm #fff8f0
bg-tinted #ffeeee
surface-soft #fafafa
surface-strong #f5f5f5
brand-tint #ffeeee
text-strong #000000
text-soft #8a8a8a
text-on-brand #ffffff
selected-bg #ffeeee
border-brand #e60012
typography 4 changed
~ display {"family":"Nintendo Sans","size":80} {"family":"Inter Display","size":76}
~ h1 {"family":"Nintendo Sans","size":36} {"family":"Inter Display","size":40}
~ h2 {"family":"Nintendo Sans","size":28} {"family":"Inter Display","size":32}
~ label {"family":"SFMono-Regular","size":13} {"family":"JetBrains Mono","size":16}
radius 2 changed
~ button 12px 8px
~ card 16px 12px
spacing 5 changed
~ xs 0px 4px
~ sm 4px 8px
~ md 12px 16px
~ lg 24px 32px
~ xl 40px 48px
↻ Swap direction · Cloudinary → Nintendo