Diff

Calm vs Kraken

61 token-level differences between these two design systems.

Role tokens
Background
#f6f1e6 #ffffff
Text
#1d2629 #101114
Brand
#1d4763 #7132f5
Border
#d8d2c4 #dedee5
Display font
Visby Round Kraken-Brand
Body size
16px 16px
colors 50 changed
~ bg #f6f1e6 #ffffff
~ bg-soft #fbf8f0 #fafafa
~ brand #1d4763 #7132f5
~ brand-deep #091e29 #5b1ecf
~ on-brand #f6f1e6 #ffffff
~ text #1d2629 #101114
~ text-muted #5a6770 #9497a9
~ border #d8d2c4 #dedee5
~ border-soft #e8e3d6 rgba(104,107,130,0.24)
+ 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-subtle rgba(133,91,251,0.16)
+ semantic-success #149e61
+ semantic-success-dark #026b3f
+ semantic-success-bg rgba(20,158,97,0.16)
+ semantic-error #e23b4a
+ semantic-warning #df6500
+ focus-ring rgba(113,50,245,0.30)
bg-deeper #ede5d3
bg-warm #f9f4ea
surface #ffffff
surface-soft #fbf8f0
surface-cream #f0e9d8
brand-hover #163847
brand-pressed #102835
brand-tint #dde6ed
forest #2a4a3e
forest-deep #1c3a30
forest-soft #dce5e0
text-strong #091e29
text-soft #8a949c
text-faint #bcc4ca
text-on-brand #f6f1e6
link #1d4763
link-hover #2a4a3e
selected-bg #dde6ed
border-strong #bcb6a8
border-brand #1d4763
amber #cb9c45
rose #c47e7e
success #2a4a3e
warning #cb9c45
danger #a35353
info #1d4763
typography 5 changed
~ display {"family":"Visby Round","size":72} {"family":"Kraken-Brand","size":48}
~ h1 {"family":"Visby Round","size":36} {"family":"Kraken-Brand","size":40}
~ h2 {"family":"Visby Round","size":28} {"family":"Kraken-Brand","size":32}
~ body {"family":"Visby Round","size":16} {"family":"Kraken-Product","size":16}
~ label {"family":"SFMono-Regular","size":12} {"family":"JetBrains Mono","size":11}
radius 2 changed
~ button 12px 8px
~ card 16px 12px
spacing 4 changed
~ xs 0px 4px
~ md 24px 16px
~ lg 48px 32px
~ xl 80px 64px
↻ Swap direction · Kraken → Calm