Diff

Readwise vs Semafor

77 token-level differences between these two design systems.

Role tokens

Background

#fdf7ef → #f8f5d7

Text

#2c2418 → #1f1d1a

Brand

#ff7a45 → #3a6d78

Border

#e5d9c4 → #d8d0a8

Display font

Tiempos Headline → FeatureFlatHeadline

Body size

17px → 18px

colors 65 changed

~ bg #fdf7ef → #f8f5d7

~ surface #f5ecdf → #f8f5d7

~ surface-soft #fbf3e7 → #f5f1c9

~ text #2c2418 → #1f1d1a

~ text-strong #1a1308 → #000000

~ text-muted #6b5e4a → #5a5651

~ text-soft #9b8d75 → #7a756f

~ text-faint #b6a888 → #a39e96

~ text-on-dark #fdf7ef → #f8f5d7

~ brand #ff7a45 → #3a6d78

~ brand-hover #e8602a → #2d5a64

~ brand-active #cc4a1a → #1f4750

~ brand-deep #a83a14 → #1a3a44

~ brand-soft #ffe4d4 → #cce0e4

~ link #ff7a45 → #3a6d78

~ link-hover #cc4a1a → #2d5a64

~ link-visited #7d3c84 → #7a756f

~ border #e5d9c4 → #d8d0a8

~ border-soft #f0e7d5 → #e8e2c2

~ border-strong #d4c4a8 → #7a756f

~ scrim rgba(44,36,24,0.45) → rgba(31,29,26,0.6)

~ shadow-card rgba(60,40,15,0.10) → rgba(31,29,26,0.06)

~ shadow-elev rgba(60,40,15,0.18) → rgba(31,29,26,0.1)

~ success #3d6b4a → #2a8a4f

~ warning #c97a1f → #cc7a00

~ warning-soft #fdf0d8 → #fde9cc

~ danger #b94326 → #a62d2d

~ info #4d6580 → #3a6d78

+ bg-section #f8f5d7

+ bg-section-flagship #f8f5d7

+ bg-section-africa #f8f5d7

+ bg-dark #1f1d1a

+ bg-darkest #0d0c0a

+ surface-strong #e8e3b5

+ surface-quote #fefbe8

+ surface-card-elevated #fcfae0

+ text-on-teal #ffffff

+ on-dark #f8f5d7

+ border-rule #1f1d1a

+ border-teal #3a6d78

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

+ success-soft #dff0e7

+ danger-soft #f0d4d4

+ 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-alt #ffffff

− bg-deep #f9f0e0

− surface-warm #f5ecdf

− surface-deep #e8d9c2

− text-on-brand #ffffff

− brand-paler #fff0e6

− accent #3d6b4a

− accent-soft #dfeae0

− accent-deep #27432f

− highlight-bg #fff4d6

− highlight-text #2c2418

− underline #ff7a45

− shadow-warm rgba(60,40,15,0.05)

typography 5 changed

~ display {"family":"Tiempos Headline","size":68} → {"family":"FeatureFlatHeadline","size":72}

~ h1 {"family":"Tiempos Headline","size":60} → {"family":"FeatureFlatHeadline","size":28}

~ h2 {"family":"Tiempos Headline","size":40} → {"family":"FeatureFlatHeadline","size":22}

~ body {"family":"Inter","size":17} → {"family":"FeatureFlatText","size":18}

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

radius 2 changed

~ button 10px → 4px

~ card 16px → 6px

spacing 5 changed

~ xs 4px → 2px

~ sm 8px → 4px

~ md 16px → 12px

~ lg 32px → 24px

~ xl 48px → 40px

↻ Swap direction · Semafor → Readwise