Home / Browse / replit.com / Diff Design token diff Showing changes between two snapshots of replit.com
Colors +6 added −56 removed 8 unchanged
Typography +2 added −10 removed 13 unchanged + ABC Diatype Plus Variable, sans-serif|32px|300 Abc Diatype Plus Variable
+ IBM Plex Sans, sans-serif|14px|400 Ibm Plex Sans
− var(--font-family-default)|var(--font-size-default)|400 Body
− var(--font-family-code)|13px|400 Summary Module GTwvJG
− var(--font-family-code)|var(--font-size-small)|400 WorkflowsBlocks Module 9y8YAa
− var(--font-family-code)|14px|500 DatabaseEnvVariable Module HULRGq
−
Spacing +12 added −13 removed 19 unchanged + 3.25px 3.25px
+ 14px Space 14px
+ 15px 15px
+ 22.5px 22.5px
+ 25px Space 25px
+ 30px Space 30px
+ 35px 35px
+
Border Radius +9 added −17 removed 7 unchanged + 1px Radius 1px
+ 12px Radius 12px
+ 999px Radius 999px
+ 6px 0 0 6px Radius 6px 0 0 6px
+ 9999px Radius 9999px
+ 0 6px 6px 0 Radius 0 6px 6px 0
+ 0 0 4px 4px Radius 0 0 4px 4px
Shadows +12 added −24 removed + 0 2px 8px #00000014 Shadow 1
+ 0 1px 2px #00000005 Shadow 2
+ 0 1px 3px #00000008 Shadow 3
+ 0 2px 5px #0000000d Shadow 4
+ 0 3px 10px #00000017 Shadow 5
+ #000 0 6px 6px -6px inset Shadow 6
+ #000 6px 0 6px -6px inset Shadow 7
+ 0px 4px 8px 0px #02020329
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|18px|400 PricingCtaButton Module U3dpka
− var(--font-family-brand)|12px|500 MarketingHeader2DropdownWithContent Module YpVW3W
53px
53px
− calc(15vh - 48px) Space calc 15vh 48px
+
3px
Radius 3px
− var(--border-radius-8) Radius var border radius 8
− var(--border-radius-4) Radius var border radius 4
− var(--border-radius-container) Radius var border radius container
− var(--border-radius-6) Radius var border radius 6
− var(--border-radius-12) Radius var border radius 12
− 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-round) Radius var border radius round
− var(--border-radius-default) Radius var border radius default
--shadow-1
+ 0px 8px 16px 0px #02020352 --shadow-2
+ -8px 0 24px #0000 Shadow 10
+ -8px 0 24px #0000002e Shadow 11
+ 0 4px 12px #f265224d,0 2px 4px #0000001a Shadow 12
− 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 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 0 var(--accent-primary-default) Shadow 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
− var(--shadow-2) Shadow 15
− 0 8px 32px #0000001f,0 2px 8px #00000014 Shadow 16
− 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
− inset 0 -1px 0 var(--background-highest) Shadow 19
− var(--shadow-0) Shadow 20
− 0 3px 6px #0202030d Shadow 21
− 0 0 3px #00000080 Shadow 22
− 0 8px 24px #0000001f Shadow 23
− inset 0 0 #fff0 Shadow 24