---
title: "BRAND Apple 2026 · Page: product-family"
url: https://memocore.ai/memos/6ab60f6daf51aac421da8862
project: "Brand Styles"
tags: "brand-apple"
updated_at: "2026-09-25T06:48:50.330Z"
---

# BRAND Apple 2026 · Page: product-family

HEADER
brand: Apple; design_date: 2026-09; page_type: product-family (hub of one product line); variants: /mac/, /ipad/, /watch/ (inf)
example_urls: https://www.apple.com/iphone/ (live 2026-09-24 and 2026-09-25); evidence: measured (HTML, stylesheet rules, Chrome DevTools at 1440x900 and 390x844) unless marked
purpose: let the user pick a model in the line, compare, learn what makes it special and buy
skeleton: content column 87.5% of viewport up to 1260px (1245px at 1440, left edge 89px); 10 sections; content ends at 6589px at 1440 and 5569px at 390, then a footer with very long footnotes (8658px at 1440); sidebar: none
overrides: header light theme

SECTIONS
S1 header / flyout
  as Overview, light theme

S2 announcement-bar - financing offer
  background: #f5f5f7; height: 46px desktop, 86px mobile (wraps)
  elements: 1 line --type-caption #1d1d1f with footnote mark, then "Learn more ›" #0066cc; centered

S3 page heading
  background: #ffffff; padding-top: 60px (40px at 1068 and below); mobile padding-bottom 8px
  elements: page headline --type-page-headline (80px/600), 1 word ("iPhone"), left-aligned at the content edge
  height with chapter nav: 367px at 1440

S4 chapter nav / product icon row - jump to each model
  layout: one row of 10 items; each item link 77px wide with padding 0 20px 15px (0 11px 15px on mobile), 10px apart (0 on mobile); the row scrolls horizontally when it overflows, with 50x130px edge paddles (34x114 on mobile, 29px arrow icon) and a 10px fade
  elements: product cutout 66px tall (36-77px wide); label --type-chapternav-label (14px/600) #1d1d1f 10px below (4px on mobile); "New" 12px/600 #b64400 6px below the label; last items: Compare, Accessories, Shop, software version icon
  motion: on scroll the row collapses into a sticky local nav bar (min height 52px) with the product name and a small blue "Buy" pill (cta padding 6px 10px); collapse is scroll-linked (height follows scroll progress)

S5 hero cards / Recipe card-gallery variant B - featured models
  layout: cards 1245x680 at 1440 (up to 1260x680), radius 28px, bg #f5f5f7, gap 20px; first card aligned to the content edge, next card peeks in from the right
  elements: per card: headline top-left 56px/600 (48px tablet, 32px mobile); subhead 28px/400; CTA pair top-right on the headline row (primary pill "Learn more" + "View pricing ›" or "Buy"); product media fills the lower part; dot pill + 56px play/pause under the gallery
  section height: 950px at 1440, 722px at 390

S6 lineup / "Explore the lineup."
  background: #f5f5f7; section padding 112px top, no bottom padding (mobile 56px bottom)
  section header: headline left, "Compare all models ›" right
  shelf: product tiles 372px wide (344px tablet, 260px mobile), about 756px tall, transparent on #f5f5f7, 20px gap, first tile at the content edge, row runs past the right edge; paddles 36px below right
  tile elements top to bottom: product image (24px below; 20px tablet); color swatch dots (26px below); "New" label; product name 28px/600; positioning line 17px (16px below; 12px mobile); price lines (16px below; 12px mobile); CTA pair 40px below ("Learn more" pill + "Buy ›" or "View pricing ›")
  section height: 1006px at 1440

S7 incentives / "Why Apple is the best place to shop iPhone."
  background: #f5f5f7; section header link "Shop iPhone ›"
  shelf: white cards 372x523, radius 28px, 20px gap; each: eyebrow 17px/600, headline 28px/600 (2-3 lines), small artwork; plus button bottom right opens a modal
  section height: 925px at 1440
  variant: section-incentive-alt swaps copy for some visitors

S8 feature cards / "Get to know iPhone."
  background: #ffffff
  shelf: feature cards 372x680 (344x628 tablet, 260x480 mobile); short variant 387 / 356 / 255px tall; wide variant 696px (643px tablet); mostly theme-dark (black) cards with white text; each: eyebrow 17px/600, headline 28px/600 over 2-3 lines, full-bleed image; plus button bottom right (on dark cards #f5f5f7 with black plus) opens a modal (Overview COMPONENTS modal)
  section height: 930px at 1440
  variant: section-consider-alt ("Switch to iPhone.") replaces it for some visitors

S9 essentials / "iPhone essentials."
  layout: 2 banner cards 613x679 at 1440, 20px gap, radius 28px, #f5f5f7; each: headline 28px/600 centered at the top, one line of text, chevron link, product artwork below
  section header link "All iPhone accessories ›"

S10 image accordion / "Significant others."
  box: 784px tall at 1069+; accordion column 350px wide on the left with side padding clamp(67px, 7.15%, 90px); image on the right
  accordion: 3 items ("iPhone and Mac", "iPhone and Apple Watch", "iPhone and AirPods"); titles 28px/600 display (24px tablet, 21px mobile); open item shows a 17px paragraph (14px mobile) 21px below the title (18px tablet) and a link 14px below; rows separated by 1px #d2d2d7, first row without a line
  motion: opening an item swaps the image with a 400ms ease-in-out crossfade; tray height 400ms ease-in-out
  mobile: stacked, side padding clamp(20px, 7.15%, 30px)
  section height: 1116px at 1440, 1346px at 390

S11 link index
  background: #fafafc; section padding 112px (96 / 56)
  layout: first group up to 50% wide with 88px end padding, items --type-flyout-link size (28px/600 display; 24 / 21px); other groups up to 25% wide with 44px end padding, items 17px/600 (14px mobile); group titles 17px/400 #6e6e73, 15px below (first group 14px); tablet: first group full row, others 50%, 42px apart; mobile: stacked, 26px apart
  motion: titles and links fade in from 4px above when the block top reaches 70% of the viewport height
  section height: 337px at 1440

S12 footer
  as Overview; footnotes are very long on this page

PAGE COMPONENTS
local sticky nav (collapsed chapter nav): min height 52px; product name and a small blue "Buy" pill (padding 6px 10px); other values not measured
product tile swatches: small color dots per finish (size not measured, est 12px)

INTERACTIONS
hero cards and shelves: Recipe card-gallery
plus buttons: open modals (Overview COMPONENTS modal), 400ms crossfade
image accordion: see S10
nav flyout: Recipe globalnav-flyout

STATES
loading: images lazy load
empty, error: n/a

SCREENSHOTS
- file: apple_2026_product-family_d1440_full.jpg
  shows: /iphone/ at 1440x900 from the top to the end of the link index (footer cut off)
  key values: ribbon 46px; headline 80px; chapter nav 10 items; hero card 1245x680; lineup tiles 372x756; incentive cards 372x523; feature cards 372x680; essentials 613x679; accordion 784px
  do not copy: product images, logos
- file: apple_2026_product-family_m390_full.jpg
  shows: /iphone/ at 390x844 @2x, footer hidden for the capture
  key values: cards 260px wide; section padding 56px
Also on the Overview: apple_2026_x-product-family_d1920_default_top_light.png (top of the page), apple_2026_overview_d1440_footer.jpg (end of the footer).