Diff

Prisma vs Biome

48 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#1d242f #353841
Brand
#14b8a6 #0065da
Border
#e2e8f0 #e4e7ec
Display font
Mona Sans VF Inter
Body size
16px 16px
colors 42 changed
~ surface #f9fafb #ffffff
~ text #1d242f #353841
~ brand #14b8a6 #0065da
~ border #e2e8f0 #e4e7ec
+ bg-soft #f7f8fa
+ bg-strong #eef0f3
+ surface-soft #fbfcfd
+ text-strong #17181c
+ text-muted #6b7280
+ text-faint #9ca3af
+ brand-strong #0052b3
+ brand-soft #e6f0fc
+ brand-faint #f2f7fe
+ accent #0065da
+ accent-soft #e6f0fc
+ link #0065da
+ link-hover #0052b3
+ selected #e6f0fc
+ disabled-bg #eef0f3
+ disabled-text #9ca3af
+ border-strong #d0d5dd
+ 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
typography 4 changed
~ display {"family":"Mona Sans VF","size":80} {"family":"Inter","size":80}
~ h1 {"family":"Mona Sans VF","size":64} {"family":"Inter","size":64}
~ h2 {"family":"Mona Sans VF","size":36} {"family":"Inter","size":40}
~ label {"family":"SFMono-Regular","size":13} {"family":"JetBrains Mono","size":13}
radius 2 changed
~ button 6px 5px
~ card 16px 12px
spacing identical
No differences.
↻ Swap direction · Biome → Prisma