Design token diff
Showing changes between two snapshots of instagram.com
Colors
+21 added−23 removed25 unchangedTypography
+4 added−14 removed3 unchanged+Optimistic, Helvetica, Arial, sans-serif|15px|500Optimistic 15px / 500
+Optimistic, Helvetica, Arial, sans-serif|17px|600Optimistic 17px / 600
+Optimistic, Helvetica, Arial, sans-serif|13px|400Optimistic 13px / 400
+Optimistic, Helvetica, Arial, sans-serif|13px|700Optimistic 13px / 700
−var(--font-family-system)|var(--system-14-font-size)|400Ar45
−-apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif|14px|400-apple-system 14px / 400
Spacing
+6 added−6 removed26 unchanged+.15emSpace .15em
+.5emSpace .5em
+7.5pxSpace 7.5px
+8.5pxSpace 8.5px
+9pxSpace 9px
+9.5pxSpace 9.5px
−0pxSpace 0px
−
Border Radius
+7 added−7 removed9 unchanged+4pxRadius 4px
+6pxRadius 6px
+#0095F6Radius 0095F6
+#B0B3B8Radius B0B3B8
+rgba(255, 255, 255, 0.3)Radius rgba 255 255 255 0.3
+#31A24CRadius 31A24C
+rgba(24, 119, 242, .31)Radius rgba 24 119 242 .31
Shadows
+11 added−11 removed1 unchanged+0 0 8px 2px #005c6a,0 0 1px #005c6aShadow 2
+0 0 0 4px #341c63,0 0 0 8px #f0ebf5Shadow 3
+0 0 0 4px #341c63,0 0 0 12px #f0ebf5Shadow 4
+0 0 8px 2px #a20c17,0 0 1px #a20c17Shadow 5
+0 0 8px 2px #344854,0 0 1px #344854Shadow 6
+0 12px 28px 0 rgba(0, 0, 0, 0.2),0 2px 4px 0 rgba(0, 0, 0, 0.1),inset 0 0 0 1px rgba(255, 255, 255, 0.05)Shadow 7
+0 0 0 2px #ff9e9e
−
-apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif|14px|600
-apple-system 14px / 600
−-apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif|12px|400-apple-system 12px / 400
−Optimistic, system-ui, -apple-system, "system-ui", ".SFNSText-Regular", sans-serif|15px|500Optimistic 15px / 500
−-apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif|16px|700-apple-system 16px / 700
−Helvetica, Arial, sans-serif|12px|400Helvetica 12px / 400
−Times|16px|400Times 16px / 400
−Optimistic, system-ui, -apple-system, "system-ui", ".SFNSText-Regular", sans-serif|17px|600Optimistic 17px / 600
−Optimistic, system-ui, -apple-system, "system-ui", ".SFNSText-Regular", sans-serif|13px|400Optimistic 13px / 400
−Optimistic, system-ui, -apple-system, "system-ui", ".SFNSText-Regular", sans-serif|13px|700Optimistic 13px / 700
−-apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif|24px|700-apple-system 24px / 700
−-apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif|16px|400-apple-system 16px / 400
−-apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif|14px|700-apple-system 14px / 700
var(--x1x2px8i)
Space var x1x2px8i
−
var(--card-corner-radius)
Radius var card corner radius
−var(--modal-border-radius)Radius var modal border radius
−var(--input-border-radius)Radius var input border radius
−var(--accent)Radius var accent
−var(--secondary-icon)Radius var secondary icon
−var(--disabled-icon)Radius var disabled icon
−var(--positive)Radius var positive
Shadow 8
+0 0 0 1px rgba(0, 0, 0, 0.1)Shadow 9
+0 2px 12px rgba(0, 0, 0, 0.2)--shadow-emphasis
+inset 0 0 0 1px transparentShadow 11
+0 2px 4px rgba(255, 255, 255, 0.05)Shadow 12
−0 0 0 4px #3f2884,0 0 0 8px #5c3bbf33Shadow 1
−0 0 0 4px #3f2884,0 0 0 12px #5c3bbf33Shadow 2
−0 0 8px 2px #ffffffbf,0 0 1px #ffffffbfShadow 3
−0 0 8px 2px #4dbba6,0 0 1px #4dbba6Shadow 4
−0 0 0 4px #2d2369,0 0 0 8px #5c3bbf33Shadow 5
−0 0 0 4px #2d2369,0 0 0 12px #5c3bbf33Shadow 6
−0 0 8px 2px #0a78be,0 0 1px #0a78beShadow 7
−0 0 8px 2px #d93616,0 0 1px #d93616Shadow 8
−0 0 8px 2px #283943,0 0 1px #283943Shadow 9
−0 0 8px 2px #dc373c,0 0 1px #dc373cShadow 10
−0 0 8px 2px #fac83c,0 0 1px #fac83cShadow 12