Design token diff
Showing changes between two snapshots of hubspot.com
Colors
+10 added26 unchangedTypography
+16 added−14 removed+"HubSpot Sans", sans-serif|16px|300HubSpot Sans 16px / 300
+"HubSpot Sans", sans-serif|16px|400HubSpot Sans 16px / 400
+"HubSpot Sans", sans-serif|14px|300HubSpot Sans 14px / 300
+"HubSpot Sans", sans-serif|14px|500HubSpot Sans 14px / 500
+"HubSpot Sans", sans-serif|12px|500HubSpot Sans 12px / 500
+"HubSpot Sans", sans-serif|16px|500HubSpot Sans 16px / 500
+"HubSpot Serif Page Header Human", "HubSpot Serif", serif|80px|500HubSpot Serif Page Header Human 80px / 500
Spacing
+15 added−3 removed17 unchanged+0.75remSpace 0.75rem
+1remSpace 1rem
+7px7px
+12pxSpace 12px
+14px14px
+16px16px
+24px24px
+
Border Radius
+1 added−9 removed15 unchanged+16pxRadius 16px
−var(--cl-border-radius-container)Radius var cl border radius container
−var(--cl-border-radius-medium)Radius var cl border radius medium
−calc(var(--a11y-contrast-toggle-px-height)*1px/2)Radius calc var a11y contrast toggle px height 1px 2
−var(--cl-border-radius-small)Radius var cl border radius small
−var(--cl-border-radius-container-small)Radius var cl border radius container small
−
Shadows
+6 added−4 removed2 unchanged+0 2px 4px rgba(33, 51, 67, 0.12)Shadow 2
+0 0 0 1px rgba(255, 255, 255, 0.4)Shadow 4
+0 0 0 1px #ff7b70Shadow 5
+0 0 0 2px #f8f5eeShadow 6
+rgba(33, 51, 67, 0.12) 0px 2px 4px 0pxshadow-header#global-nav-header.global-nav-header
+rgba(0, 0, 0, 0.28) 0px 8px 28px 0pxshadow-div#hs-eu-cookie-confirmation.hs-banner-optimization-animation
−var(--global-nav-box-shadow, 0 2px 4px rgba(33, 51, 67, 0.12))
+"HubSpot Sans", "Lexend Deca", LexendDeca, "Helvetica Neue", helvetica, arial, sans-serif|14px|500HubSpot Sans 14px / 500
+"HubSpot Sans", sans-serif|18px|500HubSpot Sans 18px / 500
+"HubSpot Sans", "Lexend Deca", LexendDeca, "Helvetica Neue", helvetica, arial, sans-serif|14px|400HubSpot Sans 14px / 400
+"HubSpot Sans", sans-serif|18px|300HubSpot Sans 18px / 300
+"HubSpot Serif", serif|40px|500HubSpot Serif 40px / 500
+"HubSpot Sans", "Lexend Deca", LexendDeca, "Helvetica Neue", helvetica, arial, sans-serif|32px|400HubSpot Sans 32px / 400
+"HubSpot Sans", "Lexend Deca", LexendDeca, "Helvetica Neue", helvetica, arial, sans-serif|12.8px|300HubSpot Sans 12.8px / 300
+"HubSpot Sans", sans-serif|22px|500HubSpot Sans 22px / 500
+"HubSpot Serif", serif|48px|500HubSpot Serif 48px / 500
−var(--cl-font-family-display, "HubSpot Serif", serif)|var(--cl-font-size-display-01)|var(--cl-font-weight-display-01)H1 Secondary
−var(--cl-font-family-display, "HubSpot Serif", serif)|var(--cl-font-size-display-02)|var(--cl-font-weight-display-02)H2 Secondary
−var(--cl-font-family-display, "HubSpot Serif", serif)|var(--cl-font-size-display-03)|var(--cl-font-weight-display-03)H3 Display
−var(--cl-font-family-heading, inherit)|var(--cl-font-size-h1)|var(--cl-font-weight-h1)H1
−var(--cl-font-family-heading, inherit)|var(--cl-font-size-h1-small)|var(--cl-font-weight-h1-small)H1 Small
−var(--cl-font-family-heading, inherit)|var(--cl-font-size-h2)|var(--cl-font-weight-h2)H2
−var(--cl-font-family, inherit)|var(--cl-font-size-h3)|var(--cl-font-weight-h3)H3
−var(--cl-font-family, inherit)|var(--cl-font-size-h4)|var(--cl-font-weight-h4)H4
−var(--cl-font-family, inherit)|var(--cl-font-size-h5)|var(--cl-font-weight-h5)H5
−var(--cl-font-family, inherit)|var(--cl-font-size-h6)|var(--cl-font-weight-h6)H6
−var(--cl-font-family,inherit)|var(--cl-font-size-h4)|var(--cl-font-weight-h4)Global Footer Nav
−var(--cl-font-family-heading,inherit)|var(--cl-font-size-h2)|var(--cl-font-weight-h2)Wf Customer Platform
−var(--cl-font-family-heading,inherit)|var(--cl-font-size-h1)|var(--cl-font-weight-h1)Wf Customer Platform 2
−var(--cl-font-family,inherit)|var(--cl-font-size-h6)|var(--cl-font-weight-h6)Cl Tab Button
28px
28px
−var(--column-gap, 0.5rem)Space var column gap 0.5rem
−calc(.5rem - var(--cl-card-border-width)Space calc .5rem var cl card border width
var(--cl-border-radius-container-medium)
Radius var cl border radius container medium
−var(--wf-flexible-tagline-border-radius)Radius var wf flexible tagline border radius
Shadow 2
−0 0 0 1px var(--cl-card-border-color)Shadow 3
−0 0 0 1px var(--cl-color-border-02)Shadow 5
−0 0 0 1px var(--cl-color-error-01)Shadow 6