Diff

Snowflake vs Dyson

69 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #333333
Brand
#249EDC #333333
Border
#D8DFE5 #dcdcdc
Display font
Texta Dyson Futura
Body size
16px 16px
colors 62 changed
~ surface #f5fafd #ffffff
~ text #000000 #333333
~ text-muted #9A9A9A #666666
~ brand #249EDC #333333
~ brand-deep #1A82B8 #000000
~ link #1A82B8 #0066cc
~ link-hover #0F2A3A #006fdd
~ border #D8DFE5 #dcdcdc
~ border-soft #E8EDF1 #d5d5d5
~ border-strong #B0BBC4 #b2b3b4
+ bg-near-white #fdfdfd
+ bg-callout #fbfbfb
+ bg-lightest #f3f3f3
+ bg-subtle #f0f0f0
+ bg-light #ebebeb
+ bg-product-seam #f2f2f2
+ surface-soft #fbfbfb
+ surface-callout #fbfbfb
+ brand-hover #292929
+ brand-pressed #1a1a1a
+ text-on-brand #ffffff
+ accent-magenta #c4398d
+ accent-gold #8a6e00
+ accent-yellow #ffcc01
+ danger #da2f47
+ danger-tint rgba(218, 47, 71, 0.1)
+ focus-ring #66afe9
+ success #79b928
+ success-hover #69a239
+ text-strong #2e2e2e
+ text-soft #999999
+ text-faint #b2b3b4
+ border-brand #333333
bg-surface #f5fafd
bg-soft #eaf4fb
bg-feature #dfeff9
bg-deep #0F2A3A
bg-midnight #091C28
bg-ink #000000
text-charcoal #111111
text-slate #2A2A2A
text-steel #444444
text-stone #6B6B6B
text-on-deep #ffffff
text-on-deep-muted #B6D2E2
brand-light #45AEE3
brand-bright #3DB5E8
brand-dark #0F2A3A
brand-soft #C6E6F6
brand-wash #DFEFF9
brand-mid #6AC4EA
on-brand-deep #ffffff
accent-coral #FF7A59
accent-violet #7B61FF
accent-emerald #16A672
accent-amber #F5B400
border-on-deep #1B3F55
semantic-success #16A672
semantic-warning-bg #FFF6E0
semantic-warning-text #8A6A1A
semantic-error #D8333C
semantic-info #1A82B8
typography 5 changed
~ display {"family":"Texta","size":72} {"family":"Dyson Futura","size":56}
~ h1 {"family":"Texta","size":40} {"family":"Dyson Futura","size":44}
~ h2 {"family":"Texta","size":32} {"family":"Dyson Futura","size":36}
~ body {"family":"Texta","size":16} {"family":"Dyson Futura","size":16}
~ label {"family":"JetBrains Mono","size":11} {"family":"FoundryGridnik","size":11}
radius 2 changed
~ button 12px 8px
~ card 16px 14px
spacing identical
No differences.
↻ Swap direction · Dyson → Snowflake