Diff

Kraken vs Semafor

80 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #f8f5d7

Text

#101114 → #1f1d1a

Brand

#7132f5 → #3a6d78

Border

#dedee5 → #d8d0a8

Display font

Kraken-Brand → FeatureFlatHeadline

Body size

16px → 18px

colors 68 changed

~ bg #ffffff → #f8f5d7

~ bg-dark #101114 → #1f1d1a

~ text #101114 → #1f1d1a

~ text-muted #9497a9 → #5a5651

~ brand #7132f5 → #3a6d78

~ brand-deep #5b1ecf → #1a3a44

~ border #dedee5 → #d8d0a8

~ border-soft rgba(104,107,130,0.24) → #e8e2c2

+ bg-section #f8f5d7

+ bg-section-flagship #f8f5d7

+ bg-section-africa #f8f5d7

+ bg-darkest #0d0c0a

+ surface #f8f5d7

+ surface-paper #ffffff

+ surface-soft #f5f1c9

+ surface-strong #e8e3b5

+ surface-quote #fefbe8

+ surface-card-elevated #fcfae0

+ text-strong #000000

+ text-soft #7a756f

+ text-faint #a39e96

+ text-on-teal #ffffff

+ text-on-dark #f8f5d7

+ brand-hover #2d5a64

+ brand-active #1f4750

+ brand-soft #cce0e4

+ link #3a6d78

+ link-hover #2d5a64

+ link-visited #7a756f

+ on-dark #f8f5d7

+ border-strong #7a756f

+ border-rule #1f1d1a

+ border-teal #3a6d78

+ shadow-card rgba(31,29,26,0.06)

+ shadow-elev rgba(31,29,26,0.1)

+ shadow-modal rgba(31,29,26,0.3)

+ scrim rgba(31,29,26,0.6)

+ success #2a8a4f

+ success-soft #dff0e7

+ warning #cc7a00

+ warning-soft #fde9cc

+ danger #a62d2d

+ danger-soft #f0d4d4

+ info #3a6d78

+ info-soft #cce0e4

+ flag-flagship #3a6d78

+ flag-africa #c46b3a

+ flag-principals #3a6d78

+ flag-net-zero #2a8a4f

+ flag-tech #5a4a8a

+ flag-business #3a6d78

+ flag-media #a62d2d

+ flag-gulf #c46b3a

− bg-soft #fafafa

− bg-card #ffffff

− 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)

typography 5 changed

~ display {"family":"Kraken-Brand","size":48} → {"family":"FeatureFlatHeadline","size":72}

~ h1 {"family":"Kraken-Brand","size":40} → {"family":"FeatureFlatHeadline","size":28}

~ h2 {"family":"Kraken-Brand","size":32} → {"family":"FeatureFlatHeadline","size":22}

~ body {"family":"Kraken-Product","size":16} → {"family":"FeatureFlatText","size":18}

~ label {"family":"JetBrains Mono","size":11} → {"family":"Courier New","size":11}

radius 2 changed

~ button 8px → 4px

~ card 12px → 6px

spacing 5 changed

~ xs 4px → 2px

~ sm 8px → 4px

~ md 16px → 12px

~ lg 32px → 24px

~ xl 64px → 40px

↻ Swap direction · Semafor → Kraken