Diff

Postmark vs Bugatti

62 token-level differences between these two design systems.

Role tokens
Background
#ffffff #000000
Text
#1c1d1f #ffffff
Brand
#ffde00 #ffffff
Border
#e5e5e2 #262626
Display font
Inter Bugatti Display
Body size
17px 16px
colors 54 changed
~ bg #ffffff #000000
~ surface #fff8d4 #141414
~ text #1c1d1f #ffffff
~ text-strong #000000 #e6e6e6
~ text-muted #5c5e63 #999999
~ brand #ffde00 #ffffff
~ link #1c4eb8 #c3d9f3
~ on-brand #1c1d1f #000000
~ border #e5e5e2 #262626
~ border-strong #cdcdc8 #3a3a3a
+ bg-deep #000000
+ surface-soft #0d0d0d
+ surface-elevated #1f1f1f
+ text-body #cccccc
+ text-muted-soft #666666
+ on-dark #ffffff
+ on-photo #ffffff
+ ring #ffffff
+ link-underline #c3d9f3
+ warning #d4a017
+ success #5fa657
+ danger #cc3333
+ info #c3d9f3
bg-soft #fafaf7
bg-cream #fdfaf0
surface-neutral #f5f5f2
surface-2 #f0f0ed
bg-dark #1c1d1f
bg-dark-2 #26272a
text-soft #8a8d93
text-faint #b3b6bc
text-on-dark #ffffff
text-on-dark-soft #c9ccd1
brand-hover #f0d000
brand-active #e6c500
brand-soft #fff8d4
brand-deep #b39600
link-hover #1a3f99
accent-blue #1c4eb8
accent-blue-soft #e6edff
accent-green #22c55e
accent-green-soft #dcfce7
accent-red #dc2626
accent-red-soft #fee2e2
accent-amber #f59e0b
border-soft #f0f0ed
border-dark #3a3b3e
shadow-soft rgba(28,29,31,0.06)
shadow-medium rgba(28,29,31,0.10)
shadow-strong rgba(28,29,31,0.18)
semantic-success #22c55e
semantic-warning #f59e0b
semantic-danger #dc2626
semantic-info #1c4eb8
typography 5 changed
~ display {"family":"Inter","size":72} {"family":"Bugatti Display","size":72}
~ h1 {"family":"Inter","size":48} {"family":"Bugatti Display","size":40}
~ h2 {"family":"Inter","size":40} {"family":"Bugatti Display","size":32}
~ body {"family":"Inter","size":17} {"family":"Bugatti Text Regular","size":16}
~ label {"family":"JetBrains Mono","size":12} {"family":"Bugatti Monospace","size":11}
radius 1 changed
~ card 12px 14px
spacing 2 changed
~ lg 32px 64px
~ xl 48px 120px
↻ Swap direction · Bugatti → Postmark