BRAND Apple 2026 · Page: home

HEADER brand: Apple; design_date: 2026-09; page_type: home; variants: none example_urls: https://www.apple.com/ (live 2026-09-24 and 2026-09-25); evidence: measured (HTML, stylesheet rules, Chrome DevTools at 1440x900 and 390x844) unless marked purpose: show current products, services and offers and send users to product pages or the store skeleton: full-bleed stack of 6 sections; total height 6009px at 1440x900, 7322px at 390; sidebar: none content: tile products and campaigns change weekly; the structure below stays overrides: header theme light or dark per campaign (Overview GLOBAL CHROME); dark theme when the first tile is a black campaign tile SECTIONS S1 header / flyout - global navigation as Overview S2 announcement-bar - service or financing offer background: #0071e3 with light text on load, then #ffffff with #1d1d1f text after 1.6s over 0.8s (Overview COMPONENTS ribbon "blue-to-default"); height: 52px desktop, 72px mobile (2 lines) layout: text centered in a column 83.333% wide elements: 1 line --type-caption #1d1d1f with a footnote mark, then "Learn more ›" #0066cc copy: about 15 words ("Get 3 months of ... free with any new ...") S3 hero section / full-bleed tiles - three featured products layout: 3 tiles stacked, full width, 12px white gaps (section is a 1-column grid, gap 12px, margin-bottom 12px) tile height: 692px at 1069+ with viewport height 776+; 580px at 1069+ with lower viewports; 650px at 735-1068 with height 734+; 570px at 735-1068 otherwise; 500px at 734 and below tile padding: 56 / 63px (tall desktop), 48 / 56px (desktop), 61 / 69px (tall tablet), 54 / 61px (tablet), 39 / 43px (mobile) tile backgrounds: black (theme-dark: text #f5f5f7, callout #86868b, links #2997ff) or #f5f5f7 (text #1d1d1f, callout #6e6e73); observed order: black, #f5f5f7, black tile content, standard: centered column at the top: headline --type-tile-headline (1 line, product name or a logo lockup image); subhead --type-tile-subhead 6px below (4px at 1068 and below); optional callout --type-tile-callout 9px below (12px tablet, 8px mobile), 1-2 lines; CTA pair 17px below the text (16px tablet, 11px mobile), gap 17px (14px mobile) tile content, split: headline group at the top, subhead and CTA pair at the bottom of the tile, artwork between them (used for a watch tile) tile content, bottom: text group at the bottom, artwork anchored to the top (option per breakpoint) buttons: elevated size on desktop and tablet (17px, 44px tall), base size on mobile (14px, about 35px tall); primary "Learn more" + secondary "Buy" or "View pricing" artwork: image box as tall as the tile, full width, image height 100% and auto width, centered, anchored to the bottom; separate art per breakpoint (wide on desktop, tall on mobile); whole tile is a link copy: headline = product name 1-3 words ("iPhone 18 Pro"); subhead 2-5 words ("Pro further.", "Hello, hello."); callout with dates ("Pre-order starting 5:00 a.m. PT on 10.16 / Available starting 10.23") motion: none; images lazy load responsive: see heights and paddings above S4 promo section / 2-column tiles - more products and services layout: 2-column grid, 12px gap, 12px side padding, 12px margin-bottom; 1 column, no side padding at 734 and below count: 6 tiles in 3 rows at 1440 (tiles 694x580) tile height: 580px desktop, 490px tablet, 500px mobile; padding 53 / 60px desktop, 44 / 48px tablet, mobile as hero tiles backgrounds: first tile black, the rest #f5f5f7 (observed) elements: headline --type-promo-headline (40px) or a logo lockup image (margin 5px top, -5px bottom); subhead --type-promo-subhead 3px below (4px tablet); optional callout 14px, 8px below; CTA pair 12px below the text, gap 14px, base size buttons artwork: as S3, sized to the promo height copy: headline 1-2 words or logo; subhead 3-9 words ("Now supercharged by M5.", "Get up to 3% Daily Cash back with every purchase.") CTA labels: "Learn more" + "Buy", "Apply now", or a single "Learn more" S5 media galleries - "Endless entertainment." background: white (transparent over #ffffff); height 957px at 1440 (896px at 390) headline: 56px/1.07143/600 display, #000000, centered, 53px below the section top; 32px/1.125 at 1068 and below with 17px below it gallery 1 (streaming shows): slides 930x523 at 1069-1440, 1250x668 at 1441+, 688x367 at 735-1068, 275x496 at 734 and below; 13px gap; no radius; current slide centered, neighbours visible at both edges; 9 slides caption in the slide bottom-left (padding 70 / 58px at 1441+, 43 / 34px tablet, 15 / 30px mobile): light pill button first ("Stream now", elevated size on desktop, #f5f5f7 bg, black text), then genre in bold, a middle dot, and a one-line tagline in 21px display #f5f5f7 (17px at 1068 and below), all on one line; on mobile the button goes under the text captions of non-current slides at 36% opacity, 400ms ease; scrim under the caption: radial-gradient(100% 33% at left bottom, rgba(0,0,0,0.5), transparent); on mobile a bottom linear scrim to rgba(0,0,0,0.7) gallery 2 (music, games, fitness): 13px below gallery 1; tiles 417x234 at 1069-1440 (470px wide at 1441+, 188x254 tablet); 13px gap; service logo top right (about 60-78x21px); title 14px/600 white bottom-left; small light pill on the right ("Listen now", "Play now", "Watch now"); dark scrims top and bottom 70px deep dot navigation: centered under gallery 2, 12px below (10px mobile): Recipe card-gallery motion: Recipe card-gallery (autoplay 4.16s, slide 800ms) S6 footer as Overview PAGE COMPONENTS logo lockup headline: product logo image in place of the headline text, about headline size campaign label (seasonal): rectangular box with bright background (e.g. cyan) and black semibold text, no radius, over the artwork INTERACTIONS galleries: Recipe card-gallery nav flyout: Recipe globalnav-flyout ribbon color change on load: Overview COMPONENTS ribbon STATES loading: images lazy load (progressive), no skeletons empty, error: n/a SCREENSHOTS - file: apple_2026_home_d1440_full.jpg shows: whole home page at 1440x900, 2026-09-25: nav, ribbon, 3 hero tiles, 3 rows of promo tiles, galleries, footer key values: page 6009px; hero tiles 692px; promo tiles 694x580 with 12px gaps; gallery slide 930x523, 13px gaps do not copy: product images, key art, logos - file: apple_2026_home_m390_full.jpg shows: whole home page at 390x844 @2x: 9 tiles of 500px in one column, galleries, collapsed footer key values: page 7322px; headline 32px; buttons 14px Also on the Overview: apple_2026_home_d1440_top.jpg, apple_2026_home_m390_top.jpg, apple_2026_home_d1920_default_top_dark.png (dark header theme).