Diff

Databricks vs Brilliant

60 token-level differences between these two design systems.

Role tokens
Background
#ffffff #0c0e16
Text
#1b3139 #ffffff
Brand
#EB1600 #fc6e51
Border
#dde2e6 rgba(255, 255, 255, 0.08)
Display font
DM Sans Brilliant Sans
Body size
16px 16px
colors 56 changed
~ bg #ffffff #0c0e16
~ bg-deep #0a0a0a #06070d
~ surface #f6f7f9 #13151f
~ text #1b3139 #ffffff
~ text-muted #a3b1bc #a8acba
~ brand #EB1600 #fc6e51
~ brand-deep #E0250F #b8401f
~ brand-pressed #B71D08 #e25738
~ link #0a5fb8 #fc6e51
~ link-hover #073f7c #ffffff
~ border #dde2e6 rgba(255, 255, 255, 0.08)
~ border-strong #bcc5cd rgba(255, 255, 255, 0.16)
+ bg-section #13151f
+ bg-elev #1c1f2c
+ surface-strong #1f2230
+ brand-hover #ff8268
+ brand-tint rgba(252, 110, 81, 0.15)
+ text-strong #ffffff
+ text-soft #7a7e8c
+ text-faint #5a5e6c
+ 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-dark #1b3139
bg-surface #f6f7f9
bg-soft #fafbfc
bg-feature #fff4f1
text-charcoal #243640
text-slate #445566
text-steel #5e7382
text-stone #7a8b97
on-dark #ffffff
on-dark-muted #a3b1bc
brand-dark #9B1A07
brand-soft #ffe1da
brand-teal-deep #1b3139
brand-teal #243d48
brand-teal-light #2f5260
accent-orange #FF8B4A
accent-amber #FFB400
accent-violet #8B5CF6
accent-cyan #00A1C9
border-soft #eceff2
border-dark #2f5260
semantic-success #00875A
semantic-warning-bg #fff7e0
semantic-warning-text #7a5a00
semantic-error #D7263D
semantic-info #0a5fb8
typography 4 changed
~ display {"family":"DM Sans","size":80} {"family":"Brilliant Sans","size":88}
~ h1 {"family":"DM Sans","size":48} {"family":"Brilliant Sans","size":40}
~ h2 {"family":"DM Sans","size":36} {"family":"Brilliant Sans","size":32}
~ body {"family":"DM Sans","size":16} {"family":"Brilliant Sans","size":16}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Brilliant → Databricks