Diff

Dyson vs Brilliant

51 token-level differences between these two design systems.

Role tokens
Background
#ffffff #0c0e16
Text
#333333 #ffffff
Brand
#333333 #fc6e51
Border
#dcdcdc rgba(255, 255, 255, 0.08)
Display font
Dyson Futura Brilliant Sans
Body size
16px 16px
colors 45 changed
~ bg #ffffff #0c0e16
~ surface #ffffff #13151f
~ brand #333333 #fc6e51
~ brand-hover #292929 #ff8268
~ brand-pressed #1a1a1a #e25738
~ brand-deep #000000 #b8401f
~ danger #da2f47 #ff5a6d
~ link #0066cc #fc6e51
~ link-hover #006fdd #ffffff
~ success #79b928 #5ac38a
~ text #333333 #ffffff
~ text-strong #2e2e2e #ffffff
~ text-muted #666666 #a8acba
~ text-soft #999999 #7a7e8c
~ text-faint #b2b3b4 #5a5e6c
~ border #dcdcdc rgba(255, 255, 255, 0.08)
~ border-strong #b2b3b4 rgba(255, 255, 255, 0.16)
~ border-brand #333333 #fc6e51
+ bg-deep #06070d
+ bg-section #13151f
+ bg-elev #1c1f2c
+ surface-strong #1f2230
+ brand-tint rgba(252, 110, 81, 0.15)
+ selected-bg rgba(252, 110, 81, 0.15)
+ diagram-coral #fc6e51
+ diagram-yellow #ffd44d
+ diagram-cyan #5ac3e5
+ diagram-purple #b582ff
+ warning #ffd44d
+ info #5ac3e5
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
accent-magenta #c4398d
accent-gold #8a6e00
accent-yellow #ffcc01
danger-tint rgba(218, 47, 71, 0.1)
focus-ring #66afe9
success-hover #69a239
border-soft #d5d5d5
typography 5 changed
~ display {"family":"Dyson Futura","size":56} {"family":"Brilliant Sans","size":88}
~ h1 {"family":"Dyson Futura","size":44} {"family":"Brilliant Sans","size":40}
~ h2 {"family":"Dyson Futura","size":36} {"family":"Brilliant Sans","size":32}
~ body {"family":"Dyson Futura","size":16} {"family":"Brilliant Sans","size":16}
~ label {"family":"FoundryGridnik","size":11} {"family":"JetBrains Mono","size":13}
radius 1 changed
~ card 14px 12px
spacing identical
No differences.
↻ Swap direction · Brilliant → Dyson