Design token diff

Showing changes between two snapshots of apple.com

Before

Apr 1, 2026

View snapshot

After

Apr 11, 2026

View snapshot

Before

Apr 1, 2026

After

Apr 11, 2026

+47 added−37 removed

Colors

+19 added−10 removed22 unchanged

Typography

+8 added−7 removed12 unchanged
+"SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif|44px|400SF Pro Text 44px / 400
+"SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif|40px|600SF Pro Display 40px / 600
+"SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif|21px|400SF Pro Display 21px / 400
+"SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif|14px|600SF Pro Text 14px / 600
+"SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif|21px|700SF Pro Display 21px / 700
+"SF Pro Text", "Myriad Set Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Icons", "Apple Legacy Icons", "Helvetica Neue", Helvetica, Arial, sans-serif|18px|300SF Pro Text 18px / 300
+"SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif|25.5px|600SF Pro Text 25.5px / 600
+"SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif|56px|600SF Pro Display 56px / 600
−inherit|1em|inheritAc Globalfooter
−"SF Pro Display", "Myriad Set Pro", "SF Pro Icons", "Apple Legacy Chevron", "Helvetica Neue", "Helvetica", "Arial", sans-serif|19px|600Ac Globalfooter Ac 4
−"SF Pro Display", "Myriad Set Pro", "SF Pro Icons", "Apple Legacy Chevron", "Helvetica Neue", "Helvetica", "Arial", sans-serif|21px|600Ac Globalfooter Ac 5
−"SF Pro Text", "Myriad Set Pro", "SF Pro Icons", "Apple Legacy Chevron", "Helvetica Neue", "Helvetica", "Arial", sans-serif|12px|400Ac Globalfooter 2
−"SF Pro Text", "Myriad Set Pro", "SF Pro Icons", "Apple Legacy Chevron", "Helvetica Neue", "Helvetica", "Arial", sans-serif|12px|600Ac Globalfooter Ac 6
−"SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif|12px|400Ac Localnav Ac
−"SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif|14px|400Ac Localnav Ac 2

Spacing

+12 added−12 removed20 unchanged
+var(--sk-headline-plus-headline-margin, 0.4em)Space var sk headline plus headline margin 0.4em
+0.25emSpace 0.25em
+0.4emSpace 0.4em
+9.6px9.6px
+15px15px
+17px17px
+19px19px
+20px20px
+21px21px
+40px40px
+48px48px
+52px52px
−0pxSpace 0px
−calc(-100% + 2.5px)Space calc 100 2.5px
−5.5pxSpace 5.5px
−var(--sk-links-stacked-margin, 0.4em)Space var sk links stacked margin 0.4em
−6.75pxSpace 6.75px
−10pxSpace 10px
−10.8pxSpace 10.8px
−calc(11px + env(safe-area-inset-bottom)Space calc 11px env safe area inset bottom
−.8emSpace .8em
−var(--sk-headline-plus-first-element-margin, .8em)Space var sk headline plus first element margin .8em
−var(--sk-paragraph-plus-element-margin, .8em)Space var sk paragraph plus element margin .8em
−13pxSpace 13px

Border Radius

+4 added−8 removed10 unchanged
+999pxRadius 999px
+var(--sk-dotnav-iconcontrol-border-radius)Radius var sk dotnav iconcontrol border radius
+980px980px
+11px11px
−var(--modal-close-border-radius)Radius var modal close border radius
−var(--modal-overlay-border-radius-top) var(--modal-overlay-border-radius-top) var(--modal-overlay-border-radius-bottom) var(--modal-overlay-border-radius-bottom)Radius var modal overlay border radius top var modal overlay border radius top var modal overlay border radius bottom var modal overlay border radius bottom
−inheritRadius inherit
−16pxRadius 16px
−3pxRadius 3px
−100%Radius 100%
−19.5pxRadius 19.5px
−27.5pxRadius 27.5px

Shadows

+4 added
+0px 0px 5px rgba(0,0,0,.6)Shadow 1
+3px 5px 30px rgba(0,0,0,.22)Shadow 2
+rgba(0, 0, 0, 0.6) 0px 0px 5pxshadow-p.media-gallery-longnote
+rgba(0, 0, 0, 0.22) 3px 5px 30px 0pxshadow-picture.media-gallery-bg.media-gallery-bg-music
Back to apple.com archive