Design token diff

Showing changes between two snapshots of superhuman.com

Before

Apr 10, 2026

View snapshot

After

May 7, 2026

View snapshot

Before

Apr 10, 2026

After

May 7, 2026

+24 added−63 removed

Colors

+2 added−4 removed22 unchanged

Typography

+1 added−9 removed

+"Super Sans VF", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif|16px|460Super Sans VF 16px / 460

−var(--font-family-sans)|var(--font-size-16)|var(--font-weight-regular)Body

−var(--font-family-sans)|var(--font-size-text-small)|var(--font-weight-medium)Text Small

−var(--_button-font-family, var(--font-family-sans))|var(--_button-font-size,var(--font-size-16))|var(--_button-font-weight,var(--font-weight-semibold))Button Button RzPSK

−var(--font-family-body)|var(--font-text-size-xs)|var(--font-weight-regular)Form Control Error

−var(--font-family-sans)|var(--font-size-text-medium)|var(--font-weight-medium)List OlList 7Zyc6

Spacing

−16 removed4 unchanged

−calc(1 / var(--rem) * 1rem)Space calc 1 var rem 1rem

−calc(2 / var(--rem) * 1rem)Space calc 2 var rem 1rem

−calc(4 / var(--rem) * 1rem)Space calc 4 var rem 1rem

−calc(6 / var(--rem) * 1rem)Space calc 6 var rem 1rem

−calc(8 / var(--rem) * 1rem)Space calc 8 var rem 1rem

−calc(10 / var(--rem) * 1rem)Space calc 10 var rem 1rem

−calc(12 / var(--rem) * 1rem)Space calc 12 var rem 1rem

Border Radius

+11 added−19 removed5 unchanged

+calc(6 / 16 * 1rem)}Radius calc 6 16 1rem

+calc(10 / 16 * 1rem)Radius calc 10 16 1rem

+calc(4 / 16 * 1rem)Radius calc 4 16 1rem

+calc(999 / 16 * 1rem)Radius calc 999 16 1rem

+calc(12 / 16 * 1rem)Radius calc 12 16 1rem

+calc(16 / 16 * 1rem)Radius calc 16 16 1rem

+calc(8 / 16 * 1rem)Radius calc 8 16 1rem

Shadows

+10 added−15 removed1 unchanged

+0 0 0 1px rgb(from light-dark(#474543,#141413) r g b/4%),0 4px 8px -2px rgb(from light-dark(#474543,#141413) r g b/6%),0 2px 4px 0 rgb(from light-dark(#474543,#141413) r g b/4%),0 1px 2px 0 rgb(from light-dark(#474543,#141413) r g b/4%),0 0 0 1px rgb(from light-dark(#dedbd5,#474543) r g b/20%)--elevation-xsmall

+0 0 0 1px rgb(from light-dark(#474543,#141413) r g b/4%),0 16px 8px -8px rgb(from light-dark(#474543,#141413) r g b/1%),0 12px 6px -6px rgb(from light-dark(#474543,#141413) r g b/2%),0 5px 5px -2.5px rgb(from light-dark(#474543,#141413) r g b/8%),0 1px 3px -1.5px rgb(from light-dark(#474543,#141413) r g b/16%),0 0 0 1px rgb(from light-dark(#dedbd5,#474543) r g b/20%)--elevation-small

+0 0 0 1px rgb(from light-dark(#474543,#141413) r g b/4%),0 1px 1px 0.5px rgb(from light-dark(#474543,#141413) r g b/4%),0 3px 3px -1.5px rgb(from light-dark(#474543,#141413) r g b/2%),0 6px 6px -3px rgb(from light-dark(#474543,#141413) r g b/4%),0 12px 12px -6px rgb(from light-dark(#474543,#141413) r g b/4%),0 24px 24px -12px rgb(from light-dark(#474543,#141413) r g b/4%),0 48px 48px -24px rgb(from light-dark(#474543,#141413) r g b/4%),0 96px 96px -32px rgb(from light-dark(#474543,#141413) r g b/6%),0 0 0 1px rgb(from light-dark(#dedbd5,#474543) r g b/20%)--elevation-large

+0 -4px 8px .5px rgb(from light-dark(#474543,#141413) r g b/16%)

Back to superhuman.com archive

−var(--font-family-sans)|var(--font-size-14)|var(--font-weight-medium)Plan PlanContainer BdWLS

−var(--font-family-sans)|var(--font-size-18)|var(--font-weight-bold)Testimonials Testimonials 3NFOG

−var(--font-family-sans)|var(--font-size-14)|400Text Field Content

−var(--font-family-sans)|var(--font-size-display-small)|var(--font-weight-regular)Text DisplaySmall DeKHh

−calc(16 / var(--rem) * 1rem)Space calc 16 var rem 1rem

−calc(20 / var(--rem) * 1rem)Space calc 20 var rem 1rem

−calc(24 / var(--rem) * 1rem)Space calc 24 var rem 1rem

−calc(32 / var(--rem) * 1rem)Space calc 32 var rem 1rem

−calc(36 / var(--rem) * 1rem)Space calc 36 var rem 1rem

−calc(40 / var(--rem) * 1rem)Space calc 40 var rem 1rem

−calc(48 / var(--rem) * 1rem)Space calc 48 var rem 1rem

−calc(56 / var(--rem) * 1rem)Space calc 56 var rem 1rem

−calc(64 / var(--rem) * 1rem)Space calc 64 var rem 1rem

+calc(20 / 16 * 1rem)Radius calc 20 16 1rem

+calc(6 / 16 * 1rem)Radius calc 6 16 1rem 2

+calc(24 / 16 * 1rem)Radius calc 24 16 1rem

+calc(8 / 16 * 1rem)}Radius calc 8 16 1rem 2

−var(--radius-1_5x)}Radius var radius 1 5x

−var(--radius-2_5x)Radius var radius 2 5x

−var(--_button-border-radius)Radius var button border radius

−var(--radius-1x)Radius var radius 1x

−var(--radius-full)Radius var radius full

−var(--radius-3x)Radius var radius 3x

−var(--radius-small)Radius var radius small

−var(--space-3x)Radius var space 3x

−var(--radius-4x)Radius var radius 4x

−var(--space-4x)Radius var space 4x

−var(--radius-2x)Radius var radius 2x

−var(--radius-5x)Radius var radius 5x

−var(--radius-4x) 0 0 var(--radius-4x)Radius var radius 4x 0 0 var radius 4x

−calc(15.74/var(--rem)*1rem)Radius calc 15.74 var rem 1rem

−calc(1/var(--rem)*1rem)Radius calc 1 var rem 1rem

−var(--radius-1_5x)Radius var radius 1 5x 2

−var(--radius-6x)Radius var radius 6x

−var(--radius-2x)}Radius var radius 2x 2

+0 0 0 1px rgb(from light-dark(#474543,#141413) r g b/4%),0 1px 1px 0.5px rgb(from light-dark(#474543,#141413) r g b/4%),0 3px 3px -1.5px rgb(from light-dark(#474543,#141413) r g b/2%),0 6px 6px -3px rgb(from light-dark(#474543,#141413) r g b/4%),0 12px 12px -6px rgb(from light-dark(#474543,#141413) r g b/4%),0 24px 24px -12px rgb(from light-dark(#474543,#141413) r g b/4%),0 48px 48px -24px rgb(from light-dark(#474543,#141413) r g b/4%),0 0 0 1px rgb(from light-dark(#dedbd5,#474543) r g b/20%)--elevation-medium

+0 0 25px rgb(from light-dark(rgb(0 0 0/0%),rgb(255 255 255/0%)) r g b/25%)Shadow 7

+0 0 0 2px light-dark(#0163c6,#62abff)Shadow 8

+0 calc(-5 / 16 * 1rem),0 calc(5 / 16 * 1rem)Shadow 9

+light-dark(#474543,#141413)--color-shadow

+light-dark(#dedbd5,#474543)--color-shadow-ring

−var(--elevation-large)Shadow 2

−0 -4px 8px .5px rgb(135 141 162/16%)Shadow 3

−var(--axis-0,0) var(--axis-small,0) var(--blur-small,8px) var(--spread-small,0) var(--color-elevation-base-low,rgb(14 14 13/7.84%))Shadow 4

−var(--elevation-xsmall)Shadow 5

−var(--elevation-small)Shadow 6

−0 4px 16px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.08)Shadow 7

−0 2px 8px rgba(0,0,0,.08)Shadow 8

−0 0 0 2px var(--color-border-focus)Shadow 9

−0 0 25px hsla(0,0%,100%,.25)Shadow 10

−0 0 1px 0 rgba(0,0,0,.502),-4px 0 20px 0 rgba(0,0,0,.2)Shadow 11

−0 0 3.148px .394px #a1a0b3Shadow 12

−0 1px 2px 0 rgb(14 18 27/24%),0 0 0 1px #353088Shadow 13

−0 1px 0 rgb(13 12 37/18%)Shadow 14

−0 1px 2px rgb(14 18 27/8%)Shadow 15

−0 calc(-5 / var(--rem) * 1rem),0 calc(5 / var(--rem) * 1rem)Shadow 16