Diff

Buttondown vs Gemini (Google)

57 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #1f1f1f
Brand
#0069ff #1a73e8
Border
#e5e5e5 #dadce0
Display font
Auto Pro Google Sans Display
Body size
16px 16px
colors 49 changed
~ surface #fafafa #eef2f7
~ text #000000 #1f1f1f
~ text-strong #000000 #0f0f0f
~ text-muted #525252 #5f6368
~ text-soft #737373 #80868b
~ brand #0069ff #1a73e8
~ brand-hover #0052cc #1967d2
~ brand-soft #e6f0ff #e8f0fe
~ border #e5e5e5 #dadce0
~ border-strong #d4d4d4 #bdc1c6
~ success #15803d #188038
~ success-bg #dcfce7 #e6f4ea
~ warning #b45309 #f29900
~ warning-bg #fef3c7 #fef7e0
~ danger #dc2626 #d93025
~ danger-bg #fee2e2 #fce8e6
~ info #0069ff #1a73e8
~ info-bg #e6f0ff #e8f0fe
+ bg-soft #f8fafd
+ surface-high #dde3ea
+ surface-highest #cdd2da
+ surface-tinted #e7eef9
+ surface-violet-tinted #f3eafa
+ text-disabled #bdc1c6
+ text-on-tinted #0b57d0
+ brand-press #185abc
+ brand-deep #185abc
+ gradient-from #4285f4
+ gradient-via #9b72cb
+ gradient-to #d96570
+ gradient-via-2 #9168c0
+ accent-violet #9168c0
+ accent-coral #d96570
+ accent-soft-blue #e8f0fe
+ accent-soft-violet #f3eafa
+ border-soft #e8eaed
+ border-focus #1a73e8
+ on-tonal #0b57d0
+ on-surface-tonal #1f1f1f
+ scrim rgba(32,33,36,0.4)
+ ring-focus rgba(26,115,232,0.32)
surface-2 #f4f4f5
surface-3 #e9e9eb
text-faint #a3a3a3
brand-active #0043a8
accent #fef08a
accent-soft #fefce8
highlight #fef08a
link #0069ff
typography 5 changed
~ display {"family":"Auto Pro","size":96} {"family":"Google Sans Display","size":64}
~ h1 {"family":"Auto Pro","size":44} {"family":"Google Sans Display","size":48}
~ h2 {"family":"Auto Pro","size":32} {"family":"Google Sans Display","size":36}
~ body {"family":"Auto Pro","size":16} {"family":"Google Sans Text","size":16}
~ label {"family":"SFMono-Regular","size":13} {"family":"Google Sans Mono","size":13}
radius 1 changed
~ card 12px 24px
spacing 2 changed
~ lg 32px 24px
~ xl 64px 40px
↻ Swap direction · Gemini (Google) → Buttondown