Diff

OpenAI vs Bluesky

65 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #0c0c0c
Brand
#000000 #0085ff
Border
rgba(0,0,0,0.1) #dde1e7
Display font
OpenAI Sans Inter
Body size
16px 15px
colors 58 changed
~ surface #fafafa #ffffff
~ surface-hover rgba(0,0,0,0.04) #f1f3f5
~ text #000000 #0c0c0c
~ text-muted #5d5d5d #5e6772
~ brand #000000 #0085ff
~ brand-hover #1a1a1a #006cd9
~ brand-active #2c2c2c #0057b3
~ border rgba(0,0,0,0.1) #dde1e7
~ border-soft rgba(0,0,0,0.08) #eef0f3
~ border-strong rgba(0,0,0,0.16) #bcc1c9
~ success #10a37f #2bb673
~ warning #d97706 #f9a13e
~ warning-soft #fdf3e7 #fff3e0
~ danger #cc2525 #e84545
~ danger-soft #fae5e5 #fdebeb
~ info #3a3a3a #0085ff
+ bg-warm #f8f9fa
+ bg-muted #f1f3f5
+ bg-promo #e8f4ff
+ surface-elevated #ffffff
+ surface-soft #eef7ff
+ surface-strong #e8eaee
+ text-soft #7a838e
+ text-disabled #a8aebd
+ text-link #0085ff
+ text-link-hover #006cd9
+ brand-soft #e8f4ff
+ brand-deep #0057b3
+ accent-pink #fb44a3
+ accent-purple #9a75e9
+ accent-yellow #f5c518
+ accent-orange #f9a13e
+ accent-red #e84545
+ accent-green #2bb673
+ border-focus #0085ff
+ reply-line #dde1e7
+ reaction-like #fb44a3
+ reaction-repost #9a75e9
+ reaction-reply #5e6772
+ shadow-popover rgba(0,0,0,0.12)
+ success-soft #e0f6ec
+ info-soft #e8f4ff
bg-soft #f1f1f1
bg-section #f7f7f7
surface-card #ffffff
surface-press rgba(0,0,0,0.08)
text-subtle #8e8e8e
text-faint #b4b4b4
text-on-dark #ededed
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-elev rgba(0,0,0,0.10)
typography 5 changed
~ display {"family":"OpenAI Sans","size":48} {"family":"Inter","size":56}
~ h1 {"family":"OpenAI Sans","size":40} {"family":"Inter","size":40}
~ h2 {"family":"OpenAI Sans","size":32} {"family":"Inter","size":32}
~ body {"family":"OpenAI Sans","size":16} {"family":"Inter","size":15}
~ label {"family":"OpenAI Sans Mono","size":12} {"family":"Roboto Mono","size":11}
radius 2 changed
~ button 8px 6px
~ card 12px 8px
spacing identical
No differences.
↻ Swap direction · Bluesky → OpenAI