Apple

Design Specification — Apple

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#0066CC). All type is set in SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif. Detected font weights: 200, 300, 400, 500, 600, 700, 800, 900. Detected style signatures: glassmorphism; gradient-rich / aurora.

Logo asset(s): https://apple.com/v/homepage/images/iphone-18-pro/a/hero_iphone_18_pro__fqe1motd0ymy_large.jpg

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• radial-gradient(100% 33% at left bottom, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0))
• linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7)),linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0) 200px)
• radial-gradient(white,black)
• radial-gradient(#fff,#000)

> 2 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: SF Pro Text — stack: SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif

Font stacks (most used first)

• SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif
• SF Pro Display,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif
• SF Pro AR,SF Pro AR Display,SF Pro Display,SF Pro Gulf,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif
• SF Pro KR,SF Pro Display,SF Pro Icons,Apple Gothic,HY Gulim,MalgunGothic,HY Dotum,Lexi Gulim,Helvetica Neue,Helvetica,Arial,sans-serif
• SF Pro TH,SF Pro Display,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif
• SF Pro SC,SF Pro Display,SF Pro Icons,PingFang SC,Helvetica Neue,Helvetica,Arial,sans-serif
• SF Pro HK,SF Pro Display,SF Pro Icons,PingFang HK,Helvetica Neue,Helvetica,Arial,sans-serif
• SF Pro HK,SF Pro TC,SF Pro Display,SF Pro Icons,PingFang HK,Helvetica Neue,Helvetica,Arial,sans-serif
• SF Pro TC,SF Pro Display,SF Pro Icons,PingFang TC,Helvetica Neue,Helvetica,Arial,sans-serif
• SF Pro AR,SF Pro AR Text,SF Pro Text,SF Pro Gulf,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif

Derived type scale

Font sizes (by frequency)

Weights in use: 200, 300, 400, 500, 600, 700, 800, 900

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 3px 5px 30px rgba(0,0,0,.22)

Layout

Container max-width: 833px

Breakpoints

• 480px
• 640px
• 734px
• 833px
• 834px
• 1023px
• 1068px
• 1069px

Animation & Motion

Transitions

• opacity .32s cubic-bezier(.4,0,.6,1) 80ms,visibility .32s step-end 80ms
• background 0s cubic-bezier(.4,0,.6,1) 80ms
• opacity .24s cubic-bezier(.4,0,.6,1)
• color .32s cubic-bezier(.4,0,.6,1)
• opacity .24s cubic-bezier(.4,0,.6,1) 80ms,visibility .24s step-start 80ms
• opacity .24s cubic-bezier(.4,0,.6,1),transform .24s cubic-bezier(.4,0,.6,1),visibility .24s step-end
• visibility .24s step-end
• opacity .32s cubic-bezier(.4,0,.6,1),color .32s cubic-bezier(.4,0,.6,1)
• none
• fill .32s cubic-bezier(.4,0,.6,1)
• opacity .32s cubic-bezier(.4,0,.6,1),fill .32s cubic-bezier(.4,0,.6,1),visibility .32s step-end
• opacity .32s cubic-bezier(.4,0,.6,1),fill .32s cubic-bezier(.4,0,.6,1),visibility .32s step-start

Easing curves

• cubic-bezier(.4,0,.6,1)
• cubic-bezier(.4,0,.6,1),cubic-bezier(.4,0,.6,1),step-start
• ease
• cubic-bezier(.25,.1,.3,1)
• cubic-bezier(0.4, 0, 0.6, 1)
• linear

Keyframes

@keyframes globalnav-chevron-slide-in-hover { 0%{opacity:0;transform:translate(-4px)}to{opacity:1;transform:translate(0)} }
@keyframes globalnav-chevron-hover-off { 0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)} }
@keyframes globalnav-flyout-slide-forward-next { 0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)} }
@keyframes globalnav-flyout-slide-forward-previous { 0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-8px)} }
@keyframes globalnav-flyout-slide-back-previous { 0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(8px)} }
@keyframes globalnav-flyout-slide-back-next { 0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)} }
@keyframes globalnav-scrim-height-change { 0%{height:var(--r-globalnav-previous-flyout-height)}to{height:var(--r-globalnav-next-flyout-height)} }
@keyframes globalnav-fade-in { 0%{opacity:0}to{opacity:1} }
@keyframes globalnav-search-fade { 0%{opacity:0;transform:translateY(0)}to{opacity:1;transform:translateY(0)} }
@keyframes globalnav-search-fade-and-slide { 0%{opacity:0;transform:translateY(calc(var(--r-globalnav-search-shift-vertical) * -1))}to{opacity:1;transform:translateY(0)} }
@keyframes globalnav-search-fade-and-slide-to-close { 0%{opacity:0;transform:translateY(calc(var(--r-globalnav-search-shift-vertical) * -1))}to{opacity:1;transform:translateY(0)} }
@keyframes globalnav-search-slide-top-to-bottom { 0%{transform:translateY(calc(var(--r-globalnav-suggested-links-height) * -1))}to{transform:translateY(0)} }
@keyframes globalnav-search-slide-bottom-to-top { 0%{transform:translateY(var(--r-globalnav-suggested-links-height))}to{transform:translateY(0)} }
@keyframes globalnav-search-input-intro { 0%{opacity:0;transform:translateY(var(--r-globalnav-search-input-vertical-shift))}to{opacity:1;transform:translateY(0)} }
@keyframes globalnav-search-input-outro { 0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(var(--r-globalnav-search-input-vertical-shift))} }
@keyframes segment-out { 0%{top:0px}to{top:calc(-1 * var(--r-globalmessage-segment-height))} }
@keyframes progress-indicator-animating { 0%{opacity:1}12.5%{opacity:.9}25%{opacity:.7}37.5%{opacity:.6}50%{opacity:.4}62.5%{opacity:.3}75%{opacity:.2}87.5%{opacity:.13} }
@keyframes dotnav-shift-start-1 { 0%{translate:calc(8px*var(--sk-dotnav-logical-factor))}100%{translate:0px} }

Animations

• globalnav-chevron-hover-off .24s cubic-bezier(.4,0,.6,1) both
• dotnav-timed-dot-expand 250ms ease-in

CTA labels found on page

• Learn more
• Pre-order
• Buy
• Apply now

Effects

• backdrop-filter: saturate(180%) blur(20px)
• backdrop-filter: blur(20px)
• backdrop-filter: blur(0px)

Source Design Tokens (CSS custom properties)

:root {
  --r-globalnav-background-opened: #fafafc;
  --r-globalnav-background-opened-dark: #161617;
  --r-globalnav-start: var(--r-sk-start, left);
  --r-globalnav-end: var(--r-sk-end, right);
  --r-globalnav-safe-area-inset-start: var(--sk-safe-area-inset-start, env(safe-area-inset-left));
  --r-globalnav-safe-area-inset-end: var(--sk-safe-area-inset-end, env(safe-area-inset-right));
  --r-globalnav-logical-factor: 1;
  --r-globalnav-flyout-close-delay: .12s;
  --r-globalnav-flyout-link-opacity-duration: .5s;
  --r-globalnav-flyout-spacing: 88px;
  --r-globalnav-next-flyout-height: 0px;
  --r-globalnav-previous-flyout-height: 0px;
  --r-globalnav-height: 44px;
  --r-globalnav-color: rgba(0, 0, 0, .8);
  --r-globalnav-color-secondary: #333336;
  --r-globalnav-color-hover: #000000;
  --r-globalnav-font-size: 17px;
  --globalnav-background: none;
  --globalnav-backdrop-filter: none;
  --r-globalnav-flyout-rate: 0s;
  --r-globalnav-duration-medium: .24s;
  --sk-focus-offset: -7px;
  --r-globalnav-submenu-header-color: rgb(110, 110, 115);
  --r-globalnav-flyout-height: 0;
  --r-globalnav-flyout-group-delay: min( (var(--r-globalnav-flyout-elevated-group-count) * 80ms) + ((var(--r-globalnav-flyout-group-number) - var(--r-globalnav-flyout-elevated-group-count)) * 40ms), var(--r-globalnav-flyout-group-number) * 80ms );
  --r-globalnav-search-icon-fill: rgb(110, 110, 115);
  --r-globalnav-search-icon-active-fill: #333336;
  --r-globalnav-search-input-placeholder-color: rgb(110, 110, 115);
  --r-globalnav-search-input-value-color: #333336;
  --r-globalnav-search-list-header-color: rgb(110, 110, 115);
  --r-globalnav-search-list-item-color: #333336;
  --r-globalnav-search-list-item-icon-fill: rgb(110, 110, 115);
  --r-globalnav-search-list-item-hover-background: rgb(245, 245, 247);
  --r-globalnav-search-list-item-hover-color: #000000;
  --r-globalnav-search-list-item-nonsearchterm-color: rgb(110, 110, 115);
  --r-globalnav-search-list-item-searchterm-color: #333336;
  --r-globalnav-search-input-vertical-shift: -4px;
  --r-globalnav-search-shift-vertical: 4px;
  --r-globalnav-searchresults-timeout: .44s;
  --globalnav-preceding-element-height: var(--r-localeswitcher-height, 0px);
  --globalmessage-segment-background: rgb(250, 250, 252);
  --globalmessage-segment-scrim-background: rgba(0, 0, 0, .04);
  --globalmessage-segment-text-color: rgba(0, 0, 0, .8);
  --globalmessage-segment-border-color: rgba(0, 0, 0, .48);
  --r-globalmessage-segment-content-inline-start: max( 22px, var(--r-globalheader-safe-area-inset-start) );
  --r-globalmessage-segment-content-inline-end: max( 22px, var(--r-globalheader-safe-area-inset-end) );
  --globalnav-badge-background: rgb(0, 0, 0);
  --globalnav-badge-text-color: rgb(255, 255, 255);
  --sk-focus-color: #0071e3;
  --sk-focus-color-alt: rgb(0, 0, 0);
  --sk-focus-offset-container: 3px;
  --r-sk-start: left;
  --r-sk-end: right;
  --r-sk-safe-area-inset-start: env(safe-area-inset-left);
  --r-sk-safe-area-inset-end: env(safe-area-inset-right);
  --r-sk-logical-factor: 1;
  --r-globalmessage-segment-height: 0px;
  --r-globalnav-segmentbar-height: 0px;
  --r-globalheader-start: var(--r-sk-start, left);
  --r-globalheader-end: var(--r-sk-end, right);
}

Do's and Don'ts

Do

• Do reserve the accent #0066CC for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 200, 300, 400, 500, 600, 700, 800, 900.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-primary: #0071E3;
  --color-accent: #0066CC;
  --color-background: #FFFFFF;
  --color-surface: #F5F5F7;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #6E6E73;
  --color-border: #333336;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #FAFAFC;
  --color-surface-container: #F5F5F7;
  --color-surface-container-high: #EDEDF2;
  --color-surface-container-highest: #E8E8ED;
  --font-sans: SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
  --font-size-display: 56px;
  --font-size-headline-lg: 40px;
  --font-size-headline-md: 28px;
  --font-size-title-lg: 21px;
  --font-size-body-lg: 17px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-md: 8px;
  --radius-lg: 20.8px;
  --radius-pill: 9999px;
  --shadow-md: 3px 5px 30px rgba(0,0,0,.22);
  --space-xs: 2px;
  --space-sm: 12px;
  --space-md: 17px;
  --space-lg: 39px;
  --tracking-display: -.022em;
  --tracking-label: .012em;
  --container-max: 833px;
}