Diff

Hilton vs Inngest

53 token-level differences between these two design systems.

Role tokens
Background
#ffffff #0c0a09
Text
#1a1a1a #f6f6f6
Brand
#005091 #cbb26a
Border
#dcdfe4 #27241f
Display font
Söhne Whyte
Body size
16px 16px
colors 46 changed
~ bg #ffffff #0c0a09
~ surface #ffffff #16130f
~ brand #005091 #cbb26a
~ brand-hover #003d75 #d8c285
~ brand-pressed #002a52 #b89a55
~ brand-soft #cee0f0 #cbb26a1f
~ on-brand #ffffff #1a161c
~ text #1a1a1a #f6f6f6
~ text-muted #5a5a5a #a8a39b
~ text-soft #8a8a8a #7c7770
~ text-faint #bcbcbc #57534e
~ link #005091 #4078f2
~ border #dcdfe4 #27241f
~ border-strong #bcc0c8 #ffffff1f
~ border-soft #eef0f4 #ffffff0f
~ border-brand #005091 #cbb26a66
~ success #1a8757 #3ecf8e
~ warning #cc8800 #cbb26a
~ danger #c4313a #ef4444
~ info #005091 #4078f2
+ bg-deep #070605
+ surface-alt #1a161c
+ surface-muted #211c16
+ accent #cbb26a
+ selected #cbb26a26
+ disabled #211c16
+ disabled-text #6b665f
+ text-heading #fafaf9
+ shadow-ambient rgba(0,0,0,0.4)
+ shadow-standard rgba(0,0,0,0.55)
+ shadow-elevated rgba(0,0,0,0.7)
+ success-bg #0f2a1d
+ warning-bg #2a2310
+ danger-bg #2a1414
+ info-bg #101a2e
bg-soft #f4f6f9
bg-warm #faf9f6
surface-soft #fafbfc
surface-strong #f4f6f9
brand-deep #001b38
brand-tint #e0ebf6
text-strong #000000
text-on-brand #ffffff
link-hover #003d75
selected-bg #e0ebf6
honors-purple #67266c
typography 4 changed
~ display {"family":"Söhne","size":80} {"family":"Whyte","size":84}
~ h1 {"family":"Söhne","size":36} {"family":"Whyte","size":72}
~ h2 {"family":"Söhne","size":28} {"family":"Whyte","size":40}
~ body {"family":"Söhne","size":16} {"family":"Circular XX","size":16}
radius 3 changed
~ button 6px 0px
~ card 8px 0px
~ pill 9999px 0px
spacing identical
No differences.
↻ Swap direction · Inngest → Hilton