Diff

Roblox vs Biome

93 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#191b1f #353841
Brand
#ed1d24 #0065da
Border
#e4e7eb #e4e7ec
Display font
Builder Sans Inter
Body size
14px 16px
colors 83 changed
~ surface-soft #f7f8fa #fbfcfd
~ text #191b1f #353841
~ text-strong #000000 #17181c
~ text-muted #5c6770 #6b7280
~ text-faint #8b96a0 #9ca3af
~ brand #ed1d24 #0065da
~ link-hover #d11017 #0052b3
~ border #e4e7eb #e4e7ec
~ border-strong #ed1d24 #d0d5dd
+ bg-soft #f7f8fa
+ bg-strong #eef0f3
+ brand-strong #0052b3
+ brand-soft #e6f0fc
+ brand-faint #f2f7fe
+ accent #0065da
+ accent-soft #e6f0fc
+ link #0065da
+ selected #e6f0fc
+ disabled-bg #eef0f3
+ disabled-text #9ca3af
+ border-subtle #f0f1f4
+ divider #e4e7ec
+ inverse-bg #17181c
+ inverse-text #e4e7ec
+ inverse-text-muted #9ca3af
+ shadow-ambient rgba(16, 24, 40, 0.04)
+ shadow-standard rgba(16, 24, 40, 0.08)
+ shadow-brand rgba(0, 101, 218, 0.18)
+ success-bg #ecfdf3
+ success-text #027a48
+ success-border #abefc6
+ warning-bg #fffaeb
+ warning-text #b54708
+ warning-border #fedf89
+ danger-bg #fef3f2
+ danger-text #b42318
+ danger-border #fecdca
+ info-bg #e6f0fc
+ info-text #0052b3
+ info-border #b3d4f5
+ on-inverse #e4e7ec
bg-alt #f7f8fa
bg-deep #ffffff
surface-strong #eaecf0
surface-elevated #ffffff
surface-dark #191b1f
surface-dark-soft #232529
text-soft #3b4248
text-link #ed1d24
text-disabled #a8b3bd
text-on-dark #ffffff
text-on-dark-soft #cdd2d8
text-on-dark-muted #9ba3ab
brand-hover #d11017
brand-active #a30c11
brand-pale #fcd1d3
brand-deep #7a0a0d
robux-green #00b06f
robux-green-hover #008f59
robux-green-deep #006d44
free-badge-blue #00a2ff
premium-purple #b08aff
premium-purple-deep #7e5cd6
builders-club #ffd000
online-green #00b06f
voice-blue #00a2ff
link-default #ed1d24
link-visited #ed1d24
border-soft #eaecf0
border-input #cdd2d8
scrim rgba(0,0,0,0.6)
shadow-card rgba(25,27,31,0.08)
shadow-elev rgba(25,27,31,0.16)
shadow-modal rgba(25,27,31,0.24)
experience-thumb-1 #0095da
experience-thumb-2 #ff8a00
experience-thumb-3 #9b30ff
rating-thumbs-up #00b06f
rating-thumbs-down #5c6770
success #00b06f
warning #ff8a00
danger #ed1d24
info #00a2ff
typography 5 changed
~ display {"family":"Builder Sans","size":56} {"family":"Inter","size":80}
~ h1 {"family":"Builder Sans","size":40} {"family":"Inter","size":64}
~ h2 {"family":"Builder Sans","size":32} {"family":"Inter","size":40}
~ body {"family":"Builder Sans","size":14} {"family":"Inter","size":16}
~ label {"family":"Source Code Pro","size":11} {"family":"JetBrains Mono","size":13}
radius 1 changed
~ button 8px 5px
spacing 4 changed
~ xs 4px 0px
~ sm 8px 4px
~ md 16px 12px
~ xl 48px 64px
↻ Swap direction · Biome → Roblox