Diff

Aave vs SKIMS

46 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#211d1d #2d2a26
Brand
#978fff #2d2a26
Border
#e8e6ec #e5e5eb
Display font
Aave Repro Tstar Pro Headline
Body size
16px 16px
colors 40 changed
~ bg-soft #f7f6ff #f7f7f8
~ surface-soft #faf9ff #f7f7f8
~ brand #978fff #2d2a26
~ brand-hover #857cf5 #1f1d1b
~ text #211d1d #2d2a26
~ text-strong #000000 #1f1d1b
~ text-faint #c4c0c2 #9a9db1
~ link #5b4fee #2d2a26
~ link-hover #5448d6 #1f1d1b
~ border #e8e6ec #e5e5eb
~ border-strong #d5d2dd #dbdde4
~ success #1bbf8a #e6fbf0
~ warning #f5b948 #fffaeb
~ danger #f0506e #fff0f0
~ info #5b4fee #f0f7ff
+ bg-deeper #f4f4f6
+ hero-dark #1f1d1b
+ text-secondary #676986
+ text-on-hero #f6f6f6
+ accent-teal #0e7a82
+ accent-teal-bright #00caaa
+ border-active #676986
+ star #2d2a26
+ star-empty #e5e5e5
bg-lavender #f1eeff
surface-strong #f1eeff
brand-pressed #6f63ff
brand-deep #5b4fee
brand-strong #5448d6
brand-tint #ece9ff
brand-soft #c9c3ff
text-muted #5c5658
text-soft #8a8488
selected-bg #ece9ff
border-soft #f2f1f6
border-brand #978fff
gradient-pink #ffb8e6
gradient-peach #ffd6b8
gradient-mint #b8f0d6
gradient-sky #b8d6ff
typography 4 changed
~ display {"family":"Aave Repro","size":88} {"family":"Tstar Pro Headline","size":80}
~ h1 {"family":"Aave Repro","size":72} {"family":"Tstar Pro Headline","size":48}
~ h2 {"family":"Aave Repro","size":48} {"family":"Tstar Pro Headline","size":32}
~ body {"family":"Aave Repro","size":16} {"family":"Inter","size":16}
radius 2 changed
~ button 12px 2px
~ card 16px 14px
spacing identical
No differences.
↻ Swap direction · SKIMS → Aave