Home / Browse / slack.com / Diff Design token diff Showing changes between two snapshots of slack.com
+31 added −37 removed pw@1.58.2
Colors +8 added −14 removed 15 unchanged
Typography +8 added −8 removed 16 unchanged + Salesforce-Avant-Garde, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji|.875rem|700 Salesforce-avant-garde
+ Salesforce-Sans, system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"|12px|700 Salesforce-Sans 12px / 700
+ Salesforce-Avant-Garde, system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"|80px|700 Salesforce-Avant-Garde 80px / 700
+ Salesforce-Avant-Garde, system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"|64px|700 Salesforce-Avant-Garde 64px / 700
+ Salesforce-Avant-Garde, system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"|50px|600
Spacing +4 added −4 removed 28 unchanged + .2188rem Space .2188rem
+ .2275rem Space .2275rem
+ 8px normal 8px normal
+ 48px 48px
− .45rem Space .45rem
− 7.6px Space 7.6px
− 26px 26px
Border Radius +3 added −3 removed 13 unchanged + 999px Radius 999px
+ 12px Radius 12px
+ 9.6px Radius 9.6px
− 100vh Radius 100vh
− 16px Radius 16px
− 50% Radius 50%
Shadows +8 added −8 removed 4 unchanged + 0 0 1px #1818181a Shadow 1
+ 0 0 2rem #1818181a Shadow 2
+ inset 0 0 0 1px #730394 Shadow 4
+ inset 0 0 0 2px #730394 Shadow 5
+ inset 0 0 0 1px #c9c9c9 Shadow 8
+ inset 0 0 0 1px #fff6 Shadow 9
+ inset 0 0 0 2px #481a54 Shadow 10
Salesforce-Avant-Garde 50px / 600
+ Salesforce-Sans, system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"|18px|700 Salesforce-Sans 18px / 700
+ Salesforce-Avant-Garde, system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"|16px|700 Salesforce-Avant-Garde 16px / 700
+ Salesforce-Sans, system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"|0px|400 Salesforce-Sans 0px / 400
− Salesforce-Avant-Garde, system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"|96px|700 Salesforce-Avant-Garde 96px / 700
− Salesforce-Avant-Garde, system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"|58px|600 Salesforce-Avant-Garde 58px / 600
− Salesforce-Avant-Garde, system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"|50px|700 Salesforce-Avant-Garde 50px / 700
− Salesforce-Sans, system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"|10.5px|400 Salesforce-Sans 10.5px / 400
− Salesforce-Avant-Garde, system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"|18px|400 Salesforce-Avant-Garde 18px / 400
− Salesforce-Avant-Garde, system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"|21px|400 Salesforce-Avant-Garde 21px / 400
− Salesforce-Avant-Garde, system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"|50.4px|700 Salesforce-Avant-Garde 50.4px / 700
− Salesforce-Avant-Garde, system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"|16px|400 Salesforce-Avant-Garde 16px / 400
−
30px
30px
+
inset 0 0 0 1.5px #ffffff40
Shadow 12
− 0 0 1px #0000001a Shadow 1
− inset 0 0 0 1px #611f69 Shadow 3
− inset 0 0 0 2px #611f69 Shadow 4
− inset 0 0 0 1px #ebeaeb Shadow 7
− inset 0 0 0 2px #4a154b Shadow 8
− inset 0 0 0 1px #4285f4 Shadow 10
− inset 0 0 0 2px #4285f4 Shadow 11
− inset 0 0 0 1px #4a154b Shadow 12