Design token diff

Showing changes between two snapshots of replit.com

Before

Mar 30, 2026

View snapshot

After

Mar 30, 2026

View snapshot

Before

Mar 30, 2026

After

Mar 30, 2026

+90 added−146 removed

Colors

+20 added−62 removed1 unchanged

Typography

+15 added−21 removed

+monospace|1em|400Code

+Arial, sans-serif|14px|400Body

+unset|unset|unsetW Webflow Badge

+serif|15px|400W Widget Twitter

+Helvetica Neue, Helvetica, Ubuntu, Segoe UI, Verdana, sans-serif|17px|300W Lightbox Backdrop

+var(--_typography---font-styles--body)|1rem|400Rl Styleguide Subheading 2

+var(--_typography---font-styles--heading)|3rem|400H1

+var(--_typography---font-styles--heading)|2rem|400H2

+var(--_typography---font-styles--heading)|1.5rem|400H3

+var(--_typography---font-styles--heading)|1.125rem|500H4

+var(--_typography---font-styles--heading)|1rem|500H5

+var(--_typography---font-styles--heading)|.875rem|500H6

+var(--_typography---font-styles--heading)|3.5rem|700Rl Styleguide Heading

+var(--_typography---font-styles--heading)|2rem|700Rl Styleguide Subheading

+var(--_typography---font-styles--footer-and-labels)|.625rem|400Footer Link Head

−var(--font-family-default)|var(--font-size-default)|400TextArea Module 1kNrma

−ABC Diatype Plus Variable, sans-serif|42px|400FooterCta Module EpEToa

−ABC Diatype Plus Variable, sans-serif|24px|400FooterCta Module EpEToa 2

−ABC Diatype Plus Variable, sans-serif|20px|400BigFooter Module JuPJhG

−var(--font-family-brand)|12px|500MarketingHeader2DropdownWithContent Module YpVW3W

−var(--font-family-brand)|14px|500MarketingHeader2DropdownWithContent Module YpVW3W 2

−ABC Diatype Plus Variable, sans-serif|14px|500MarketingHeader2 Module D0AaIq

−var(--font-family-default)!important|var(--font-size-default)|400Markdown Module ESbD4q 2

−var(--font-family-code)|11px|400Markdown Module ESbD4q 3

−var(--font-family-default)!important|var(--font-size-small)|400Markdown Module ESbD4q 4

−var(--font-family-default)!important|inherit|400Markdown Module ESbD4q 5

−var(--font-family-default,"IBM Plex Sans")|var(--font-size-small,.75rem)|400ReferralSocialShare Module YFBjuW

−inherit|var(--font-size-small)|400MultiSelectComboBox Module 5f8fiW

−var(--Text--font-family)|var(--Text--font-size)|var(--Text--font-weight)Text Module KIh4Sq

−var(--font-family-default,"IBM Plex Sans")|var(--font-size-header-default,1.5rem)|500ReferralModalContent Module T68AUW

−var(--font-family-default,"IBM Plex Sans")|var(--font-size-default,.875rem)|400ReferralModalContent Module T68AUW 2

−monospace|var(--font-size-small)|400BrandingViewer Module 3Tf95G

−var(--font-family-code)|var(--font-size-small)|400FileReferenceChip Module 9tODNG

−var(--font-family-code)|13px|400Summary Module GTwvJG

−inherit|inherit|var(--font-weight-medium)ArtifactsContent Module R6

−var(--font-family-code)|14px|500DatabaseEnvVariable Module HULRGq

Spacing

+20 added−20 removed12 unchanged

+0remSpace 0rem

+.175remSpace .175rem

+.2emSpace .2em

+.25remSpace .25rem

+.325remSpace .325rem

+.5emSpace .5em

+9pxSpace 9px

+.625remSpace .625rem

+.63remSpace .63rem

+.67emSpace .67em

+11pxSpace 11px

+.75remSpace .75rem

+13pxSpace 13px

+.875remSpace .875rem

+15pxSpace 15px

+1remSpace 1rem

+18pxSpace 18px

+1.125remSpace 1.125rem

+1.25remSpace 1.25rem

+1.5remSpace 1.5rem

−.325emSpace .325em

−.4375remSpace .4375rem

−7pxSpace 7px

−16pxSpace 16px

−24pxSpace 24px

−32pxSpace 32px

−40pxSpace 40px

−calc(15vh - 48px)Space calc 15vh 48px

−48pxSpace 48px

−56pxSpace 56px

−64pxSpace 64px

−75pxSpace 75px

−80pxSpace 80px

−96pxSpace 96px

−128pxSpace 128px

−140pxSpace 140px

−256pxSpace 256px

−0Space 0

−100%Space 100

−10vhSpace 10vh

Border Radius

+19 added−19 removed5 unchanged

+unsetRadius unset

+100%Radius 100%

+2pxRadius 2px

+var(--_ui-styles---radius--regular)Radius var ui styles radius regular

+.25remRadius .25rem

+.15remRadius .15rem

+var(--_ui-styles---radius--small)Radius var ui styles radius small

+var(--_ui-styles---radius--pilled)Radius var ui styles radius pilled

+var(--_ui-styles---radius--medium)Radius var ui styles radius medium

+100pxRadius 100px

+var(--_ui-styles---radius--large)Radius var ui styles radius large

+.625remRadius .625rem

+.5remRadius .5rem

+5pxRadius 5px

+15pxRadius 15px

+.75remRadius .75rem

+100remRadius 100rem

+var(--_primitives---colors--off-white)Radius var primitives colors off white

+.375remRadius .375rem

−var(--border-radius-8)Radius var border radius 8

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

−var(--border-radius-12)Radius var border radius 12

−37pxRadius 37px

−19pxRadius 19px

−90pxRadius 90px

−var(--border-radius-default)Radius var border radius default

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

−999pxRadius 999px

−2.5remRadius 2.5rem

−var(--border-radius-default)0 0 var(--border-radius-default)Radius var border radius default 0 0 var border radius default

−18pxRadius 18px

−.2297remRadius .2297rem

−var(--border-radius-dialog)Radius var border radius dialog

−inheritRadius inherit

−var(--border-radius-round)Radius var border radius round

−var(--space-16)Radius var space 16

−var(--space-8)Radius var space 8

−var(--border-radius-8)0 0 var(--border-radius-8)Radius var border radius 8 0 0 var border radius 8

Shadows

+16 added−24 removed

+unsetShadow 1

+0 0 0 1px #0000001a,0 1px 3px #0000001aShadow 2

+0 0 3px #3336Shadow 3

+0 0 0 2px #fffShadow 4

+0 0 3px 1px #3898ecShadow 5

+0 32px 64px -12px #00000024Shadow 6

+0 24px 48px -12px #0000002eShadow 7

+0 1px 2px #0000000dShadow 8

+0 1px 3px #0000001a,0 1px 2px #0000000fShadow 9

+0 20px 24px -4px #00000014,0 8px 8px -4px #00000008Shadow 10

+0 4px 8px -2px #0000001a,0 2px 4px -2px #0000000fShadow 11

+0 12px 16px -4px #00000014,0 4px 6px -2px #00000008Shadow 12

+0 0 16px #ec4e024dShadow 13

+0 0 #0000Shadow 14

+1px 1px 3px #0000Shadow 15

+inset 0 4rem 0 0 var(--_primitives---colors--black)Shadow 16

−var(--vscode-scrollbar-shadow,#000)0 6px 6px -6px insetShadow 1

−var(--vscode-scrollbar-shadow,#000)6px 0 6px -6px insetShadow 2

−0 50px 14px #0000,0 32px 13px #00000003,0 18px 11px #0000000d,0 8px 8px #00000017,0 2px 5px #0000001aShadow 3

−var(--shadow-2)Shadow 4

−0 8px 32px #0000001f,0 2px 8px #00000014Shadow 5

−0 0 12px 0 color-mix(in srgb,var(--accent-primary-default)25%,transparent)Shadow 6

−0 0 12px 0 color-mix(in srgb,var(--brand-accent-default)25%,transparent)Shadow 7

−inset 0 -1px 0 var(--background-highest)Shadow 8

−0 3px 6px #0202030dShadow 9

−var(--shadow-0)Shadow 10

−0 0 3px #00000080Shadow 11

−inset 0 0 0 1px #0000001aShadow 12

−0 4px 12px #0000001aShadow 13

−var(--popover-shadow)Shadow 14

−var(--Tabs--tab-list-box-shadow)Shadow 15

−0 8px 24px #0000001fShadow 16

−inset 0 0 #fff0Shadow 17

−inset 0 0 20px #ffffff26Shadow 18

−0 0 8px 2px var(--accent-primary-default)Shadow 19

−0 0 18px 6px var(--accent-primary-default)Shadow 20

−0 0 0 0 var(--accent-primary-default)Shadow 21

−0 0 0 4px var(--accent-primary-default)Shadow 22

−var(--shadow-1)Shadow 23

−0 2px 8px #00000026Shadow 24

Back to replit.com archive