Design token diff

Showing changes between two snapshots of claude.ai

Before

Apr 4, 2026

View snapshot

After

May 3, 2026

View snapshot

Before

Apr 4, 2026

After

May 3, 2026

+28 added−50 removed

Colors

+5 added−3 removed

Typography

−24 removed

−var(--font-mono)|1em|400Code

−inherit|100%|inheritButton

−var(--font-ui)!important|.875rem!important|430!importantFont Base

−var(--font-ui)|.875rem|430Font Base 2

−var(--font-ui)|.875rem|500Font Base Bold

−var(--font-ui-serif)|2.375rem|330Font Display

−var(--font-ui-serif)|1.5rem|500Font Heading

−var(--font-ui)|1rem|430Font Large

−var(--font-ui)|1rem|600Font Large Bold

−var(--font-ui)!important|.75rem!important|430!importantFont Small

−var(--font-ui)|.75rem|430Font Small 2

−var(--font-ui)|.75rem|600Font Small Bold

−var(--font-ui-serif)|1.75rem|500Font Title

−var(--font-ui)|1.25rem|400Font Xl

−var(--font-ui)|1.25rem|600Font Xl Bold

−var(--font-claude-response)|1rem|400Font Claude Response

−var(--font-claude-response)|1rem|600Font Claude Response 2

−var(--font-mono)|.688rem|400Font Claude Response 3

−var(--font-claude-response)|.875rem|400Font Claude Response 4

−var(--font-claude-response)|.875rem|600Font Claude Response 5

−var(--font-claude-response)|1.75rem|600Font Claude Response 6

−KaTeX_Main, Times New Roman, serif|1.21em|400Katex

−system-ui, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"|12px|400system-ui 12px / 400

Spacing

+14 added−21 removed11 unchanged

+.2777777778emSpace .2777777778em

+.27778emSpace .27778em

+.3emSpace .3em

+.3remSpace .3rem

+.3125remSpace .3125rem

+.35remSpace .35rem

+4.5pxSpace 4.5px

+5pxSpace 5px

+5.5pxSpace 5.5px

+8px8px

+16px16px

+32px32px

+128px128px

+160px160px

−calc(-.5rem * var(--tw-space-x-reverse)Space calc .5rem var tw space x reverse

−calc(-.5rem * calc(1 - var(--tw-space-x-reverse)Space calc .5rem calc 1 var tw space x reverse

−calc(-.5rem * calc(1 - var(--tw-space-y-reverse)Space calc .5rem calc 1 var tw space y reverse

−calc(-.5rem * var(--tw-space-y-reverse)Space calc .5rem var tw space y reverse

−0pxSpace 0px

−calc(0px * calc(1 - var(--tw-space-y-reverse)Space calc 0px calc 1 var tw space y reverse

−calc(0px * var(--tw-space-y-reverse)Space calc 0px var tw space y reverse

−calc(var(--df-header-h,0px)Space calc var df header h 0px

−var(--df-header-h,0px)Space var df header h 0px

−calc(1px * calc(1 - var(--tw-space-y-reverse)Space calc 1px calc 1 var tw space y reverse

−calc(1px * var(--tw-space-y-reverse)Space calc 1px var tw space y reverse

−calc(.125rem * calc(1 - var(--tw-space-y-reverse)Space calc .125rem calc 1 var tw space y reverse

−calc(.125rem * var(--tw-space-y-reverse)Space calc .125rem var tw space y reverse

−calc(.25rem * calc(1 - var(--tw-space-y-reverse)Space calc .25rem calc 1 var tw space y reverse

−calc(.25rem * var(--tw-space-y-reverse)Space calc .25rem var tw space y reverse

−.03889emSpace .03889em

−.05remSpace .05rem

−.1remSpace .1rem

−.5pxSpace .5px

−1pxSpace 1px

−1.5pxSpace 1.5px

Border Radius

+2 added−2 removed14 unchanged

+24pxRadius 24px

+12pxRadius 12px

−.9remRadius .9rem

−11.5pxRadius 11.5px

Shadows

+7 added5 unchanged

+var(--cds-focus-shadow)Shadow 1

+inset 0 0 0 1px var(--cds-border),0 1px 2px #0000000dShadow 6

+inset 0 0 0 1px var(--cds-border)Shadow 7

+var(--df-shadow-card)Shadow 8

+inset 0 0 0 1px var(--cds-fill-secondary-ring)Shadow 10

+inset 0 0 0 1px var(--cds-fill-accent)Shadow 11

+noneShadow 12

Back to claude.ai archive