Diff

Paddle vs Tinybird

63 token-level differences between these two design systems.

Role tokens
Background
#0e1414 #0a0a0a
Text
#0e1414 #ffffff
Brand
#e4e1d1 #27f795
Border
#d9d3c9 #262626
Display font
serrifCondensed Inter
Body size
16px 16px
colors 59 changed
~ bg #0e1414 #0a0a0a
~ surface #fcfcfc #151515
~ text #0e1414 #ffffff
~ brand #e4e1d1 #27f795
~ on-brand #1c1a15 #0a0a0a
~ border #d9d3c9 #262626
~ success #108c3d #27f795
~ warning #9b6829 #fc9f5b
~ danger #b42318 #ff8389
+ bg-deep #000000
+ surface-soft #101010
+ surface-elevated #1e1e1e
+ surface-mint-tint rgba(255,255,255,0.05)
+ text-strong #e6e6e6
+ text-body #b0b0b0
+ text-muted #888888
+ text-faint #5a5a5a
+ brand-dark #008060
+ brand-active #1fd87f
+ brand-disabled #16402e
+ on-brand-dark #ffffff
+ on-dark #ffffff
+ link #27f795
+ link-hover #1fd87f
+ border-strong #383838
+ border-mint #27f795
+ shadow-color rgba(0,0,0,0.6)
+ shadow-glow-mint rgba(39,247,149,0.18)
+ code-text #ffffff
+ code-invocation #27f795
+ code-success #27f795
+ code-error #ff8389
+ code-identifier #00c1ff
+ code-value #fc9f5b
+ code-diff-added #008060
+ info #00c1ff
bg-canvas #0e1414
surface-warm #f9f8f7
surface-sand #ebe7df
surface-sand-deep #e8e6e2
surface-cream #e4e1d1
surface-clay #d6cbb6
surface-ink #1c1a15
text-ink #1c1a15
text-slate #2b3033
text-on-dark #fcfcfc
text-on-dark-soft rgba(252,252,252,0.8)
text-on-dark-muted rgba(252,252,252,0.6)
brand-cream #e4e1d1
brand-ink #1c1a15
on-brand-ink #fcfcfc
accent #ffd400
accent-yellow #ffd400
border-sand #ebe7df
border-ink #0e1414
border-on-dark rgba(252,252,252,0.1)
border-faint rgba(252,252,252,0.02)
link-on-dark rgba(252,252,252,0.6)
link-on-light #1c1a15
typography 3 changed
~ display {"family":"serrifCondensed","size":72} {"family":"Inter","size":80}
~ h1 {"family":"serrifCondensed","size":48} {"family":"Inter","size":64}
~ h2 {"family":"serrifCondensed","size":40} {"family":"Inter","size":44}
radius 1 changed
~ button 10px 8px
spacing identical
No differences.
↻ Swap direction · Tinybird → Paddle