Diff

OpenAI vs Ritual

57 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #142b6f
Brand
#000000 #142b6f
Border
rgba(0,0,0,0.1) #dfe3ec
Display font
OpenAI Sans CircularXX
Body size
16px 16px
colors 46 changed
~ bg-soft #f1f1f1 #f7f8fa
~ surface #fafafa #ffffff
~ text #000000 #142b6f
~ text-strong #000000 #0f2154
~ text-muted #5d5d5d #5a6680
~ brand #000000 #142b6f
~ brand-hover #1a1a1a #0f2154
~ border rgba(0,0,0,0.1) #dfe3ec
~ border-strong rgba(0,0,0,0.16) #c3c9d8
~ success #10a37f #1f8a5b
~ warning #d97706 #e6bd00
~ danger #cc2525 #c2362b
~ info #3a3a3a #142b6f
+ bg-deeper #eef0f5
+ bg-navy #142b6f
+ bg-cream #fbf7ee
+ surface-soft #f7f8fa
+ brand-soft #e7eaf3
+ accent-yellow #ffd200
+ accent-yellow-soft #fff3bf
+ accent-yellow-deep #e6bd00
+ on-accent #142b6f
+ border-navy #142b6f
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-faint #b4b4b4
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
border-soft rgba(0,0,0,0.08)
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
typography 5 changed
~ display {"family":"OpenAI Sans","size":48} {"family":"CircularXX","size":80}
~ h1 {"family":"OpenAI Sans","size":40} {"family":"CircularXX","size":44}
~ h2 {"family":"OpenAI Sans","size":32} {"family":"CircularXX","size":34}
~ body {"family":"OpenAI Sans","size":16} {"family":"CircularXX","size":16}
~ label {"family":"OpenAI Sans Mono","size":12} {"family":"SFMono-Regular","size":13}
radius 2 changed
~ button 8px 12px
~ card 12px 16px
spacing 4 changed
~ xs 4px 0px
~ sm 8px 4px
~ md 16px 12px
~ xl 48px 64px
↻ Swap direction · Ritual → OpenAI