Diff

Lemon Squeezy vs Inngest

58 token-level differences between these two design systems.

Role tokens
Background
#ffffff #0c0a09
Text
#121217 #f6f6f6
Brand
#ffc233 #cbb26a
Border
#e6e6ec #27241f
Display font
Circular Whyte
Body size
16px 16px
colors 51 changed
~ bg #ffffff #0c0a09
~ surface #f6f6f8 #16130f
~ text #121217 #f6f6f6
~ text-muted #6b6b76 #a8a39b
~ text-soft #9a9aa3 #7c7770
~ text-faint #c4c4cc #57534e
~ brand #ffc233 #cbb26a
~ brand-pressed #e0a318 #b89a55
~ accent #5423e7 #cbb26a
~ border #e6e6ec #27241f
~ border-strong #121217 #ffffff1f
~ success #1f9d57 #3ecf8e
~ success-bg #dcf3e6 #0f2a1d
~ warning #d98a00 #cbb26a
~ warning-bg #fdf0d2 #2a2310
~ danger #d92d20 #ef4444
~ danger-bg #fde4e1 #2a1414
~ info #5423e7 #4078f2
~ info-bg #efe9fd #101a2e
~ on-brand #121217 #1a161c
+ bg-deep #070605
+ surface-alt #1a161c
+ surface-muted #211c16
+ brand-hover #d8c285
+ brand-soft #cbb26a1f
+ link #4078f2
+ selected #cbb26a26
+ disabled #211c16
+ disabled-text #6b665f
+ text-heading #fafaf9
+ border-soft #ffffff0f
+ border-brand #cbb26a66
+ shadow-ambient rgba(0,0,0,0.4)
+ shadow-standard rgba(0,0,0,0.55)
+ shadow-elevated rgba(0,0,0,0.7)
bg-dark #121217
bg-dark-2 #1c1c24
surface-2 #ededf1
surface-3 #e3e3e9
surface-yellow-soft #fff3d6
surface-purple-soft #efe9fd
text-strong #000000
text-on-dark #ffffff
text-on-dark-muted #b7b7c0
text-on-brand #121217
text-on-purple #ffffff
brand-deep #f5b21f
accent-deep #4a1dcc
accent-pressed #3f17b3
border-dark #2a2a33
border-yellow #ffc233
typography 4 changed
~ display {"family":"Circular","size":80} {"family":"Whyte","size":84}
~ h1 {"family":"Circular","size":40} {"family":"Whyte","size":72}
~ h2 {"family":"Circular","size":32} {"family":"Whyte","size":40}
~ body {"family":"Inter","size":16} {"family":"Circular XX","size":16}
radius 3 changed
~ button 8px 0px
~ card 24px 0px
~ pill 40px 0px
spacing identical
No differences.
↻ Swap direction · Inngest → Lemon Squeezy