Diff

Ghost vs OpenRouter

70 token-level differences between these two design systems.

Role tokens
Background
#fff8ed #000000
Text
#15171a #ffffff
Brand
#30cf43 #ffffff
Border
#e5e1d6 #1f1f1f
Display font
Inter OR Display
Body size
17px 15px
colors 58 changed
~ bg #fff8ed #000000
~ surface #f4f3ef #111111
~ surface-soft #faf8f3 #0a0a0a
~ text #15171a #ffffff
~ text-strong #0b0c0e #ededed
~ text-muted #54595f #9ca3af
~ text-faint #a4a8af #6b7280
~ brand #30cf43 #ffffff
~ brand-active #1f9b2f #d4d4d4
~ accent-blue #3b73ff #3b82f6
~ border #e5e1d6 #1f1f1f
~ border-strong #d6d0bf #2a2a2a
~ border-soft #f0ece1 #0f0f0f
~ success #30cf43 #22c55e
~ warning #f59e0b #fbbf24
~ danger #e63946 #ef4444
~ info #3b73ff #3b82f6
~ on-brand #ffffff #000000
+ bg-deep #000000
+ surface-elevated #1a1a1a
+ surface-row-alt #080808
+ text-body #d4d4d4
+ text-mono-data #ededed
+ brand-disabled #525252
+ on-dark #ffffff
+ link #9ca3af
+ link-hover #ffffff
+ border-table #1a1a1a
+ shadow-color rgba(0,0,0,0)
+ accent-emerald #22c55e
+ accent-rose #ef4444
+ accent-amber #fbbf24
+ code-keyword #ededed
+ code-string #9ca3af
+ code-comment #6b7280
+ table-stripe-odd #000000
+ table-stripe-even #080808
bg-alt #ffffff
bg-cream-deep #fef0d9
surface-2 #ebe9e0
surface-3 #e0ddd1
surface-warm #fff5e1
text-soft #7c8087
text-on-brand #ffffff
text-on-dark #fff8ed
brand-hover #26b337
brand-soft #e5fae8
accent #ff1a75
accent-soft #ffe7f0
accent-deep #cc1561
accent-blue-soft #e3ecff
border-focus #30cf43
bg-dark #15171a
surface-dark #1d1f23
success-bg #e5fae8
warning-bg #fef3c7
danger-bg #fde2e4
info-bg #e3ecff
typography 5 changed
~ display {"family":"Inter","size":80} {"family":"OR Display","size":72}
~ h1 {"family":"Inter","size":44} {"family":"OR Display","size":40}
~ h2 {"family":"Inter","size":36} {"family":"OR Display","size":32}
~ body {"family":"Inter","size":17} {"family":"Inter","size":15}
~ label {"family":"JetBrains Mono","size":14} {"family":"JetBrains Mono","size":11}
radius 2 changed
~ button 6px 8px
~ card 24px 10px
spacing 5 changed
~ xs 0px 4px
~ sm 4px 8px
~ md 12px 16px
~ lg 24px 48px
~ xl 40px 80px
↻ Swap direction · OpenRouter → Ghost