Diff

Deno vs Brilliant

75 token-level differences between these two design systems.

Role tokens
Background
#ffffff #0c0e16
Text
#000000 #ffffff
Brand
#70ffaf #fc6e51
Border
#e1e3e7 rgba(255, 255, 255, 0.08)
Display font
Inter Display Brilliant Sans
Body size
17px 16px
colors 68 changed
~ bg #ffffff #0c0e16
~ surface #ffffff #13151f
~ surface-strong #f4f5f7 #1f2230
~ text #000000 #ffffff
~ text-strong #000000 #ffffff
~ text-muted #5b5e64 #a8acba
~ text-faint #8c8f95 #5a5e6c
~ brand #70ffaf #fc6e51
~ brand-deep #10b981 #b8401f
~ link #0066cc #fc6e51
~ link-hover #004999 #ffffff
~ border #e1e3e7 rgba(255, 255, 255, 0.08)
~ border-strong #c3c6ca rgba(255, 255, 255, 0.16)
~ on-brand #000000 #ffffff
+ bg-deep #06070d
+ bg-section #13151f
+ bg-elev #1c1f2c
+ brand-hover #ff8268
+ brand-pressed #e25738
+ brand-tint rgba(252, 110, 81, 0.15)
+ text-soft #7a7e8c
+ text-on-brand #ffffff
+ selected-bg rgba(252, 110, 81, 0.15)
+ border-brand #fc6e51
+ diagram-coral #fc6e51
+ diagram-yellow #ffd44d
+ diagram-cyan #5ac3e5
+ diagram-purple #b582ff
+ success #5ac38a
+ warning #ffd44d
+ danger #ff5a6d
+ info #5ac3e5
bg-soft #f8f9fa
bg-strong #f4f5f7
surface-muted #e8eaed
text-disabled #b8babf
brand-strong #34d399
brand-soft #dcfce7
brand-faint #f0fdf4
accent #000000
accent-warm #f59e0b
accent-warm-soft #fef3c7
link-visited #553c9a
selected #dcfce7
disabled-bg #f4f5f7
disabled-text #b8babf
border-subtle #eef0f2
divider #e8eaed
inverse-bg #0d1117
inverse-text #e6e6e6
inverse-text-muted #8b949e
inverse-border #30363d
shadow-soft rgba(0, 0, 0, 0.04)
shadow-standard rgba(0, 0, 0, 0.08)
shadow-mint rgba(112, 255, 175, 0.32)
success-bg #dcfce7
success-text #166534
success-border #86efac
warning-bg #fef3c7
warning-text #854d0e
warning-border #fbbf24
danger-bg #fee2e2
danger-text #991b1b
danger-border #fca5a5
info-bg #dbeafe
info-text #1e3a8a
info-border #93c5fd
on-accent-warm #000000
typography 5 changed
~ display {"family":"Inter Display","size":88} {"family":"Brilliant Sans","size":88}
~ h1 {"family":"Inter Display","size":48} {"family":"Brilliant Sans","size":40}
~ h2 {"family":"Inter Display","size":36} {"family":"Brilliant Sans","size":32}
~ body {"family":"Inter","size":17} {"family":"Brilliant Sans","size":16}
~ label {"family":"JetBrains Mono","size":11} {"family":"JetBrains Mono","size":13}
radius 1 changed
~ button 6px 8px
spacing 1 changed
~ xs 2px 0px
↻ Swap direction · Brilliant → Deno