Design token diff
Showing changes between two snapshots of claude.com
+50 added−76 removedpw@1.58.2
Colors
+8 added−10 removed13 unchangedTypography
+6 added−17 removed+"Anthropic Sans", Arial, sans-serif|19.8571px|400Anthropic Sans 19.8571px / 400
+"Anthropic Sans", Arial, sans-serif|15px|400Anthropic Sans 15px / 400
+"Anthropic Sans", Arial, sans-serif|12px|400Anthropic Sans 12px / 400
+"Anthropic Sans", Arial, sans-serif|15px|500Anthropic Sans 15px / 500
+"Anthropic Serif", Georgia, sans-serif|17px|400Anthropic Serif 17px / 400
+"Anthropic Sans", Arial, sans-serif|12px|500Anthropic Sans 12px / 500
−anthropicSans, "anthropicSans Fallback", system-ui, sans-serif|15px|400
Spacing
+19 added−25 removed7 unchanged+0remSpace 0rem
+0emSpace 0em
+0.5remSpace 0.5rem
+0.75remSpace 0.75rem
+2remSpace 2rem
+10pxSpace 10px
+13.5px13.5px
+
Border Radius
+12 added−12 removed4 unchanged+1remRadius 1rem
+999pxRadius 999px
+#faf9f5Radius faf9f5
+#141413Radius 141413
+#5e5d59Radius 5e5d59
+#f5f4edRadius f5f4ed
+.5remRadius .5rem
Shadows
+5 added−12 removed+0 4px 24px rgba(0,0,0,.05)Shadow 1
+0px 4px 20px rgba(0,0,0,0.04)Shadow 2
+rgb(250, 249, 245) 0px 0px 0px 0px, rgb(209, 207, 197) 0px 0px 0px 1pxshadow-div.button_small_wrap.w-variant-a8c9bb6a-76f8-d6fa-8374-826ae4429994
+rgb(20, 20, 19) 0px 0px 0px 0px, rgb(48, 48, 46) 0px 0px 0px 1pxshadow-div.button_small_wrap
+rgba(0, 0, 0, 0.15) 0px 12px 24px 0pxshadow-div.toast_wrap
−0 0 0 3px #00000014Shadow 1
−0 0 0 .0625rem #faf9f5Shadow 2
anthropicSans 15px / 400
−anthropicSans, "anthropicSans Fallback", system-ui, sans-serif|16px|400anthropicSans 16px / 400
−anthropicSans, "anthropicSans Fallback", system-ui, sans-serif|12px|400anthropicSans 12px / 400
−anthropicSans, "anthropicSans Fallback", system-ui, sans-serif|17px|600anthropicSans 17px / 600
−anthropicSans, "anthropicSans Fallback", system-ui, sans-serif|17px|400anthropicSans 17px / 400
−anthropicSans, "anthropicSans Fallback", system-ui, sans-serif|17px|500anthropicSans 17px / 500
−anthropicSerif, "anthropicSerif Fallback", Georgia, serif|30px|400anthropicSerif 30px / 400
−anthropicSans, "anthropicSans Fallback", system-ui, sans-serif|24px|600anthropicSans 24px / 600
−anthropicSans, "anthropicSans Fallback", system-ui, sans-serif|14px|400anthropicSans 14px / 400
−anthropicSans, "anthropicSans Fallback", system-ui, sans-serif|16px|500anthropicSans 16px / 500
−anthropicSerif, "anthropicSerif Fallback", Georgia, serif|24px|400anthropicSerif 24px / 400
−anthropicSerif, "anthropicSerif Fallback", Georgia, serif|52px|330anthropicSerif 52px / 330
−anthropicSans, "anthropicSans Fallback", system-ui, sans-serif|14px|500anthropicSans 14px / 500
−anthropicSans, "anthropicSans Fallback", system-ui, sans-serif|16px|700anthropicSans 16px / 700
−anthropicSerif, "anthropicSerif Fallback", Georgia, serif|25px|500anthropicSerif 25px / 500
−anthropicSerif, "anthropicSerif Fallback", Georgia, serif|17px|400anthropicSerif 17px / 400
−anthropicSans, "anthropicSans Fallback", system-ui, sans-serif|11px|400anthropicSans 11px / 400
44.4219px
44.4219px
−calc(.25rem + env(safe-area-inset-right,0px)Space calc .25rem env safe area inset right 0px
−clamp(.5rem,1vw,1rem)Space clamp .5rem 1vw 1rem
−clamp(.75rem,1.5vw,1.25rem)Space clamp .75rem 1.5vw 1.25rem
+
.75rem
Radius .75rem
−0 0 12px12pxRadius 0 0 12px12px
−12px12px0 0Radius 12px12px0 0
−0 24px24px0Radius 0 24px24px0
−24px24px0 0Radius 24px24px0 0
−24px0 0 24pxRadius 24px0 0 24px
−0 0 0 .125rem #faf9f5Shadow 3
−0 0 0 2px #faf9f5Shadow 5
−0 0 0 0 #30302e,0 0 0 1px #3d3d3aShadow 6
−0 0 0 1px #30302e,0 0 0 2px #3d3d3aShadow 7
−0 0 0 0 #141413,0 0 0 1px #3d3d3aShadow 8
−0 0 0 1px #141413,0 0 0 2px #3d3d3aShadow 9
−0 0 0 0 #c6613fShadow 10
−0 0 0 2px #c6613fShadow 11
−0 4px 16px #0000001aShadow 12