Design token diff
Showing changes between two snapshots of chatgpt.com
+94 added−66 removedpw@1.58.2
Colors
+35 added−29 removed1 unchangedTypography
+16 added−2 removed+-apple-system-body, ui-sans-serif, -apple-system, "system-ui", Segoe UI, Helvetica, Apple Color Emoji, Arial, "sans-serif", Segoe UI Emoji, Segoe UI Symbol|.9375rem|400-apple-system-body
+-apple-system-body, ui-sans-serif, -apple-system, "system-ui", Segoe UI, Helvetica, Apple Color Emoji, Arial, "sans-serif", Segoe UI Emoji, Segoe UI Symbol|1.0625rem|400-apple-system-body 2
+-apple-system-body, ui-sans-serif, -apple-system, "system-ui", Segoe UI, Helvetica, Apple Color Emoji, Arial, "sans-serif", Segoe UI Emoji, Segoe UI Symbol|1.0625rem|500-apple-system-body 3
+-apple-system-body, ui-sans-serif, -apple-system, "system-ui", Segoe UI, Helvetica, Apple Color Emoji, Arial, "sans-serif", Segoe UI Emoji, Segoe UI Symbol|1.375rem|600-apple-system-body 4
+-apple-system-body, ui-sans-serif, -apple-system, "system-ui", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, "sans-serif", "Segoe UI Emoji", "Segoe UI Symbol"|16px|400-apple-system-body 16px / 400
Spacing
+21 added−13 removed11 unchanged+.2remSpace .2rem
+.375remSpace .375rem
+.4375remSpace .4375rem
+.5remSpace .5rem
+5pxSpace 5px
+6pxSpace 6px
+7pxSpace 7px
+
Border Radius
+10 added−10 removed6 unchanged+.75remRadius .75rem
+.875remRadius .875rem
+.625remRadius .625rem
+1.375remRadius 1.375rem
+12pxRadius 12px
+26pxRadius 26px
+50%Radius 50%
Shadows
+12 added−12 removed+0 .25rem 1rem #0000000dShadow 1
+0 .5rem 2rem #0000001fShadow 2
+0 .5rem .75rem1rem #00000014#00000052,inset 0 0 1px #0000#fff3,0 0 1px #0000009eShadow 3
+0 2px 2.5px #0000000f,0 9px 4.5px #00000003Shadow 4
+0 4px 16px #0000000dShadow 5
+inset 0 1px #ffffff94#ffffff14,0 4px 24px #0000001a#00000026Shadow 6
+0 0 0 1px #0000000a,0 2px 8px 0 #0000000a,0 4px 40px 8px #00000006 inset 0 0 1px 0 #fff3Shadow 7
+
-apple-system-body, ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"|14px|400
-apple-system-body 14px / 400
+-apple-system-body, ui-sans-serif, -apple-system, "system-ui", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, "sans-serif", "Segoe UI Emoji", "Segoe UI Symbol"|14px|400-apple-system-body 14px / 400
+-apple-system-body, ui-sans-serif, -apple-system, "system-ui", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, "sans-serif", "Segoe UI Emoji", "Segoe UI Symbol"|12px|400-apple-system-body 12px / 400
+-apple-system-body, ui-sans-serif, -apple-system, "system-ui", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, "sans-serif", "Segoe UI Emoji", "Segoe UI Symbol"|12px|500-apple-system-body 12px / 500
+-apple-system-body, ui-sans-serif, -apple-system, "system-ui", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, "sans-serif", "Segoe UI Emoji", "Segoe UI Symbol"|14px|500-apple-system-body 14px / 500
+-apple-system-body, ui-sans-serif, -apple-system, "system-ui", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, "sans-serif", "Segoe UI Emoji", "Segoe UI Symbol"|14px|600-apple-system-body 14px / 600
+-apple-system-body, ui-sans-serif, -apple-system, "system-ui", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, "sans-serif", "Segoe UI Emoji", "Segoe UI Symbol"|16px|650-apple-system-body 16px / 650
+-apple-system-body, ui-sans-serif, -apple-system, "system-ui", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, "sans-serif", "Segoe UI Emoji", "Segoe UI Symbol"|24px|400-apple-system-body 24px / 400
+-apple-system-body, ui-sans-serif, -apple-system, "system-ui", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, "sans-serif", "Segoe UI Emoji", "Segoe UI Symbol"|18px|600-apple-system-body 18px / 600
+-apple-system-body, ui-sans-serif, -apple-system, "system-ui", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, "sans-serif", "Segoe UI Emoji", "Segoe UI Symbol"|17px|700-apple-system-body 17px / 700
+-apple-system-body, ui-sans-serif, -apple-system, "system-ui", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, "sans-serif", "Segoe UI Emoji", "Segoe UI Symbol"|17px|400-apple-system-body 17px / 400
−Segoe UI Variable Small, -apple-system-body, "ui-sans-serif", -apple-system, "system-ui", Segoe UI, Helvetica, Apple Color Emoji, Arial, "sans-serif", Segoe UI Emoji, Segoe UI Symbol|12px|400Segoe Ui Variable Small
−Segoe UI Variable Text, -apple-system-body, "ui-sans-serif", -apple-system, "system-ui", Segoe UI, Helvetica, Apple Color Emoji, Arial, "sans-serif", Segoe UI Emoji, Segoe UI Symbol|14px|400Segoe Ui Variable Text
10px
10px
+calc(-1*max(0px,22px - .625rem)Space calc 1 max 0px 22px .625rem
+calc(250% + .25rem)Space calc 250 .25rem
+calc(.25rem + max(0px,22px - .625rem)Space calc .25rem max 0px 22px .625rem
+calc(125% - .375rem)Space calc 125 .375rem
−.142857emSpace .142857em
−.277778emSpace .277778em
−.285714emSpace .285714em
−calc(-1rem - 3px)Space calc 1rem 3px
−calc(env(safe-area-inset-top,0px)Space calc env safe area inset top 0px
+
62.4375rem
Radius 62.4375rem
+0 4px 6px -4px #0000001a,0 10px 15px -3px #0000001aShadow 8
+0 .25rem 1rem 0 #0000000d0 0 0 0 #fffoklch(24.7759% 0 none)Shadow 9
+0 0 0 1px #0000000a,0 2px 8px 0 #0000000a,0 4px 40px 8px #00000006 0 0 0 0 #fffoklch(24.7759% 0 none)Shadow 10
+0 0 0 1px #0000000a,0 2px 8px 0 #0000000a,0 4px 80px 8px #00000006 inset 0 0 1px 0 #fff3Shadow 11
+-8px 0 24px #0000001a#0000002eShadow 12
−0 1px 0 transparent--sharp-edge-top-shadow-placeholder
−0 2px 8px #0000000dShadow 2
−-.8px -.8px #fff,.8px -.8px #fff,-.8px .8px #fff,.8px .8px #fffShadow 3
−0 0 10px #ffffff59Shadow 4
−-.8px -.8px #000,.8px -.8px #000,-.8px .8px #000,.8px .8px #000Shadow 5
−0 0 1px #435a6f4d,0 5px 8px -4px #435a6f4dShadow 8
−0 0 15px #0000001a--shadow-xs
−0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a--shadow-lg
−0 1px 2px #00000026--drop-shadow-sm
−0 3px 3px #0000001f--drop-shadow-md