Diff

HP vs Optimism

79 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#1c1c1c #000000
Brand
#0096d6 #ff0420
Border
#e0e6ed #e0e0e0
Display font
Forma DJR Display Optimism Display
Body size
16px 16px
colors 72 changed
~ bg-soft #f7f7f7 #f5f5f5
~ text #1c1c1c #000000
~ brand #0096d6 #ff0420
~ brand-deep #005d83 #7d020f
~ brand-hover #0080b8 #cc0319
~ brand-active #005d83 #a30214
~ link-hover #0080b8 #cc0319
~ border #e0e6ed #e0e0e0
~ border-soft #f0f4f8 #ebebeb
~ border-strong #0096d6 #c0c0c0
~ scrim rgba(0,0,0,0.5) rgba(0,0,0,0.65)
+ bg-strong #e6e6e6
+ bg-dark #000000
+ bg-dark-elev #1a1a1a
+ bg-dark-deep #0a0a0a
+ surface-card #ffffff
+ surface-card-soft #f5f5f5
+ text-body #1a1a1a
+ text-muted #5a5a5a
+ text-subtle #8a8a8a
+ text-on-dark-soft #a8a8a8
+ brand-soft #ff04201a
+ brand-glow rgba(255,4,32,0.40)
+ brand-bright #ff3344
+ semantic-up #10b981
+ semantic-down #ef4444
+ semantic-warning #f59e0b
+ semantic-info #ff0420
+ gradient-hero linear-gradient(135deg, #000000 0%, #1a1a1a 60%, #7d020f 100%)
+ gradient-red linear-gradient(135deg, #ff0420 0%, #cc0319 100%)
+ focus-ring rgba(255,4,32,0.45)
+ link #ff0420
bg-cool #f0f4f8
bg-deep #1c1c1c
bg-omen #000000
surface #ffffff
surface-soft #f7f7f7
surface-cool #f0f4f8
surface-strong #e0e6ed
surface-input #ffffff
text-strong #000000
text-soft #5d6770
text-faint #8a939d
text-disabled #b8c0c8
text-link #0096d6
brand-light #33acdd
brand-darkest #002d4c
brand-gradient linear-gradient(135deg, #0096d6 0%, #005d83 100%)
cta-primary #0096d6
cta-primary-hover #0080b8
omen-red #e60000
omen-red-hover #c40000
omen-deep #1c1c1c
z-charcoal #3c4148
link-default #0096d6
link-visited #0096d6
shadow-soft rgba(0,90,150,0.06)
shadow-card rgba(0,90,150,0.1)
shadow-elev rgba(0,90,150,0.15)
shadow-modal rgba(0,0,0,0.25)
badge-new #0096d6
badge-deal #e60000
badge-eco #2d8659
badge-energy-star #1d4f9e
price #1c1c1c
price-strikethrough #8a939d
price-discount #e60000
rating-star #ff9500
success #2d8659
warning #ff9500
danger #e60000
info #0096d6
typography 4 changed
~ display {"family":"Forma DJR Display","size":64} {"family":"Optimism Display","size":72}
~ h1 {"family":"Forma DJR Display","size":40} {"family":"Optimism Display","size":40}
~ h2 {"family":"Forma DJR Display","size":32} {"family":"Optimism Display","size":32}
~ body {"family":"Forma DJR Text","size":16} {"family":"Inter","size":16}
radius 2 changed
~ button 6px 12px
~ pill 9999px 999px
spacing 1 changed
~ xl 48px 64px
↻ Swap direction · Optimism → HP