Diff

OpenSea vs Readwise

72 token-level differences between these two design systems.

Role tokens
Background
#04111d #fdf7ef
Text
#ffffff #2c2418
Brand
#2081e2 #ff7a45
Border
#1f2937 #e5d9c4
Display font
Inter Tiempos Headline
Body size
14px 17px
colors 63 changed
~ bg #04111d #fdf7ef
~ text #ffffff #2c2418
~ text-muted #8a939b #6b5e4a
~ brand #2081e2 #ff7a45
~ brand-hover #1868b7 #e8602a
~ brand-active #1259a0 #cc4a1a
~ brand-soft #2081e21a #ffe4d4
~ border #1f2937 #e5d9c4
~ border-soft #151b25 #f0e7d5
~ border-strong #2c3a4d #d4c4a8
~ scrim rgba(4,17,29,0.70) rgba(44,36,24,0.45)
~ link #2081e2 #ff7a45
~ link-hover #5fa3eb #cc4a1a
+ bg-alt #ffffff
+ bg-deep #f9f0e0
+ surface #f5ecdf
+ surface-soft #fbf3e7
+ surface-warm #f5ecdf
+ surface-deep #e8d9c2
+ surface-paper #ffffff
+ text-strong #1a1308
+ text-soft #9b8d75
+ text-faint #b6a888
+ text-on-brand #ffffff
+ text-on-dark #fdf7ef
+ brand-deep #a83a14
+ brand-paler #fff0e6
+ accent #3d6b4a
+ accent-soft #dfeae0
+ accent-deep #27432f
+ highlight-bg #fff4d6
+ highlight-text #2c2418
+ underline #ff7a45
+ link-visited #7d3c84
+ shadow-warm rgba(60,40,15,0.05)
+ shadow-card rgba(60,40,15,0.10)
+ shadow-elev rgba(60,40,15,0.18)
+ success #3d6b4a
+ warning #c97a1f
+ warning-soft #fdf0d8
+ danger #b94326
+ info #4d6580
bg-elev-1 #0d1721
bg-elev-2 #1b2730
bg-elev-3 #252f3e
surface-card #0d1721
surface-card-hover #1b2730
text-body #c5cdd6
text-subtle #707a83
text-on-light #04111d
brand-glow rgba(32,129,226,0.40)
semantic-up #34c77b
semantic-up-soft #34c77b1a
semantic-down #eb5757
semantic-down-soft #eb57571a
semantic-warning #f5a623
semantic-info #2081e2
verified-blue #2081e2
category-art #bf60d5
category-gaming #34c77b
category-music #f5a623
rare-gold #fbbf24
focus-ring rgba(32,129,226,0.40)
typography 5 changed
~ display {"family":"Inter","size":72} {"family":"Tiempos Headline","size":68}
~ h1 {"family":"Inter","size":40} {"family":"Tiempos Headline","size":60}
~ h2 {"family":"Inter","size":32} {"family":"Tiempos Headline","size":40}
~ body {"family":"Inter","size":14} {"family":"Inter","size":17}
~ label {"family":"JetBrains Mono","size":11} {"family":"JetBrains Mono","size":12}
radius 3 changed
~ button 8px 10px
~ card 10px 16px
~ pill 999px 9999px
spacing 1 changed
~ xl 64px 48px
↻ Swap direction · Readwise → OpenSea