BRAND Apple 2026 · Overview

HEADER brand: Apple; domain: www.apple.com (US); industry: consumer electronics, first-party retail; design_date: 2026-09 captured: https://www.apple.com/ and https://www.apple.com/iphone/, live, 2026-09-24 and 2026-09-25; evidence: measured (stylesheet rules and Chrome DevTools at 1440x900 and 390x844) unless marked style_tags: flat, responsive-mobile-first, full-bleed product tiles viewports: desktop 1440, mobile 390; breakpoints: marketing pages xlarge 1441+, large 1069-1440, medium 735-1068, small 734 and below, xsmall 480 and below; global header and footer compact at 833 and below pages: BRAND Apple 2026 · Page: home; BRAND Apple 2026 · Page: product-family recipes: BRAND Apple 2026 · Recipe: globalnav-flyout; BRAND Apple 2026 · Recipe: card-gallery rebuild check: not done RECOGNITION KEYS 1 Product imagery on quiet fields: white, #f5f5f7 or black; the UI itself has almost no color. 2 Very large semibold headlines (600) with negative tracking; one-line subhead; short copy. 3 One blue for every action: #0071e3 filled pill buttons, #0066cc links (#2997ff on dark). 4 Pill buttons (radius 980px); cards are 28px rounded rectangles; nothing has a shadow. 5 44px frosted nav bar (light or dark per page) with 12px links spread across 1024px; it opens into a same-material flyout panel. 6 Home: full-bleed tiles stacked with 12px white gaps, text centered at the top, product artwork below. 7 Content pages: left-aligned 56px headlines, 112px between sections, horizontal card shelves with grey round paddles. 8 Headline, subhead, CTA pair, always in this order. GUARDRAILS no box-shadows on tiles, cards or buttons; no UI gradients except soft dark scrims under text on media; one accent hue (blue) for actions and links; no borders on tiles and cards; home tiles and gallery slides have no radius; no liquid-glass refraction (only classic frosted blur); no site-wide dark mode (dark is per section); no emoji, no decorative icons; product finish colors appear only as swatches and imagery; no hover transitions on buttons and text links. TOKENS /* color */ --color-primary: #0071e3; --color-primary-hover: #0076df; --color-primary-active: #006edb; --color-on-primary: #ffffff; --color-ink: #1d1d1f; --color-text-secondary: #6e6e73; /* callouts, index titles, placeholder on light */ --color-text-muted: #86868b; /* same roles on dark, flyout column headers */ --color-surface: #ffffff; --color-surface-alt: #f5f5f7; --color-surface-nav: #fafafc; --color-surface-dark: #000000; --color-surface-dark-alt: #1d1d1f; --color-on-dark: #f5f5f7; --color-link: #0066cc; --color-link-on-dark: #2997ff; --color-border: #d2d2d7; /* dividers, accordion rows; #424245 on dark */ --color-label-new: #b64400; --color-neutral: #1d1d1f; --color-neutral-hover: #272729; --color-neutral-active: #18181a; --color-neutral-on-dark: #f5f5f7; --color-neutral-on-dark-hover: #ffffff; --color-neutral-on-dark-active: #ededf2; --color-control-bg: rgba(210,210,215,0.64); --color-control-glyph: rgba(0,0,0,0.48); --color-control-glyph-hover: rgba(0,0,0,0.72); --color-control-solid: #e8e8ed; --color-control-solid-hover: #ececf0; --color-control-solid-active: #dfdfe4; --color-nav-light-bg: rgba(245,245,247,0.8); /* rgba(255,255,255,0.8) without ribbon */ --color-nav-light-link: rgba(0,0,0,0.8); --color-nav-dark-bg: rgba(29,29,31,0.8); /* rgba(0,0,0,0.8) with ribbon */ --color-nav-dark-link: rgba(255,255,255,0.8); --color-curtain-light: rgba(232,232,237,0.4); --color-curtain-dark: rgba(0,0,0,0.4); --color-modal-scrim: rgba(0,0,0,0.48); --color-modal-scrim-light: rgba(232,232,237,0.48); --color-footer-text: rgba(0,0,0,0.56); --color-footer-title: rgba(0,0,0,0.88); --color-footer-link: rgba(0,0,0,0.72); --color-focus: #0071e3; /* font; html font-size 106.25% (1rem = 17px) */ --font-display: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif; /* all text 19px and larger */ --font-text: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif; /* all text 17px and smaller */ /* type scale: size / line-height / weight / tracking; tablet = max-width 1068, mobile = max-width 734 */ --type-page-headline: 80px/1.05/600/-0.015em; /* tablet 64px/1.0625/600/-0.009em; mobile 48px/1.08349/600/-0.003em */ --type-page-description: 28px/1.14286/600/0.007em; /* tablet 24px/1.16667/600/0.009em; mobile 21px/1.19048/600/0.011em */ --type-tile-headline: 56px/1.07143/600/-0.005em; /* tablet 48px/1.08349/600/-0.002em; mobile 32px/1.125/600/0.002em */ --type-section-headline: 56px/1.07143/600/-0.005em; /* tablet 48px/1.08349/600/-0.003em; mobile 28px/1.14286/600/0.007em */ --type-headline: 48px/1.08349/600/-0.002em; /* tablet 40px/1.1/600/0; mobile 32px/1.125/600/0.002em */ --type-promo-headline: 40px/1.1/600/0; /* tablet and mobile 32px/1.125/600/0.002em */ --type-card-headline: 28px/32px/600/0.007em; --type-eyebrow: 24px/1.16667/600/0.009em; /* mobile 21px/1.19048/600/0.011em */ --type-eyebrow-reduced: 21px/1.19048/600/0.011em; /* mobile 19px/1.21053/600/0.012em */ --type-card-eyebrow: 17px/21px/600/-0.022em; --type-tile-subhead: 28px/1.14286/400/0.007em; /* tablet 24px/1.16667/400/0.009em; mobile 19px/1.21053/400/0.012em */ --type-promo-subhead: 21px/1.19048/400/0.011em; /* tablet and mobile 19px/1.21053/400/0.012em */ --type-tile-callout: 19px/1.21053/400/0.012em; /* tablet 17px/1.23536/400/-0.022em; mobile 14px/1.28577/400/-0.016em */ --type-section-header-link: 17px/1.47059/400/-0.022em; /* mobile 14px/1.42859/400/-0.016em */ --type-body: 17px/25px/400/-0.022em; --type-button: 17px/1.17648/400/-0.022em; /* elevated and super sizes; base 14px/1.28577/400/-0.016em; reduced 12px/1.33337/400/-0.01em */ --type-chapternav-label: 14px/1.42859/600/-0.016em; --type-caption: 14px/1.42859/400/-0.016em; /* ribbon text; elevated ribbon 17px */ --type-small: 12px/1.33337/400/-0.01em; /* nav, footer, legal; footer titles 12px/600 */ --type-label-new: 12px/16px/600/-0.01em; --type-flyout-link: 24px/1.16667/600/0.009em; --type-mobile-menu-link: 28px/1.14286/600/0.007em; --type-search-input: 24px/1.16667/600; /* mobile 28px/1.14286/600 */ /* space and layout */ --space: values in use 3 4 6 8 9 11 12 13 14 16 17 20 22 34 40 48 56 60 64 76 80 96 112; --container-nav: 1024px; /* 980 inner + 22px padding */ --container-footer: 980px; --margin: 22px; --container-content: 87.5% of viewport, max 1260px; /* 1245px at 1440 (measured), 1260px at 1521 (measured) */ --section-pad: 112px; /* tablet 96px, mobile 56px; top and bottom */ --section-header-gap: 48px; /* mobile 32px, headline row to content */ --page-header-pad-top: 60px; /* tablet 40px */ --tile-gap: 12px; --card-gap: 20px; --gallery-slide-gap: 13px; /* shape */ --radius-button: 980px; --radius-card: 28px; --radius-modal: 18px; --radius-dot-pill: 999px; --radius-control: 50%; --radius-tile: 0; --radius-block-button: 8px; /* reduced 5px, elevated 10px, super 12px */ --radius-ribbon-inset: 10px; /* elevated inset ribbon 12px */ --border: none; /* tiles and cards */ /* depth */ --shadow: none; --glass-nav: backdrop-filter saturate(1.8) blur(20px) over --color-nav-light-bg or --color-nav-dark-bg; --curtain-blur: 20px; --modal-scrim-blur: 20px; /* motion */ --ease-standard: cubic-bezier(0.4,0,0.6,1); --ease-card: cubic-bezier(0,0,0.5,1); --ease-ribbon: cubic-bezier(0.42,0,0.58,1); --ease-slide: cubic-bezier(0.65,0,0.35,1); --dur-instant: 100ms; --dur-fast: 240ms; --dur-base: 320ms; --dur-card: 300ms; --dur-fade: 400ms; --dur-slide: 800ms; /* z */ --z-nav: 9999; /* focus */ --focus-ring: 2px solid #0071e3; /* offset 1px on links, 3px on buttons and containers; nav links draw it 7px inside */ dark_mode: none (dark sections only) FONTS text and UI: SF Pro Text (Apple, proprietary, Apple platforms only), weights 400 and 600, used for all text 17px and smaller. display: SF Pro Display (proprietary), weights 400 and 600, used for all text 19px and larger. delivery: /wss/fonts?families=SF+Pro,v3|SF+Pro+Icons,v3; font-synthesis none; antialiased. Alternative: Inter (OFL) for text sizes, same sizes and weights, letter-spacing about 0.005em tighter at 17px and below; Inter Display (Inter opsz) for 19px and larger, tracking about 0.01em tighter than Apple values at 48px and above. Stack -apple-system, BlinkMacSystemFont, Inter renders real SF on Apple devices. TYPOGRAPHY RULES Headlines 600, subheads and body 400; tracking negative at large sizes, slightly positive at 19-28px, negative again at 17px and below. Display cut from 19px up, Text cut at 17px and below. Every block: headline, one-line subhead, optional callout, CTA pair. Sentence case, periods at the end of short headlines ("Endless entertainment."). Home tiles: text centered; content pages: headlines left-aligned at the content edge. Chevron links: text + "›" glyph from SF Pro Icons with 0.24em space, no underline at rest, underline on hover. Footnote marks: superscript 0.6em, offset -0.5em. COLOR RULES Page is mostly #ffffff and #f5f5f7 with black product tiles; blue under 1% of the area (est). #0071e3 only for filled buttons; #0066cc for links and outline buttons, #2997ff on black. Black tiles: text #f5f5f7, callouts #86868b, links #2997ff. Light tiles: text #1d1d1f, callouts #6e6e73. "New" label #b64400. Gradients only as dark scrims under captions on media (e.g. radial-gradient(100% 33% at left bottom, rgba(0,0,0,0.5), transparent)). LAYOUT container: nav 1024px incl. 22px padding; footer 980px + 22px padding; content pages 87.5% of viewport up to 1260px; home tiles full-bleed (main max-width 2560px) grid: home promo tiles 2 columns, 12px gap, 12px side padding; 1 column without gaps and padding at 734 and below; content pages use horizontal shelves instead of a column grid section rhythm: home tiles stacked with 12px white gaps; content pages 112 / 96 / 56px section padding; section header row 48px (mobile 32px) above content; alternating white and #f5f5f7 sections density: airy on home, comfortable on content pages; alignment: centered on home, left on content pages composition: full-bleed alternating tiles (home); left-aligned headline row + horizontal shelves (content pages) SHAPE AND DEPTH radius: buttons 980px; cards 28px; modal 18px; dot pill 999px; round controls 50%; home tiles and gallery slides 0; block buttons 5 / 8 / 10 / 12px borders: none on tiles and cards; 1px #d2d2d7 row dividers in accordions and the mobile footer shadows: none anywhere materials: frosted nav and flyout (blur 20px, saturate 1.8); curtain behind flyout (blur 20px); modal scrim (blur 20px) textures: none COMPONENTS button-primary: bg #0071e3, text white, radius 980px, border 1px transparent; sizes (padding includes the 1px border): reduced 4px 11px 12px text; base 9px 16px 14px text; elevated 12px 22px 17px text (tile and card CTAs on desktop, height 44px); super 18px 31px 17px text on mobile tile CTAs use base size: 14px text, height about 35px hover: bg #0076df, instant active: bg #006edb focus-visible: 2px solid #0071e3 outline, 3px offset, keyboard only disabled: opacity 0.42 (0.36 on dark) button-secondary: transparent, 1px border and text #0066cc; hover: fill #0076df, text white, instant; on dark border and text #2997ff button-neutral: bg #1d1d1f, text white; hover #272729; active #18181a; on dark bg #f5f5f7, text #000000, hover #ffffff, active #ededf2; focus ring #000 (#fff on dark) button-secondary-neutral: transparent, border and text #1d1d1f; hover fill #272729, text white button-block: full width, radius 8px (reduced 5px, elevated 10px, super 12px) CTA pair: primary + secondary pill on home tiles, gap 17px (mobile 14px; promo tiles 14px); on content pages primary pill + chevron link text link: #0066cc (#2997ff on dark); hover underline, instant; focus 2px outline, 1px offset card: radius 28px, overflow hidden, bg #f5f5f7 on white sections or #ffffff on #f5f5f7 sections, no border, no shadow hover (no-touch only): scales so the card grows about 6px in width (scale about 1.016 on a 372px card), 300ms cubic-bezier(0,0,0.5,1) focus-visible: 2px #0071e3 outline drawn 3px inside the card (4px on dark) card plus button: 36px circle inside a 44px hit area, bg #1d1d1f, white plus icon; hover #272729; active #18181a; bg 100ms linear; on dark cards bg #f5f5f7 with black icon; bottom right of the card paddle: 36px circle, bg rgba(210,210,215,0.64), glyph rgba(0,0,0,0.56); faded at the start or end of the row dot pill, dots, play/pause: Recipe card-gallery label "New": 12px/600 #b64400 under product names ribbon (announcement bar): full width; text --type-caption centered in a column 83.333% wide (min 320px); padding 16px top and bottom (elevated 24px); bg #f5f5f7 (#1d1d1f on dark), text #1d1d1f, link #0066cc with "›"; variants: blue (#0071e3 bg, #f5f5f7 text and link), neutral-alpha rgba(245,245,247,0.8), inset (83.333% wide, 16px from the top, radius 10px), blur (backdrop blur 20px) motion "blue-to-default": starts blue with light text, after 1.6s changes to the default colors over 0.8s cubic-bezier(0.42,0,0.58,1); "drop": slides down from translateY(-100%) over 0.8s section header (content pages): headline --type-section-headline left, max 75% wide; chevron links right on the same row, gap 34px (mobile 28px); 80px gap to the headline column (min-width 735) modal (page overlay): white panel 816px wide (692px at 1068 and below; max(87.5%, 480px) at 734 and below; full width at 480 and below with square bottom corners), radius 18px, 40px from the top, content padding 76px; scrim rgba(0,0,0,0.48) + blur 20px; close button 36px circle in a 44px hit area, sticky 16px from the top and start, bg #1d1d1f with white glyph (hover #272729, active #18181a), bg 100ms linear; opens with a 400ms ease opacity crossfade search field (nav flyout): no box, transparent, no border; text --type-search-input #1d1d1f; magnifier icon at the start (text inset 34px, mobile 42px); placeholder #6e6e73 (#86868b on dark); clear button appears at the end, 320ms fade; field enters from 4px above (8px on mobile), 240ms after 200ms, cubic-bezier(0.4,0,0.6,1) accordion: row dividers 1px #d2d2d7; row text 24px/600 display (21 / 19px on smaller screens); padding 1em top and bottom; open tray height 400ms ease-in-out select, checkbox, toggle, tabs, toast, skeleton: not used on the described pages GLOBAL CHROME header: fixed 44px bar, full width, content centered max 1024px with 22px side padding; items spread with space-between, each link padding 0 8px: Apple logo glyph, Store, Mac, iPad, iPhone, Watch, Vision, AirPods, TV & Home, Entertainment, Accessories, Support, search icon, bag icon; links 12px/400/-0.12px; theme set per page (globalheader-light or globalheader-dark): light bar rgba(245,245,247,0.8) with links rgba(0,0,0,0.8), dark bar rgba(29,29,31,0.8) (rgba(0,0,0,0.8) with a ribbon) with links rgba(255,255,255,0.8); both frosted; a solid layer of the same color sits under the bar at the top of the page; link color 320ms cubic-bezier(0.4,0,0.6,1); flyout: Recipe globalnav-flyout mobile header and menu: at 833 and below bar 48px with logo, search, bag and a two-line menu icon that turns into a cross; full-screen menu in the bar material, links 28px/600 (#333336 on light), rows about 46px; details in Recipe globalnav-flyout footer: bg #f5f5f7; content max 980px, padding 0 22px; text 12px/16px/-0.01em rgba(0,0,0,0.56); footnotes first (paragraphs 0.8em apart; very long on product pages), then a 5-column directory (padding-top 20px; section titles 12px/600 rgba(0,0,0,0.88) with 0.8em below; links 12px rgba(0,0,0,0.72), padding 4px 20px 4px 0; 24px between sections in a column), then the legal row (copyright, policy links, country) footer mobile: at 833 and below the directory becomes an accordion, one full-width row per section title separated by 1px hairlines; tapping a row expands its links cookie banner: none in the US; a locale suggestion bar (70px, above the nav) appears for visitors from other countries IMAGERY AND ICONS hero media: product photo or render on black or #f5f5f7; campaigns may use a collage of product cutouts with white borders and halftone stickers, plus a colored label product imagery: studio renders; front and three-quarter angles; soft or no floor shadow; separate art per breakpoint (wide art on desktop, tall art on mobile) home tile artwork: image as tall as the tile, width auto, centered horizontally, anchored to the bottom edge; text sits over its top area product icons row (content pages): product cutouts 66px tall, 36-77px wide, with 14px/600 labels 10px below media gallery art: full-bleed key art with the service logo top right and a dark scrim under the caption icons: inline SVG glyphs and SF Pro Icons glyphs (logo, search, bag, chevrons, plus, close), monochrome image radius: 0 on home tiles and gallery slides; 28px inside cards (card clips the image); 8px on music artwork MOTION intensity: functional hover policy: buttons and text links change instantly; nav links 320ms cubic-bezier(0.4,0,0.6,1); cards scale up slightly over 300ms cubic-bezier(0,0,0.5,1); round controls change bg over 100ms linear scroll reveal: none on home tiles; link index block: titles and links fade in from 4px above (opacity 0 -> 1, translateY(-4px) -> 0) when its top reaches 70% of the viewport height, only without reduced motion (duration not measured, est 320ms) ribbon: color change after 1.6s over 0.8s, or drop-in over 0.8s signature motion: nav flyout with cascading links (Recipe globalnav-flyout); media galleries with a progress dot (Recipe card-gallery) page transitions and loading: hard load; modals crossfade 400ms reduced motion: no autoplay, no ribbon animation, instant transitions, no reveal RESPONSIVE 1068 and below: type steps down (see TOKENS); hero tiles 570px (650px when viewport height is 734+), promo tiles 490px, tile padding 54 / 61px; section padding 96px; gallery slides 688x367 833 and below: 48px header with menu icon; full-screen menu; footer accordion 734 and below: all home tiles 500px in one column with 12px gaps, tile padding 39 / 43px; tile buttons base size; section padding 56px; cards 260px wide; gallery slides 275x496; ribbon wraps to 2 lines (72px) home height: 6009px at 1440, 7322px at 390 CONTENT AND VOICE headline style: product name or short playful phrase, 2-6 words, often ends with a period ("Hello, hello.", "Pro further.", "Endless entertainment.") subhead: one line, 3-10 words; callouts for dates and offers ("Pre-order starting 5:00 a.m. PT on 10.16") tone: premium, confident, friendly CTA labels: "Learn more", "Buy", "View pricing", "Shop", "Apply now", "Stream now", "Listen now", "Play now", "Watch now" footnote markers (1, 2, *, §) after claims, explained in the footer SUBSTITUTIONS Inter / Inter Display instead of SF Pro in public projects; [PRODUCT IMAGE] placeholders sized like the tile art; generic monochrome glyph instead of the Apple logo; original short headlines. TECH framework: Apple components, vanilla JS; CSS custom properties per component (--sk-button-*, --ribbon-*, --media-gallery-*); separate stylesheets for global header, local nav, global footer and per-page bundles; images: picture element with per-breakpoint files, lazy loaded; fonts: /wss/fonts SCREENSHOTS - file: apple_2026_home_d1440_top.jpg shows: home first screen at 1440x900: light frosted nav, white ribbon, first hero tile (black), start of the second tile source: live https://www.apple.com/ 2026-09-25 key values: nav 44px rgba(245,245,247,0.8); ribbon 52px 14px text + "Learn more ›"; tile 692px #000000; headline 56px/600 #f5f5f7; subhead 28px; CTA pair elevated 44px, 17px apart do not copy: product renders, logo - file: apple_2026_home_m390_top.jpg shows: home first screen at 390x844 @2x: 48px nav with search, bag, menu icon; ribbon on 2 lines; hero tile 500px with tall art; second tile with callout source: live https://www.apple.com/ 2026-09-25 key values: headline 32px/600; subhead 19px; buttons 14px, about 35px tall, 14px apart; callout #6e6e73 - file: apple_2026_overview_d1440_states.png shows: tile CTA pair on black: default; hover on "Buy" (fills #0076df, text white); keyboard focus on "Learn more" (2px #0071e3 ring, 3px offset) source: live https://www.apple.com/ 2026-09-25 - file: apple_2026_overview_m390_menu-open.jpg shows: mobile menu open on the light theme: full-screen frosted panel, 28px/600 links, close cross source: live https://www.apple.com/ 2026-09-25 - file: apple_2026_overview_d1440_footer.jpg shows: end of the footer at 1440: last footnotes, 5-column directory, legal row source: live https://www.apple.com/iphone/ 2026-09-25 - file: apple_2026_home_d1920_default_top_dark.png shows: the dark header theme: home first screen on 2026-09-24 with a black campaign tile source: live https://www.apple.com/ 2026-09-24 key values: nav rgba(29,29,31,0.8), links white 80%; campaign collage art with a cyan label do not copy: product images, stickers, logo - file: apple_2026_x-product-family_d1920_default_top_light.png shows: /iphone/ top on 2026-09-24: light nav, ribbon, page headline, product icon row, first hero card source: live https://www.apple.com/iphone/ 2026-09-24