Design token diff
Showing changes between two snapshots of x.com
+83 added−32 removedpw@1.58.2
Colors
+28 added−5 removed3 unchangedTypography
+15 added−9 removed+TwitterChirp, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji, Twemoji Mozilla, sans-serif|calc(15 / var(--x-root-font-size,16) * 1rem * var(--x-font-scale,1))|400Twitterchirp
+TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif|15px|400TwitterChirp 15px / 400
+TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif|11px|400TwitterChirp 11px / 400
+TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif|15px|500TwitterChirp 15px / 500
+"Google Sans", arial, sans-serif|14px|400Google Sans 14px / 400
+
Spacing
+17 added−8 removed9 unchanged+.14emSpace .14em
+.5emSpace .5em
+.75remSpace .75rem
+3pxSpace 3px
+4px normal4px normal
+5pxSpace 5px
+6pxSpace 6px
+
Border Radius
+14 added−7 removed2 unchanged+calc(12px * 1)Radius calc 12px 1
+1remRadius 1rem
+1.5remRadius 1.5rem
+3pxRadius 3px
+6pxRadius 6px
+7pxRadius 7px
+8pxRadius 8px
+
Shadows
+9 added−3 removed+0 8px 24px #0003--x-shadow-lg
+0 1px 2px #00000026--drop-shadow-sm
+0 4px 4px #00000026--drop-shadow-lg
+0 1px 2px #0000001a--x-shadow-sm
+0 4px 12px #00000026--x-shadow-md
+0 8px 32px #00000059--x-shadow-toast
+0 4px 20px #0006--x-shadow-popup
+
TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif|12px|400
TwitterChirp 12px / 400
+TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif|14px|500TwitterChirp 14px / 500
+TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif|14px|400TwitterChirp 14px / 400
+TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif|17px|400TwitterChirp 17px / 400
+TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif|17px|500TwitterChirp 17px / 500
+TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif|12px|500TwitterChirp 12px / 500
+TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif|15px|700TwitterChirp 15px / 700
+TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif|13px|400TwitterChirp 13px / 400
+TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif|64px|600TwitterChirp 64px / 600
+"Google Sans", arial, sans-serif|14px|500Google Sans 14px / 500
−TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif|15px|400TwitterChirp 15px / 400
−TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif|11px|400TwitterChirp 11px / 400
−TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif|15px|700TwitterChirp 15px / 700
−TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif|13px|400TwitterChirp 13px / 400
−TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif|17px|500TwitterChirp 17px / 500
−TwitterChirpExtendedHeavy, Verdana, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif|64px|700TwitterChirpExtendedHeavy 64px / 700
−TwitterChirpExtendedHeavy, Verdana, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif|31px|700TwitterChirpExtendedHeavy 31px / 700
−TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif|17px|700TwitterChirp 17px / 700
−TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif|15px|500TwitterChirp 15px / 500
7px
Space 7px
+calc(calc(4px * 4)Space calc calc 4px 4
+calc(calc(4px * 8)Space calc calc 4px 8
9px
Radius 9px
rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 4px 20px 0px
shadow-button.border-normal.shadow-popup
+rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 4px 12px 0pxshadow-div.fixed.inset-x-0
−0 0 2px rgba(0,0,0,0.03) insetShadow 1
−0px 1px 3px rgba(0,0,0,0.5)Shadow 2
−rgba(101, 119, 134, 0.2) 0px 0px 7px 0px, rgba(101, 119, 134, 0.15) 0px 1px 3px 1pxshadow-div.css-175oi2r.r-1awozwy