Diff

Convex vs Kraken

57 token-level differences between these two design systems.

Role tokens
Background
#f6eedb #ffffff
Text
#141414 #101114
Brand
#1a1a1a #7132f5
Border
rgba(20,20,20,0.12) #dedee5
Display font
gtAmerica Kraken-Brand
Body size
16px 16px
colors 51 changed
~ bg #f6eedb #ffffff
~ text #141414 #101114
~ text-muted #555555 #9497a9
~ brand #1a1a1a #7132f5
~ border rgba(20,20,20,0.12) #dedee5
~ focus-ring #1a1a1a rgba(113,50,245,0.30)
~ on-brand #fdf4cc #ffffff
+ bg-soft #fafafa
+ bg-card #ffffff
+ bg-dark #101114
+ surface-cool rgba(148,151,169,0.08)
+ surface-purple-subtle rgba(133,91,251,0.16)
+ text-body #33363f
+ text-mute-strong #686b82
+ text-mute-soft #484b5e
+ brand-dark #5741d8
+ brand-deep #5b1ecf
+ brand-subtle rgba(133,91,251,0.16)
+ border-soft rgba(104,107,130,0.24)
+ semantic-success #149e61
+ semantic-success-dark #026b3f
+ semantic-success-bg rgba(20,158,97,0.16)
+ semantic-error #e23b4a
+ semantic-warning #df6500
bg-alt #fbf7ec
bg-warm #efe5cd
surface #1a1a1a
surface-deep #141414
text-strong #000000
text-faint #6b6b6b
text-on-dark #ffffff
text-on-brand #fdf4cc
brand-hover #292929
accent #fdf4cc
accent-soft #faecae
on-white #292929
pill-white #ffffff
fill-subtle rgba(0,0,0,0.05)
fill-subtle-inv rgba(255,255,255,0.05)
border-strong rgba(20,20,20,0.22)
border-on-dark rgba(255,255,255,0.12)
focus-ring-dark #fdf4cc
selection-bg #1a1a1a
selection-text #fdf4cc
shadow rgba(20,20,20,0.08)
link #141414
link-hover #1a1a1a
success #3f7d4e
warning #b8860b
danger #9b3232
info #3a5a8c
typography 5 changed
~ display {"family":"gtAmerica","size":72} {"family":"Kraken-Brand","size":48}
~ h1 {"family":"gtAmerica","size":42} {"family":"Kraken-Brand","size":40}
~ h2 {"family":"gtAmerica","size":32} {"family":"Kraken-Brand","size":32}
~ body {"family":"gtAmerica","size":16} {"family":"Kraken-Product","size":16}
~ label {"family":"GT America Mono","size":13} {"family":"JetBrains Mono","size":11}
radius 1 changed
~ card 24px 12px
spacing identical
No differences.
↻ Swap direction · Kraken → Convex