Remixes of apple.com
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Apple
description: |
Apple's design system embodies minimalist elegance and precision, with a
pronounced emphasis on whitespace, clean typography, and purposeful colour
hierarchy. The visual atmosphere is one of refined simplicity—surfaces are
mostly neutral (white and soft grays), allowing content and brand moments to
command attention. The system privileges legibility and functional clarity
over ornamentation, employing a restrained palette that shifts between
luminous white canvases, soft gray containers, and deliberate accent moments
in the signature Apple blue. Typography is generous and deliberate, with
tightly tracked display sizes that convey premium aspiration, while body copy
maintains comfortable readability at scaled sizes. The overall mood is
contemporary, trustworthy, and effortlessly sophisticated—a system that
communicates innovation through restraint rather than complexity.
source:
url: "https://apple.com"
pagesAnalyzed: 6
extractedAt: 2026-10-15
tokensMeasured: true
colors:
primary: "#0071E3"
accent: "#2997FF"
canvas: "#FFFFFF"
surface: "#F5F5F7"
on-primary: "#FFFFFF"
ink: "#000000"
body: "#1D1D1F"
muted: "#6E6E73"
faint: "#F5F5F7"
hairline: "#D2D2D7"
accent-1: "#0066CC"
accent-2: "#0000EE"
accent-3: "#B64400"
neutral-1: "#333336"
neutral-2: "#E8E8ED"
typography:
display-xl:
fontFamily: "SF Pro Display"
fontSize: 80px
fontWeight: 600
lineHeight: 1.05
letterSpacing: -1.2px
display-lg:
fontFamily: "SF Pro Display"
fontSize: 64px
fontWeight: 600
lineHeight: 1.06
letterSpacing: -0.58px
display-md:
fontFamily: "SF Pro Display"
fontSize: 56px
fontWeight: 600
lineHeight: 1.07
letterSpacing: -0.28px
display-sm:
fontFamily: "SF Pro Display"
fontSize: 48px
fontWeight: 600
lineHeight: 1.08
letterSpacing: -0.14px
display-xs:
fontFamily: "SF Pro Display"
fontSize: 40px
fontWeight: 600
lineHeight: 1.1
letterSpacing: 0px
heading-xl:
fontFamily: "SF Pro Display"
fontSize: 32px
fontWeight: 600
lineHeight: 1.13
letterSpacing: 0.13px
heading-lg:
fontFamily: "SF Pro Display"
fontSize: 28px
fontWeight: 400
lineHeight: 1.14
letterSpacing: 0.2px
heading-lg-strong:
fontFamily: "SF Pro Display"
fontSize: 28px
fontWeight: 600
lineHeight: 1.14
letterSpacing: 0.2px
heading-md:
fontFamily: "SF Pro Display"
fontSize: 24px
fontWeight: 600
lineHeight: 1.17
letterSpacing: 0.22px
heading-sm:
fontFamily: "SF Pro Display"
fontSize: 19px
fontWeight: 600
lineHeight: 1.21
letterSpacing: 0.23px
heading-xs:
fontFamily: "SF Pro Text"
fontSize: 14.04px
fontWeight: 600
lineHeight: 1.33
letterSpacing: -0.12px
body-md:
fontFamily: "SF Pro Text"
fontSize: 17px
fontWeight: 400
lineHeight: 1.18
letterSpacing: -0.37px
body-md-strong:
fontFamily: "SF Pro Text"
fontSize: 17px
fontWeight: 600
lineHeight: 1.47
letterSpacing: -0.37px
body-sm:
fontFamily: "SF Pro Text"
fontSize: 14px
fontWeight: 400
lineHeight: 1.29
letterSpacing: -0.22px
body-sm-strong:
fontFamily: "SF Pro Text"
fontSize: 14px
fontWeight: 600
lineHeight: 1.29
letterSpacing: -0.22px
body-xs:
fontFamily: "SF Pro Text"
fontSize: 12px
fontWeight: 400
lineHeight: 1
letterSpacing: -0.12px
body-xs-loose:
fontFamily: "SF Pro Text"
fontSize: 12px
fontWeight: 400
lineHeight: 1.33
letterSpacing: -0.12px
button:
fontFamily: "SF Pro Text"
fontSize: 17px
fontWeight: 400
lineHeight: 2.41
letterSpacing: 0px
caption-sm:
fontFamily: "SF Pro Text"
fontSize: 12px
fontWeight: 600
lineHeight: 1.33
letterSpacing: -0.12px
caption-xs:
fontFamily: "SF Pro Text"
fontSize: 10px
fontWeight: 600
lineHeight: 1.2
letterSpacing: -0.08px
rounded:
none: 0px
xs: 8px
sm: 11px
md: 28px
full: 9999px
spacing:
xxs: 8px
xs: 12px
sm: 16px
md: 20px
lg: 24px
xl: 28px
xxl: 32px
xxxl: 36px
section: 40px
band: 44px
elevationStrategy: color-blocking
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFFF"
surface: "#F5F5F7"
surfaceRaised: "#EBEBED"
text: "#000000"
textMuted: "#1D1D1F"
border: "#D2D2D7"
accent: "#0071E3"
accentFg: "#FFFFFF"
focusRing: "#0071E3"
elevation: shadow
dark:
bg: "#090F16"
surface: "#181D24"
surfaceRaised: "#242930"
text: "#F5F9FE"
textMuted: "#9BA0A6"
border: "#30353B"
accent: "#007BF7"
accentFg: "#0B0B0C"
focusRing: "#0071E3"
elevation: "border+surface"
components:
button-filled:
typography: "{typography.button}"
textColor: "rgba(0, 0, 0, 0.8)"
border: "3px solid rgba(0, 0, 0, 0.04)"
height: 42px
padding: "0px 14px 0px 14px"
rounded: "{rounded.sm}"
backgroundColor: "rgb(250, 250, 252)"
button-primary:
typography: "{typography.body-md}"
textColor: "{colors.on-primary}"
height: 20px
padding: "11px 21px 11px 21px"
rounded: 980px
backgroundColor: "{colors.primary}"
button-filled-sm:
typography: "{typography.body-sm}"
textColor: "{colors.on-primary}"
height: 36px
padding: "8px 15px 8px 15px"
rounded: "{rounded.xs}"
backgroundColor: "{colors.body}"
button-primary-sm:
typography: "{typography.body-sm}"
textColor: "{colors.on-primary}"
height: 18px
padding: "8px 15px 8px 15px"
rounded: 980px
backgroundColor: "{colors.primary}"
button-icon:
textColor: "{colors.body}"
height: 36px
fontSize: 17px
fontFamily: "SF Pro Text"
fontWeight: 400
lineHeight: 1.47
rounded: "50%"
backgroundColor: "rgba(210, 210, 215, 0.64)"
button-icon-sm:
textColor: "rgba(0, 0, 0, 0.48)"
height: 24px
fontSize: 17px
fontFamily: "SF Pro Text"
fontWeight: 400
lineHeight: 1.47
rounded: "50%"
backgroundColor: "rgba(210, 210, 215, 0.64)"
card:
typography: "{typography.body-xs-loose}"
textColor: "rgba(0, 0, 0, 0.56)"
card-featured:
textColor: "rgba(255, 255, 255, 0.92)"
padding: "32px 32px 32px 32px"
fontSize: 17px
fontFamily: "SF Pro Text"
fontWeight: 400
lineHeight: 1.47
rounded: "{rounded.md}"
backgroundColor: "rgb(36, 36, 38)"
card-2:
textColor: "rgba(0, 0, 0, 0.88)"
padding: "32px 32px 32px 32px"
fontSize: 17px
fontFamily: "SF Pro Text"
fontWeight: 400
lineHeight: 1.47
rounded: "{rounded.md}"
backgroundColor: "{colors.surface}"
navigation:
textColor: "{colors.body}"
height: 44px
fontSize: 17px
fontFamily: "SF Pro Text"
fontWeight: 400
lineHeight: 1.47
backgroundColor: "rgba(255, 255, 255, 0.8)"
navigation-2:
textColor: "{colors.body}"
height: 44px
fontSize: 17px
fontFamily: "SF Pro Text"
fontWeight: 400
lineHeight: 1.47
footer:
typography: "{typography.body-xs-loose}"
textColor: "rgba(0, 0, 0, 0.56)"
backgroundColor: "{colors.surface}"
link:
textColor: "{colors.accent}"
fontSize: 17px
fontFamily: "SF Pro Text"
fontWeight: 400
lineHeight: 1.47
backgroundColor: "{colors.ink}"
link-lg:
textColor: "{colors.accent-1}"
fontSize: 17px
fontFamily: "SF Pro Text"
fontWeight: 400
lineHeight: 1.47
badge-text:
typography: "{typography.caption-sm}"
textColor: "{colors.accent-3}"
height: 16px
states:
button-focus-visible:
target: button
state: focus-visible
opacity: 1
link-hover:
target: link
state: hover
textDecoration: none
link-focus:
target: link
state: focus
outline: none
nav-hover:
target: nav
state: hover
opacity: 1
button-hover:
target: button
state: hover
opacity: 1
button-active:
target: button
state: active
outline: none
other-hover:
target: other
state: hover
textColor: "{colors.ink}"
link-focus-visible:
target: link
state: focus-visible
outline: none
other-focus:
target: other
state: focus
outline: none
link-disabled:
target: link
state: disabled
textDecoration: none
card-hover:
target: card
state: hover
textDecoration: none
other-focus-visible:
target: other
state: focus-visible
outline: none
other-active:
target: other
state: active
outline: none
input-focus:
target: input
state: focus
outline: none
link-active:
target: link
state: active
textDecoration: none
other-disabled:
target: other
state: disabled
textDecoration: none
card-focus-visible:
target: card
state: focus-visible
outline: none
button-disabled:
target: button
state: disabled
opacity: 0.32
breakpoints:
- width: 375
containerWidth: 343
gridColumns: 3
navLinksVisible: 14
menuToggleVisible: true
headingPx: 32
bodyPx: 17
sectionPaddingX: 0
- width: 768
containerWidth: 736
gridColumns: 3
navLinksVisible: 3
menuToggleVisible: true
headingPx: 48
bodyPx: 17
sectionPaddingX: 12
- width: 1024
containerWidth: 980
gridColumns: 3
navLinksVisible: 78
menuToggleVisible: true
headingPx: 48
bodyPx: 17
sectionPaddingX: 12
- width: 1280
containerWidth: 980
gridColumns: 3
navLinksVisible: 78
menuToggleVisible: true
headingPx: 56
bodyPx: 17
sectionPaddingX: 12
- width: 1440
containerWidth: 980
gridColumns: 3
navLinksVisible: 78
menuToggleVisible: true
headingPx: 56
bodyPx: 17
sectionPaddingX: 12
coverage:
statesFound: 114
gradientsFound: 0
rolesUnassigned: 5
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
Apple's design system embodies minimalist elegance and precision, with a pronounced emphasis on whitespace, clean typography, and purposeful colour hierarchy. The visual atmosphere is one of refined simplicity—surfaces are mostly neutral (white and soft grays), allowing content and brand moments to command attention. The system privileges legibility and functional clarity over ornamentation, employing a restrained palette that shifts between luminous white canvases, soft gray containers, and deliberate accent moments in the signature Apple blue. Typography is generous and deliberate, with tightly tracked display sizes that convey premium aspiration, while body copy maintains comfortable readability at scaled sizes. The overall mood is contemporary, trustworthy, and effortlessly sophisticated—a system that communicates innovation through restraint rather than complexity.
Key Characteristics
{colors.primary} — #0071E3): Primary call-to-action buttons, brand mark, hero band accents, active states, and all primary interactive affordances. This is the dominant system colour signalling the brand and driving user action.{colors.accent} — #2997FF): Secondary accent and hero band highlights; used sparingly to create visual interest and depth layering alongside the primary brand blue.{colors.accent-3} — #B64400): Decorative accent without assigned semantic role; used for visual richness and product imagery in hero contexts.{colors.accent-1} — #0066CC): Decorative accent without assigned semantic role; supports visual variance across product showcases.{colors.accent-2} — #0000EE): Decorative accent without assigned semantic role; reserved for specialized hero or promotional contexts.{colors.canvas} — #FFFFFF): Default page background and primary surface; also used as label and text colour on brand-coloured surfaces.{colors.surface} — #F5F5F7): Card and panel backgrounds, providing subtle visual separation without strong contrast.{colors.neutral-1} — #333336): Secondary neutral for specialized contexts where stronger contrast than the muted ramp is required.{colors.neutral-2} — #E8E8ED): Tertiary neutral for borders and divider contexts requiring faint visual separation.{colors.ink} — #000000): Primary text for headings and high-contrast labelling; pure black for maximum legibility.{colors.body} — #1D1D1F): Standard body copy, slightly softened black to reduce eye strain while maintaining readability.{colors.muted} — #6E6E73): Captions, secondary text, tertiary labels, and de-emphasized content (footnotes, timestamps, helper text).{colors.hairline} — #D2D2D7): 1px borders, dividers, and structural lines; extremely subtle, creating visual organisation without visual weight.Primary: SF Pro Display (display and heading sizes) with fallback to -apple-system, BlinkMacSystemFont, sans-serif
Secondary: SF Pro Text (body, button, and small sizes) with fallback to -apple-system, BlinkMacSystemFont, sans-serif
Apple's type system uses two complementary families to distinguish hierarchy: Display for commanding presence (headings, hero text), and Text for content legibility and interaction labels.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | SF Pro Display | 80px | 600 | 1.05 (84px) | -1.2px | Hero statement, flagship headlines; extreme negative tracking creates premium feel |
| Display Large | SF Pro Display | 64px | 600 | 1.06 (67.8px) | -0.58px | Major section titles; maintains negative tracking for visual rhythm |
| Display Medium | SF Pro Display | 56px | 600 | 1.07 (59.9px) | -0.28px | Section headers at mid-to-large viewport; tighter tracking than Display Large |
| Display Small | SF Pro Display | 48px | 600 | 1.08 (51.8px) | -0.14px | Prominent headings; bridges display and content scale |
| Display XS | SF Pro Display | 40px | 600 | 1.1 (44px) | 0px | Large subheadings; tracking normalises, begins transition to neutral kerning |
| Heading XL | SF Pro Display | 32px | 600 | 1.13 (36.2px) | 0.13px | Featured card titles and prominent section breaks |
| Heading Large (Strong) | SF Pro Display | 28px | 600 | 1.14 (31.9px) | 0.2px | Card titles, subsection headers; positive tracking for clarity |
| Heading Large | SF Pro Display | 28px | 400 | 1.14 (31.9px) | 0.2px | Optional lighter-weight variant for hierarchy variation |
| Heading Medium | SF Pro Display | 24px | 600 | 1.17 (28.1px) | 0.22px | Secondary headings and list item titles |
| Heading Small | SF Pro Display | 19px | 600 | 1.21 (23px) | 0.23px | Tertiary headings and form section labels |
| Heading XS | SF Pro Display | 14.04px | 600 | 1.33 (18.7px) | -0.12px | Small section labels; minimal negative tracking |
| Body Medium (Strong) | SF Pro Text | 17px | 600 | 1.47 (25px) | -0.37px | Emphasized body text, strong labels within paragraphs |
| Body Medium | SF Pro Text | 17px | 400 | 1.18 (20.1px) | -0.37px | Standard body copy at larger viewport (>768px); comfortable reading line length |
| Button | SF Pro Text | 17px | 400 | 2.41 (41px) | 0px | Primary and secondary button labels; generous line-height for touch targets |
| Body Small (Strong) | SF Pro Text | 14px | 600 | 1.29 (18.1px) | -0.22px | Emphasized smaller text, metadata labels |
| Body Small | SF Pro Text | 14px | 400 | 1.29 (18.1px) | -0.22px | Secondary body copy, form placeholders; narrower measure for sidebar or card content |
| Caption Small | SF Pro Text | 12px | 600 | 1.33 (16px) | -0.12px | Strong captions and small section headings |
| Link Tight | SF Pro Text | 12px | 400 | 1 (12px) | -0.12px | Inline links with minimal leading |
| Link Loose | SF Pro Text | 12px | 400 | 1.33 (16px) | -0.12px | List item links or spaced link groups |
| Caption XS | SF Pro Text | 10px | 600 | 1.2 (12px) | -0.08px | Smallest text; legal copy, timestamps, footnotes |
Primary Button
#0071E3 ({colors.primary})#FFFFFF (white)11px 21px{rounded.full} (9999px / pill-shaped)1px solid transparentoutline: 2px solid var(--sk-focus-color, #0071E3)outline: noneopacity: 0.42Primary Button Small
#0071E3 ({colors.primary})#FFFFFF (white)8px 15px{rounded.xs} (8px)1px solid transparentSecondary / Filled Button
#FAFAFC (off-white)rgba(0, 0, 0, 0.8) (dark text)0px 14px{rounded.sm} (11px)3px solid rgba(0, 0, 0, 0.04) (minimal hairline)Secondary / Filled Button Small
#1D1D1F ({colors.body} — dark)#FFFFFF (white)8px 15px{rounded.xs} (8px)1px solid transparentIcon Button (Circular)
rgba(210, 210, 215, 0.64) (light gray with opacity)#1D1D1F ({colors.body})Icon Button Small
rgba(210, 210, 215, 0.64) (light gray with opacity)rgba(0, 0, 0, 0.48) (semi-transparent dark)Card Default
transparentrgba(0, 0, 0, 0.56) (muted){rounded.none} (0px — sharp)transform: scale(var(--card-element-scale))outline-color: var(--card-control-inner-outline-color, rgb(255, 255, 255)); outline-width: 6pxCard Featured
#242426 (very dark gray)rgba(255, 255, 255, 0.92) (white with slight transparency){spacing.xxl} (32px) on all sides{rounded.md} (28px)Card Default (Light)
#F5F5F7 ({colors.surface} — light gray)rgba(0, 0, 0, 0.88) (near-black){spacing.xxl} (32px) on all sides{rounded.md} (28px)Global Navigation
rgba(255, 255, 255, 0.8) (white with slight transparency, may be blurred)#1D1D1F ({colors.body})color: var(--r-globalnav-color-hover) (system-defined hover color)opacity: 1; color: rgb(0, 0, 0)outline: 2px solid var(--sk-focus-color, #0071E3)Global Navigation (Dark Variant)
rgba(0, 0, 0, 0) (transparent)#1D1D1F ({colors.body})color: rgb(255, 255, 255) (inverted for dark backgrounds)Text Input (Focus State)
2px solid var(--sk-focus-color, #0071E3) (brand blue focus ring)outline: 2px solid var(--sk-focus-color, #0071E3)outline: noneDefault Link
#2997FF ({colors.accent} — bright blue)color: rgb(0, 102, 204); text-decoration: underlineoutline: 2px solid var(--sk-focus-color, #0071E3)opacity: 0.42text-decoration: noneSecondary Link (Footer)
rgb(41, 151, 255) (bright accent)color: var(--footer-mini-shop-link-color); text-decoration: underlineBadge (Text)
#B64400 ({colors.accent-3} — decorative warm brown)Apple uses a base unit of 4px with a modular scale:
{spacing.xxs} = 8px — micro-spacing (tight groupings, icon padding){spacing.xs} = 12px — extra small (component gutters, label margins){spacing.sm} = 16px — small (form field spacing, list item padding){spacing.md} = 20px — medium (card padding, section breaks){spacing.lg} = 24px — large (prominent section padding){spacing.xl} = 28px — extra large (hero content padding){spacing.xxl} = 32px — double extra large (featured card padding, major layout padding){spacing.xxxl} = 36px — triple extra large (wide section spacing){spacing.section} = 40px — section gap (vertical rhythm between major content blocks){spacing.band} = 44px — full-height band spacing (global nav, sticky elements)Usage Context:
Apple's system prioritizes breathing room and visual clarity over density. Whitespace is generously applied around hero content, between sections, and within cards. This creates an impression of refinement and reduces cognitive load. Cards and featured content sit within expansive white or light-gray backgrounds, making them appear to float. Vertical rhythm is maintained via consistent spacing scales (section gaps of 40–44px), and the system avoids crowding interactive elements or text together. Generous margins around blocks of body copy improve readability and create visual hierarchy without increasing font sizes.
{rounded.none} = 0px — cards, default container; sharp, architectural aesthetic{rounded.xs} = 8px — small interactive elements (small buttons, tight badges){rounded.sm} = 11px — secondary/filled buttons, form inputs{rounded.md} = 28px — featured cards, prominent containers, image corners{rounded.full} = 9999px — primary buttons, icon buttons, pill-shaped affordancesComponent-Specific Application:
{rounded.full} (pill) for primary, {rounded.sm} (11px) for secondary, and {rounded.xs} (8px) for small variants{rounded.none} (0px, sharp), featured cards use {rounded.md} (28px, generous){rounded.md} (28px) for rounded framesApple's system employs a flat, single-tier elevation strategy — depth is achieved through colour blocking and subtle opacity shifts rather than layered shadows. No traditional shadow ladder exists; instead, the system relies on background colour contrast to suggest containment and hierarchy.
| Level | Treatment | Use |
|---|---|---|
| Flat (Base) | No shadow; solid background colour | Cards, buttons, surfaces, default content blocks |
| Single Tier (Pressed/Modal) | rgba(0, 0, 0, 0) 0px 0px 0px 1px inset | Modal overlays, input focus states, emphasised containers |
Shadow Philosophy: The absence of a multi-tier shadow system is intentional. Apple communicates depth through two primary mechanisms: colour shift (white canvas to light gray surface to dark featured cards) and scale (featured card at 372×680px versus default inline elements). The single inset border on modals provides a subtle visual container without lift. This approach maintains visual clarity and supports Apple's minimalist aesthetic—shadow systems can obscure content or create visual noise. When spatial relationships must be implied, the system prefers opacity and colour contrast.
The system employs strategic opacity shifts to indicate interactive states, disabled conditions, and content hierarchy:
0.36 (36%) — Light disabled or lowest-emphasis state0.42 (42%) — Disabled interactive elements, secondary emphasis0.64 (64%) — Icon button background, semi-opaque surfaces0.66 (66%) — Light transparency for borders and dividers0.80 (80%) — Navigation background, allowing blur-through0.88 (88%) — Dark text on white with slight transparency0.89 (89%) — Near-opaque secondary content0.92 (92%) — Featured card text, near full contrast0.99 (99%) — Near-opaque emphasis, highest contrast short of pure white/blackUse Cases:
opacity: 0.42rgba(255, 255, 255, 0.8) for translucency and frosted-glass effectrgba(0, 0, 0, 0.56) and higherThe system defines a shallow stacking order with 7 base layers and one dropdown tier:
z-index: 1 — Base layer (cards, content)z-index: 2 — Secondary cards, elevated containersz-index: 3 — Sticky content, persistent UIz-index: 4 — Overlays, persistent overlaysz-index: 5 — Modals, modal backgroundsz-index: 6 — Modal content, highest modal layerz-index: 7 — Topmost system layer (exit buttons, critical controls)z-index: 30 — Dropdown menus, popover triggers (isolated tier for menus)Principle: Dropdowns and popovers sit at z-index 30 to ensure they float above all base content and modals without competing with a full modal stack. The base layers keep most UI within a narrow 1–7 range for predictability and to prevent z-index collision.
#0071E3) for all primary calls-to-action and interactive affordances to signal brand intent and guide user action.{rounded.full}) for primary actions and keep secondary buttons slightly less rounded ({rounded.sm}, 11px) to create visual hierarchy without relying on shadow.2px solid #0071E3 focus ring consistently.{spacing.xxl} (32px) for card padding, {spacing.section} (40px) for vertical rhythm between sections.2px solid #0071E3.{rounded.md} (28px) for featured cards and prominent image frames; keep standard cards sharp ({rounded.none}, 0px) for a layered visual hierarchy.{rounded.none}, 0px). Reserve {rounded.md} (28px) only for featured or hero cards.2px solid #0071E3) — it is a consistent accessibility pattern across all interactive elements and should never be removed or substituted.{rounded.full}) for secondary or tertiary actions — pill buttons are reserved for primary CTAs. Secondary buttons use {rounded.sm} (11px); icon buttons use 50% radius.| Viewport | Width | Max Content | Heading | Body | Nav Visible | Section Padding-X | Key Changes |
|---|---|---|---|---|---|---|---|
| Mobile | 375px | 343px | 32px (Display XS) | 17px | 3 links collapsing → toggle | 0px | Single-column layout; hero full bleed; hamburger menu active |
| Tablet | 768px | 736px | 48px (Display Small) | 17px | 3 links visible | 12px | 2-column card grids emerge; section padding increases; nav stable |
| Desktop | 1024px | 980px | 48px (Display Small) | 17px | 8+ links visible | 12px | Multi-column card layouts; nav fully expanded; full keyboard navigation |
| Large Desktop | 1280px–1440px | 980px (capped) | 56px (Display Medium) | 17px | 8+ links visible | 12px | Heading size increases to Display Medium; content width caps at 980px; centered layout |
Responsive Transitions:
auto-fit or explicit media queries.#0071E3)#2997FF)#FFFFFF (white)#F5F5F7 (light gray)#000000 (black ink)#1D1D1F (dark body)#6E6E73 (muted gray)#D2D2D7 (hairline gray)#242426 (very dark for featured cards)#B64400 (badges, optional accent)Use the primary brand blue (#0071E3) as the single dominant accent. All primary interactive states, buttons, and call-to-action links default to this colour. Never replace it with alternative blues unless explicitly specified for a different role.
Apply pill-shaped buttons (border-radius: 9999px) exclusively to primary actions. Secondary buttons use border-radius: 11px; icon buttons use border-radius: 50%. This creates instant visual priority without shadow or scale tricks.
Letter-spacing on headlines is sacred. Display XL (80px) uses -1.2px tracking; Display Large (64px) uses -0.58px. This negative tracking must never be reset to 0 even if it feels "weird"—it is a defining brand trait.
Spacing scales in 4px increments from 8px to 44px. Use spacing.xxl (32px) for card padding, spacing.section (40px) for major vertical breaks. Never improvise intermediate values.
Cards default to sharp corners (border-radius: 0px). Only featured or hero cards use border-radius: 28px. This two-tier radius system (0 vs. 28) is intentional and creates hierarchy.
No shadows; depth via colour. Dark featured cards (#242426) sit on white canvases (#FFFFFF). Light surface cards (#F5F5F7) sit on white backgrounds. Layering colour creates containment.
Focus indicators are always 2px solid #0071E3. This is non-negotiable for accessibility and brand consistency. Never remove or substitute.
Disabled interactive elements are always opacity: 0.42. Hover states scale opacity upward; active states may add a subtle inset border or slight scale. Never gray-out disabled elements with a different colour.
Responsive breakpoints: 375px (mobile, single-column), 768px (tablet, multi-column, nav visible), 1024px+ (desktop, expanded nav, Display Small → Display Medium heading sizes).
Text is either SF Pro Display (headings) or SF Pro Text (body/buttons). Never mix within a single element. Display handles the visual drama; Text handles legibility.
Interaction states on cards and complex UI elements were partially extracted but may lack nuance. Some hover, focus, and active variants on specialized components were not fully measured and should be inferred from the button/link patterns above.
Error, success, warning, and semantic status colours are not declared by the system. The site does not expose a semantic colour ramp in its markup. Do not invent error red or success green; if status communication is needed, coordinate with Apple's design team or use the available decorative accent colours (#B64400, #0066CC) sparingly and with clear documentation.
Gradients, blurs, and decorative mesh effects were not found in extracted CSS. If the site uses gradients or frosted-glass effects on hero sections or overlays, they were not captured in this extraction and should be visually verified against the live site.
Responsive typography scaling strategies (e.g., fluid type between breakpoints using clamp()) were not detected. The extraction shows discrete size changes at breakpoints; smooth scaling between 375px and 768px may be applied in production but was not measured.
Dark mode or theme variants were not extracted. The extraction covers the light theme only. If Apple ships a dark-mode version, it will have a separate colour ramp and should be documented separately.
Micro-interactions, animations, and transitions (e.g., button press feedback, card slide-in, drawer open/close) were not captured. Only static CSS states and opacity shifts are documented.
Five decorative accent colours (#0066CC, #0000EE, #B64400, and two others) lack assigned semantic roles. They appear in product imagery and hero contexts but have no measured functional purpose. Treat them as visual richness rather than system primitives.
Some cross-origin stylesheets may be unreadable, so component-level CSS detail on embedded iframes or third-party widgets may be incomplete.
Surfaces behind authentication (e.g., user account pages, gated content) were not visited. The extraction covers public-facing pages only.
Border-width precision on some components was not fully extracted. The system appears to use minimal borders (hairlines around 1px), but exact stroke widths on every component role may differ slightly from measured values.
Document Version: 1.0
Extracted from: apple.com
Pages Analysed: 6 (public-facing product and policy pages)
Extraction Date: Current
Design System Maturity: Highly refined, production-grade system with consistent tokens across all measured pages