Diff

Nintendo vs Inngest

54 token-level differences between these two design systems.

Role tokens
Background
#ffffff #0c0a09
Text
#1f1f1f #f6f6f6
Brand
#e60012 #cbb26a
Border
#e5e5e5 #27241f
Display font
Nintendo Sans Whyte
Body size
16px 16px
colors 47 changed
~ bg #ffffff #0c0a09
~ surface #ffffff #16130f
~ brand #e60012 #cbb26a
~ brand-hover #cc0010 #d8c285
~ on-brand #ffffff #1a161c
~ text #1f1f1f #f6f6f6
~ text-muted #5a5a5a #a8a39b
~ text-soft #8a8a8a #7c7770
~ text-faint #bcbcbc #57534e
~ link #0066cc #4078f2
~ border #e5e5e5 #27241f
~ border-strong #cccccc #ffffff1f
~ border-soft #f0f0f0 #ffffff0f
~ border-brand #e60012 #cbb26a66
~ success #00a345 #3ecf8e
~ warning #ff8c00 #cbb26a
~ danger #e60012 #ef4444
~ info #0066cc #4078f2
+ bg-deep #070605
+ surface-alt #1a161c
+ surface-muted #211c16
+ brand-pressed #b89a55
+ brand-soft #cbb26a1f
+ accent #cbb26a
+ selected #cbb26a26
+ disabled #211c16
+ disabled-text #6b665f
+ text-heading #fafaf9
+ shadow-ambient rgba(0,0,0,0.4)
+ shadow-standard rgba(0,0,0,0.55)
+ shadow-elevated rgba(0,0,0,0.7)
+ success-bg #0f2a1d
+ warning-bg #2a2310
+ danger-bg #2a1414
+ info-bg #101a2e
bg-soft #f5f5f5
bg-warm #fff8f0
bg-tinted #ffeeee
surface-soft #fafafa
surface-strong #f5f5f5
brand-active #a8000d
brand-deep #8a000a
brand-tint #ffeeee
text-strong #000000
text-on-brand #ffffff
link-hover #cc0010
selected-bg #ffeeee
typography 4 changed
~ display {"family":"Nintendo Sans","size":80} {"family":"Whyte","size":84}
~ h1 {"family":"Nintendo Sans","size":36} {"family":"Whyte","size":72}
~ h2 {"family":"Nintendo Sans","size":28} {"family":"Whyte","size":40}
~ body {"family":"Inter","size":16} {"family":"Circular XX","size":16}
radius 3 changed
~ button 12px 0px
~ card 16px 0px
~ pill 9999px 0px
spacing identical
No differences.
↻ Swap direction · Inngest → Nintendo