Design token diff

Showing changes between two snapshots of apple.com

Before

Mar 30, 2026

View snapshot

After

Apr 10, 2026

View snapshot

Before

Mar 30, 2026

After

Apr 10, 2026

+38 added−41 removed

Colors

+13 added−4 removed28 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, "system-ui", "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, .4em)Space var sk headline plus headline margin .4em
+9.6px9.6px
+12px12px
+14px14px
+15px15px
+17px17px
+19px19px
+20px20px
+21px21px
+40px40px
+48px48px
+52px52px
−calc(-124px + var(--gutter-width)Space calc 124px var gutter width
−calc(-107px + var(--gutter-width)Space calc 107px var gutter width
−calc(-71px + var(--gutter-width)Space calc 71px var gutter width
−0pxSpace 0px
−calc(-100% + 2.5px)Space calc 100 2.5px
−.3emSpace .3em
−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
−calc(10px + env(safe-area-inset-right))Space calc 10px env safe area inset right
−10.8pxSpace 10.8px

Border Radius

+3 added−13 removed11 unchanged
+#fafafcRadius fafafc
+rgb(255, 255, 255)Radius rgb 255 255 255
+11px11px
−12pxRadius 12px
−10pxRadius 10px
−5.29412remRadius 5.29412rem
−3.05882remRadius 3.05882rem
−2.11765remRadius 2.11765rem
−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

+2 added−5 removed2 unchanged
+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
−0 0 0 3px #fff,0 0 0 5px #0071E3Shadow 1
−0 4px 18px rgba(0,0,0,0.25)Shadow 2
−0px 0px 5px rgba(0,0,0,0.6)Shadow 3
−0 0 0 3px #000,0 0 0 5px #0071E3Shadow 4
−0 0 0 4px #007d96Shadow 5
Back to apple.com archive