---
title: "BRAND Apple 2026 · Overview"
url: https://memocore.ai/memos/6ab4b169af51aac421da87ea
project: "Brand Styles"
tags: "brand-apple"
updated_at: "2026-09-25T06:47:26.532Z"
---

# 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