Diff

Substack vs OpenAI

54 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#363737 #000000
Brand
#ff6719 #000000
Border
rgba(0, 0, 0, 0.10) rgba(0,0,0,0.1)
Display font
Cahuenga OpenAI Sans
Body size
19px 16px
colors 48 changed
~ bg-soft #f6f6f3 #f1f1f1
~ surface #ffffff #fafafa
~ text #363737 #000000
~ text-strong #1a1a1a #000000
~ text-faint #a8a8a8 #b4b4b4
~ text-muted #878787 #5d5d5d
~ brand #ff6719 #000000
~ brand-hover #e85412 #1a1a1a
~ border rgba(0, 0, 0, 0.10) rgba(0,0,0,0.1)
~ border-strong rgba(0, 0, 0, 0.20) rgba(0,0,0,0.16)
~ border-soft rgba(0, 0, 0, 0.06) rgba(0,0,0,0.08)
~ success #0d8050 #10a37f
~ danger #dc2626 #cc2525
~ info #2563eb #3a3a3a
+ bg-section #f7f7f7
+ surface-card #ffffff
+ surface-hover rgba(0,0,0,0.04)
+ surface-press rgba(0,0,0,0.08)
+ text-subtle #8e8e8e
+ text-on-brand #ffffff
+ text-on-dark #ededed
+ brand-active #2c2c2c
+ brand-on-dark #ffffff
+ accent #10a37f
+ accent-hover #0d8a6b
+ accent-soft #d6f3e8
+ link #000000
+ link-hover #5d5d5d
+ link-visited #000000
+ scrim rgba(0,0,0,0.5)
+ shadow-card rgba(0,0,0,0.06)
+ shadow-elev rgba(0,0,0,0.10)
+ shadow-modal rgba(0,0,0,0.20)
+ warning-soft #fdf3e7
+ danger-soft #fae5e5
bg-elev #fafaf7
bg-cream #fbf9f4
surface-warm #fafaf7
text-soft #666c70
text-link #363737
brand-deep #cc4a0e
brand-tint rgba(255, 103, 25, 0.10)
brand-tint-strong rgba(255, 103, 25, 0.18)
border-warm rgba(0, 0, 0, 0.08)
selection-bg rgba(255, 103, 25, 0.20)
shadow-soft rgba(0, 0, 0, 0.06)
shadow-medium rgba(0, 0, 0, 0.10)
reading-rule rgba(0, 0, 0, 0.08)
typography 5 changed
~ display {"family":"Cahuenga","size":56} {"family":"OpenAI Sans","size":48}
~ h1 {"family":"Cahuenga","size":40} {"family":"OpenAI Sans","size":40}
~ h2 {"family":"Cahuenga","size":32} {"family":"OpenAI Sans","size":32}
~ body {"family":"Spectral","size":19} {"family":"OpenAI Sans","size":16}
~ label {"family":"Monaco","size":13} {"family":"OpenAI Sans Mono","size":12}
radius 1 changed
~ button 6px 8px
spacing identical
No differences.
↻ Swap direction · OpenAI → Substack