Home / Browse / replit.com / Diff Design token diff Showing changes between two snapshots of replit.com
Colors +1 added 63 unchanged
Typography +14 added −12 removed 9 unchanged + ABC Diatype Plus Variable, sans-serif|60px|400 DesignCanvasCard Module Dy73KW 2
+ ABC Diatype Plus Variable, sans-serif|16px|400 DesignCanvasCard Module Dy73KW 3
+ ABC Diatype Plus Variable, sans-serif|68.92px|400 HeroBentoGrid Module WCfISG
+ ABC Diatype Plus Variable, sans-serif|28px|400 TestimonialsSection2Mobile Module St7Gba 2
+ ABC Diatype Plus Variable, sans-serif|48px|400 PlatformCards Module Z0omxa
+ ABC Diatype Plus Variable, sans-serif|10.4px|400 PlatformCards Module Z0omxa 2
Spacing +6 added −6 removed 26 unchanged + 26px Space 26px
+ 34px Space 34px
+ 36px Space 36px
+ 54px Space 54px
+ 60px Space 60px
+ 112px Space 112px
− 75px Space 75px
−
Border Radius +13 added −13 removed 11 unchanged + 40px Radius 40px
+ 24px Radius 24px
+ 100px Radius 100px
+ 20px Radius 20px
+ 7px Radius 7px
+ 16px Radius 16px
+ var(--border-radius-container) Radius var border radius container
Shadows +14 added −14 removed 10 unchanged + var(--vscode-scrollbar-shadow,#000) 0 6px 6px -6px inset Shadow 1
+ var(--vscode-scrollbar-shadow,#000) 6px 0 6px -6px inset Shadow 2
+ 0 0 #0000 Shadow 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
+
+
var(--font-family-code)|.9em|400
MaliciousVulnerability 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)|400 CanvasOnboarding Module PSCqpq 2
+ inherit|inherit|400 PlanningChatRow Module PxNDRa
+ ABC Diatype Plus Variable, sans-serif|13px|500 TestimonialsSection2Mobile Module St7Gba
+ ABC Diatype Plus Variable, sans-serif|31.78px|400 TestimonialsSection2 Module HSZ
+ ABC Diatype Plus Variable, sans-serif|17px|400 TestimonialsSection2 Module HSZ 2
+ ABC Diatype Plus Variable, sans-serif|18px|400 PricingCtaButton Module U3dpka
− var(--font-family-brand)|14px|500 MarketingHeader2DropdownWithContent Module YpVW3W 2
− var(--font-family-default)!important|var(--font-size-default)|400 Markdown Module ESbD4q 2
− var(--font-family-code)|11px|400 Markdown Module ESbD4q 3
− var(--font-family-default)!important|var(--font-size-small)|400 Markdown Module ESbD4q 4
− var(--font-family-default)!important|inherit|400 Markdown Module ESbD4q 5
− var(--font-family-default,"IBM Plex Sans")|var(--font-size-small,.75rem)|400 ReferralSocialShare Module YFBjuW
− inherit|var(--font-size-small)|400 MultiSelectComboBox 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)|500 ReferralModalContent Module T68AUW
− var(--font-family-default,"IBM Plex Sans")|var(--font-size-default,.875rem)|400 ReferralModalContent Module T68AUW 2
− monospace|var(--font-size-small)|400 BrandingViewer Module 3Tf95G
− inherit|inherit|var(--font-weight-medium) ArtifactsContent Module R6
140px
Space 140px
+
2px
Radius 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) 0 Radius 0 var border radius 6 var border radius 6 0
+ var(--index--border-radius) var(--index--border-radius) 0 0 Radius var index border radius var index border radius 0 0
+ 8px 8px 0 0 Radius 8px 8px 0 0
+ var(--border-radius-2) Radius var border radius 2
− var(--border-radius-default)0 0 var(--border-radius-default) Radius var border radius default 0 0 var border radius default
− 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
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 #faf6f1 Shadow 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 inset Shadow 1
− var(--vscode-scrollbar-shadow,#000)6px 0 6px -6px inset Shadow 2
− 0 50px 14px #0000,0 32px 13px #00000003,0 18px 11px #0000000d,0 8px 8px #00000017,0 2px 5px #0000001a Shadow 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 #0000001a Shadow 12
− 0 4px 12px #0000001a Shadow 13
− var(--popover-shadow) Shadow 14
− var(--Tabs--tab-list-box-shadow) Shadow 15
− inset 0 0 20px #ffffff26 Shadow 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 #00000026 Shadow 24