Design token diff

Showing changes between two snapshots of replit.com

Before

Mar 30, 2026

View snapshot

After

Apr 2, 2026

View snapshot

Before

Mar 30, 2026

After

Apr 2, 2026

+48 added−45 removed

Colors

+1 added63 unchanged

Typography

+14 added−12 removed9 unchanged
+ABC Diatype Plus Variable, sans-serif|60px|400DesignCanvasCard Module Dy73KW 2
+ABC Diatype Plus Variable, sans-serif|16px|400DesignCanvasCard Module Dy73KW 3
+ABC Diatype Plus Variable, sans-serif|68.92px|400HeroBentoGrid Module WCfISG
+ABC Diatype Plus Variable, sans-serif|28px|400TestimonialsSection2Mobile Module St7Gba 2
+ABC Diatype Plus Variable, sans-serif|48px|400PlatformCards Module Z0omxa
+ABC Diatype Plus Variable, sans-serif|10.4px|400PlatformCards Module Z0omxa 2
+var(--font-family-code)|.9em|400MaliciousVulnerability Module W4CWjG
+var(--font-family-default,"IBM Plex Sans")|var(--font-size-default)|var(--font-weight-medium)CanvasOnboarding Module PSCqpq
+var(--font-family-default,"IBM Plex Sans")|var(--font-size-small)|400CanvasOnboarding Module PSCqpq 2
+inherit|inherit|400PlanningChatRow Module PxNDRa
+ABC Diatype Plus Variable, sans-serif|13px|500TestimonialsSection2Mobile Module St7Gba
+ABC Diatype Plus Variable, sans-serif|31.78px|400TestimonialsSection2 Module HSZ
+ABC Diatype Plus Variable, sans-serif|17px|400TestimonialsSection2 Module HSZ 2
+ABC Diatype Plus Variable, sans-serif|18px|400PricingCtaButton Module U3dpka
−var(--font-family-brand)|14px|500MarketingHeader2DropdownWithContent Module YpVW3W 2
−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
−inherit|inherit|var(--font-weight-medium)ArtifactsContent Module R6

Spacing

+6 added−6 removed26 unchanged
+26pxSpace 26px
+34pxSpace 34px
+36pxSpace 36px
+54pxSpace 54px
+60pxSpace 60px
+112pxSpace 112px
−75pxSpace 75px
−140pxSpace 140px
−256pxSpace 256px
−0Space 0
−100%Space 100
−10vhSpace 10vh

Border Radius

+13 added−13 removed11 unchanged
+40pxRadius 40px
+24pxRadius 24px
+100pxRadius 100px
+20pxRadius 20px
+7pxRadius 7px
+16pxRadius 16px
+var(--border-radius-container)Radius var border radius container
+2pxRadius 2px
+var(--index--border-top-left-radius) var(--index--border-top-right-radius) var(--index--border-bottom-right-radius) var(--index--border-bottom-left-radius)Radius var index border top left radius var index border top right radius var index border bottom right radius var index border bottom left radius
+0 var(--border-radius-6) var(--border-radius-6) 0Radius 0 var border radius 6 var border radius 6 0
+var(--index--border-radius) var(--index--border-radius) 0 0Radius var index border radius var index border radius 0 0
+8px 8px 0 0Radius 8px 8px 0 0
+var(--border-radius-2)Radius var border radius 2
−37pxRadius 37px
−19pxRadius 19px
−90pxRadius 90px
−999pxRadius 999px
−3pxRadius 3px
−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
−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

+14 added−14 removed10 unchanged
+var(--vscode-scrollbar-shadow,#000) 0 6px 6px -6px insetShadow 1
+var(--vscode-scrollbar-shadow,#000) 6px 0 6px -6px insetShadow 2
+0 0 #0000Shadow 3
+0 0 8px 4px color-mix(in srgb, var(--accent-primary-default) 50%, transparent)Shadow 4
+0 0 0 1px var(--outline-dimmer)Shadow 5
+0 0 32px 16px color-mix(in srgb, var(--accent-primary-default) 35%, transparent), 0 0 0 .5px var(--accent-primary-default)Shadow 6
+0 0 0 1px var(--accent-primary-default)Shadow 9
+0 0 6px 2px color-mix(in srgb, var(--accent-primary-default) 25%, transparent)Shadow 10
+0 0 14px 6px color-mix(in srgb, var(--accent-primary-default) 50%, transparent)Shadow 11
+var(--Drawer--drawer-shadow)Shadow 12
+var(--Pane--box-shadow)Shadow 13
+inset 0 0 73px 7px #faf6f1Shadow 14
+0 0 12px 0 color-mix(in srgb, var(--accent-primary-default) 25%, transparent)Shadow 17
+0 0 12px 0 color-mix(in srgb, var(--brand-accent-default) 25%, transparent)Shadow 18
−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
−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 0 0 1px #0000001aShadow 12
−0 4px 12px #0000001aShadow 13
−var(--popover-shadow)Shadow 14
−var(--Tabs--tab-list-box-shadow)Shadow 15
−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 4px var(--accent-primary-default)Shadow 22
−0 2px 8px #00000026Shadow 24
Back to replit.com archive