Overview
Apple's web presence is a masterclass in **reverent product photography framed by near-invisible UI**. Every page is a stack of edge-to-edge product "tiles" — alternating light and dark canvases, each centered on a hero headline, a one-line tagline, two tiny blue pill CTAs, and an impossibly crisp product render. Nothing competes with the product. Typography is confident but quiet; color is either pure white, an off-white parchment, or a near-black tile; interactive elements are a single, quiet blue.
Density is unusually low even by contemporary SaaS standards. Each tile occupies roughly one viewport, and there is no decorative chrome — no borders, no gradients, no decorative frames, no shadows on headlines. Elevation appears only when a product image rests on a surface (a single soft `rgba(0, 0, 0, 0.22) 3px 5px 30px` drop for visual weight). The result is a catalog that feels more like a museum gallery: the wall disappears and the artifact takes over.
Store and shop surfaces retain the same chassis but switch modes. The product configurator (iPhone 17 Pro, accessories grid) introduces a tight grid of white utility cards at `{rounded.lg}` (18px) radius with a thin border, paired with a persistent thin sub-nav strip. The environment page leans darker and more editorial. Across all five surfaces the typographic system, spacing rhythm, and the single blue accent are consistent — this is one design language expressed at different volumes.
**Key Characteristics:**
- Photography-first presentation; UI recedes so the product can speak.
- Alternating full-bleed tile sections: white/parchment ↔ near-black, with the color change itself acting as the section divider.
- Single blue accent (`{colors.primary}` — #0066cc) carries every interactive element. No second brand color exists.
- Two button grammars: tiny blue pill CTAs (`{rounded.pill}`) and compact utility rects (`{rounded.sm}`).
- SF Pro Display + SF Pro Text — negative letter-spacing at display sizes for the signature "Apple tight" headline feel.
- Whisper-soft elevation used only when a product image needs to breathe — exactly one drop-shadow in the entire system.
- Tight two-row nav: slim `{component.global-nav}` + product-specific `{component.sub-nav-frosted}` with persistent right-aligned primary CTA.
- Section rhythm across multiple pages: light hero → dark product tile → light utility tile → dark tile → parchment footer — a predictable pulse.
Colors
> **Source pages analyzed:** homepage, environment, store, iPhone 17 Pro buy page, accessories index. The color system is identical across all five surfaces; only the surface-mode mix differs.
Brand & Accent
- **Action Blue** (`{colors.primary}` — #0066cc): The single brand-level interactive color. All text links, all blue pill CTAs ("Learn more", "Buy"), and the focus ring root. This is Apple's quiet but universal "click me" signal. Press state shifts to a slightly darker variant via the active scale transform rather than a hex change.
- **Focus Blue** (`{colors.primary-focus}` — #0071e3): A marginally brighter sibling of Action Blue, reserved for the keyboard focus ring on buttons (`outline: 2px solid`).
- **Sky Link Blue** (`{colors.primary-on-dark}` — #2997ff): A brighter blue used on dark surfaces for in-copy links and inline callouts, where Action Blue would disappear against the tile background.
Surface
- **Pure White** (`{colors.canvas}` — #ffffff): The dominant canvas. Content, utility cards, store tiles, configurator grids.
- **Parchment** (`{colors.canvas-parchment}` — #f5f5f7): The signature Apple off-white. Used for alternating light tiles, footer region, and the default page canvas in store utility sections. Just different enough from white to create rhythm.
- **Pearl Button** (`{colors.surface-pearl}` — #fafafc): A near-white used as the fill for secondary "ghost" buttons — lighter than the parchment canvas so the button still reads as a button against `{colors.canvas-parchment}`.
- **Near-Black Tile 1** (`{colors.surface-tile-1}` — #272729): The primary dark-tile surface on the homepage product grid.
- **Near-Black Tile 2** (`{colors.surface-tile-2}` — #2a2a2c): A micro-step lighter — used where a dark tile sits directly above or below Tile 1 to create the faintest separation.
- **Near-Black Tile 3** (`{colors.surface-tile-3}` — #252527): A micro-step darker — used at the bottom of the stack and in embedded video/player frames.
- **Pure Black** (`{colors.surface-black}` — #000000): Reserved for true void — video player backgrounds, edge-to-edge photographic overlays, the global nav bar background.
- **Translucent Chip Gray** (`{colors.surface-chip-translucent}` — #d2d2d7): The base hex of the translucent gray chip used over photography for circular control buttons. In production, applied at ~64% alpha as `rgba(210, 210, 215, 0.64)`.
Text
- **Near-Black Ink** (`{colors.ink}` — #1d1d1f): The voice of every headline, every body paragraph, and the dark utility button's fill. Chosen instead of pure black to keep the page feeling photographic rather than printed.
- **Body** (`{colors.body}` — #1d1d1f): Same hex as ink — Apple uses one near-black tone for all text on light surfaces.
- **Body On Dark** (`{colors.body-on-dark}` — #ffffff): All text on dark tiles and on the global nav bar.
- **Body Muted** (`{colors.body-muted}` — #cccccc): Secondary copy on dark tiles where pure white would be too loud.
- **Ink Muted 80** (`{colors.ink-muted-80}` — #333333): Body text on the white Pearl Button surface — slightly softer than pure black.
- **Ink Muted 48** (`{colors.ink-muted-48}` — #7a7a7a): Disabled button text and legal fine-print.
Hairlines & Borders
- **Divider Soft** (`{colors.divider-soft}` — #f0f0f0): The "border" tone on secondary buttons — functions as a ring shadow rather than a hard line. In production, often applied as `rgba(0, 0, 0, 0.04)`.
- **Hairline** (`{colors.hairline}` — #e0e0e0): The 1px hairline border on store utility cards and configurator chips.
Brand Gradient
**No decorative gradients.** Atmospheric depth on product photography (the iPhone 17 Pro camera plate, the Apple Watch bands, AirPods reflections) is inherent to the imagery, not a CSS gradient overlay. The environment page's hero uses photographic atmosphere (mountain vista at dawn) but no gradient tokens are defined. Apple is the rare luxury-brand site with zero gradient-based design tokens.
Typography
Font Family
- **Display**: `SF Pro Display, system-ui, -apple-system, sans-serif` — Apple's proprietary display face, optimized for sizes ≥ 19px. Defines the voice of every headline.
- **Body / UI**: `SF Pro Text, system-ui, -apple-system, sans-serif` — the text-optimized variant used for body copy, captions, buttons, and links below 20px.
- **OpenType features**: `font-variant-numeric: numerator` is enabled on numeric links (pricing tables, spec sheets). Display sizes rely on tight tracking rather than contextual ligatures.
Hierarchy
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.hero-display}` | 56px | 600 | 1.07 | -0.28px | Hero headline; the signature "Apple tight" tracking |
| `{typography.display-lg}` | 40px | 600 | 1.10 | 0 | Tile headlines atop every product tile |
| `{typography.display-md}` | 34px | 600 | 1.47 | -0.374px | Section heads (SF Pro Text at display proportions) |
| `{typography.lead}` | 28px | 400 | 1.14 | 0.196px | Product tile subcopy |
| `{typography.lead-airy}` | 24px | 300 | 1.5 | 0 | Environment-page lead paragraphs (the rare weight 300) |
| `{typography.tagline}` | 21px | 600 | 1.19 | 0.231px | Sub-tile tagline; sub-nav category name |
| `{typography.body-strong}` | 17px | 600 | 1.24 | -0.374px | Inline strong emphasis |
| `{typography.body}` | 17px | 400 | 1.47 | -0.374px | Default paragraph |
| `{typography.dense-link}` | 17px | 400 | 2.41 | 0 | Footer / store utility link lists (relaxed leading) |
| `{typography.caption}` | 14px | 400 | 1.43 | -0.224px | Secondary captions, button text |
| `{typography.caption-strong}` | 14px | 600 | 1.29 | -0.224px | Emphasized captions |
| `{typography.button-large}` | 18px | 300 | 1.0 | 0 | Store hero CTAs (the rare weight 300) |
| `{typography.button-utility}` | 14px | 400 | 1.29 | -0.224px | Utility/nav button labels |
| `{typography.fine-print}` | 12px | 400 | 1.0 | -0.12px | Fine-print, footer body |
| `{typography.micro-legal}` | 10px | 400 | 1.3 | -0.08px | Micro legal disclaimers |
| `{typography.nav-link}` | 12px | 400 | 1.0 | -0.12px | Global nav menu items |
Principles
- **Negative letter-spacing at display sizes.** Every headline at 17px and up carries a slight tracking tighten (`-0.12 → -0.374px`). This produces the iconic "Apple tight" headline cadence. Never used at 12px or below.
- **Body copy at 17px, not 16px.** Apple breaks the SaaS convention and runs paragraph text at 17px. The extra pixel gives the page an unmistakable "reading, not scanning" pace.
- **Weight 300 is real and rare.** Used deliberately on a handful of large-size reads (`{typography.button-large}` at 18px/300 and `{typography.lead-airy}` at 24px/300). It's not an accident — it's a light-atmosphere cue reserved for moments where the content should feel airy.
- **Weight 600, not 700, for headlines.** Apple's headlines sit at weight 600. Weight 700 is used sparingly for `{typography.tagline}` (21px) when a touch more assertion is needed.
- **Line-height is context-specific.** Display sizes use 1.07–1.19 (tight). Body uses 1.47. Utility link stacks in the footer/store use an unusually relaxed 2.41 (`{typography.dense-link}`). The 2.41 is not a bug — it's how the footer's dense link columns breathe.
- **Weight 500 is deliberately absent.** The ladder is 300 / 400 / 600 / 700. Mid-weight readings always use 600.
Note on Font Substitutes
SF Pro is Apple's proprietary system font. When building off-system:
- Use `system-ui, -apple-system, BlinkMacSystemFont` as the first stack entry — on macOS/iOS/Safari this resolves to the real SF Pro.
- For non-Apple platforms, **Inter** (Google Fonts, variable) is the closest open-source equivalent. Inter at weight 600 with `font-feature-settings: "ss03"` approximates SF Pro's rounded "a" character.
- Nudge `letter-spacing` down by `-0.01em` on display sizes to re-create the Apple tight feel; Inter's default tracking runs slightly wider than SF Pro.
- For body text, tighten line-height by `0.03` (from 1.47 → 1.44) when substituting Inter — Inter's taller x-height needs less leading.
Layout
Spacing System
- **Base unit:** 8px. Sub-base values (2, 4, 5, 6, 7) are used for tight typographic adjustments; structural layout snaps to 8/12/16/20/24.
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 17px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 80px.
- **Section vertical padding:** `{spacing.section}` (80px) inside a product tile; tiles stack edge-to-edge with 0 gap (the color change provides the break).
- **Card padding:** `{spacing.lg}` (24px) inside utility grid cards.
- **Button padding:** 8–11px vertical, 15–22px horizontal.
- **Universal rhythm constants:** the 17px body line-height multiplier (~25px line) and 21px tagline size show up on every analyzed page.
Grid & Container
- **Max content width:** ~980px on text-heavy sections (environment), ~1440px on product grids (store, accessories), full-bleed for product tiles (homepage).
- **Column patterns:** 3 to 5 column utility card grid on store/accessories; 2-column side-by-side tiles on homepage occasional sections; single-column centered stack on product tile heroes.
- **Gutters:** 20–24px between cards in a utility grid.
Whitespace Philosophy
Apple's whitespace is the product's pedestal. Every tile begins with at least 64px of air above its headline and 48–64px below. Product renders are never crowded; the nearest content to a product image is at least 40px away. The footer is the only area that breaks this — there, Apple goes deliberately dense to make the full information architecture visible at a glance.
Elevation & Depth
| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, no border | Full-bleed tiles, global nav, footer, body sections |
| Soft hairline | 1px `rgba(0, 0, 0, 0.08)` border | Utility cards, sub-nav frosted-glass separator |
| Backdrop blur | `backdrop-filter: blur(N)` on Parchment 80% | Sub-nav and the iPhone buy floating sticky bar |
| Product shadow | `rgba(0, 0, 0, 0.22) 3px 5px 30px 0` | Product renders resting on a surface (the only true "shadow" in the system) |
**Shadow philosophy.** Apple uses **exactly one** drop-shadow, and it is applied to photographic product imagery — never to cards, never to buttons, never to text. Elevation in the UI comes from (a) surface-color change (light tile ↔ dark tile) and (b) backdrop-blur on sticky bars. The single shadow is about giving the product weight, not about UI hierarchy.
Decorative Depth
- **Atmospheric imagery** on the environment page (photographic vista) supplies mood; no CSS gradient involved.
- **Edge-to-edge tile alternation** creates rhythm without borders or shadows — the color change itself is the divider.
- **Backdrop-filter blur** on `{component.sub-nav-frosted}` and `{component.floating-sticky-bar}` creates a "floating over content" effect that's functional, not decorative.
Shapes
Border Radius Scale
| Token | Value | Use |
|---|---|---|
| `{rounded.none}` | 0px | Full-bleed product tiles (no corner rounding) |
| `{rounded.xs}` | 5px | Inline links when styled as subtle chips (rare) |
| `{rounded.sm}` | 8px | Dark utility buttons (Sign In, Bag), inline card imagery |
| `{rounded.md}` | 11px | White Pearl Button capsules |
| `{rounded.lg}` | 18px | Store utility cards, accessories grid cards |
| `{rounded.pill}` | 9999px | Primary blue pill CTAs, sub-nav buy button, configurator option chips, search input — the signature Apple pill |
| `{rounded.full}` | 9999px / 50% | Circular control chips floating over photography |
Photography Geometry
- **Hero imagery**: full-bleed, 21:9 or taller on the homepage; 16:9 on environment and shop pages. Product renders are photographic-realistic, often shot on a tinted surface that becomes the tile background.
- **Product renders**: PNG/WebP with transparency; rest on a surface tile and pick up the system shadow.
- **Accessory grid**: square 1:1 crops at `{rounded.lg}` (18px) radius, light neutral backgrounds, product centered with 20–40px internal padding.
- **No rounded imagery in hero tiles** — images are full-bleed rectangular. Rounding (`{rounded.sm}`, `{rounded.lg}`) appears only on inline card imagery.
- Lazy-loading via responsive `srcset` and `sizes` across all breakpoints; CDN-optimized WebP.
Components
Top Navigation
**`global-nav`** — Persistent, ultra-thin black nav bar pinned to the top of every page. Background `{colors.surface-black}`, height 44px, text `{colors.on-dark}` in `{typography.nav-link}` (12px / 400 / -0.12px tracking). Links are quiet, spaced ~20px apart, running edge-to-edge across the top. Right-aligned cluster: Search, Bag icons — always visible. On mobile, collapses to hamburger at ~834px and the Apple logo centers.
**`sub-nav-frosted`** — Surface-specific nav that sticks below the global nav. Background `{colors.canvas-parchment}` at 80% opacity with backdrop-filter blur, creating a frosted-glass effect. Height 52px. Content on left: product category name ("iPhone", "Store", "Accessories") in `{typography.tagline}` (21px / 600). Content right: inline nav links in `{typography.button-utility}` (14px), ending in a persistent `{component.button-primary}` ("Buy") or a utility link.
Buttons
**`button-primary`** — The signature Apple action. Background `{colors.primary}` (Action Blue #0066cc), text `{colors.on-primary}` in `{typography.body}` (SF Pro Text 17px / 400), rounded `{rounded.pill}` (full pill — capsule-shaped), padding 11px × 22px. The full-pill radius IS the brand action signal.
- Active state: `{component.button-primary-active}` — `transform: scale(0.95)` (the system-wide micro-interaction).
- Focus state: `{component.button-primary-focus}` — 2px solid `{colors.primary-focus}` outline.
**`button-secondary-pill`** — Used as the second CTA when two blue pills appear together ("Learn more" / "Buy"). Background transparent, text `{colors.primary}`, 1px solid `{colors.primary}` border, rounded `{rounded.pill}`, padding 11px × 22px. Reads as a "ghost pill."
**`button-dark-utility`** — Global nav actions (Sign In, Bag, language selector). Background `{colors.ink}` (#1d1d1f), text `{colors.on-dark}` in `{typography.button-utility}` (14px / 400 / -0.224px tracking), rounded `{rounded.sm}` (8px), padding 8px × 15px. Active state shrinks via `transform: scale(0.95)`.
**`button-pearl-capsule`** — Product-card secondary button. Background `{colors.surface-pearl}` (#fafafc), text `{colors.ink-muted-80}` in `{typography.caption}` (14px), 3px solid `{colors.divider-soft}` border (functions as a soft ring rather than a visible line), rounded `{rounded.md}` (11px), padding 8px × 14px.
**`button-store-hero`** — A larger primary CTA used on store hero surfaces. Same Action Blue + Paper White as `{component.button-primary}`, but with `{typography.button-large}` (18px / 300 — note the rare weight 300) and slightly more padding (14px × 28px). Used sparingly on the store landing.
**`button-icon-circular`** — Floats over photography. 44 × 44px, background `{colors.surface-chip-translucent}` at ~64% alpha, icon in `{colors.ink}`, rounded `{rounded.full}`. Used for carousel controls, close buttons, and in-image controls (product image thumbnails on the iPhone buy page).
**`text-link`** — Inline body links in `{colors.primary}` (Action Blue). Underlined or non-underlined per context.
**`text-link-on-dark`** — Inline body links on dark tiles in `{colors.primary-on-dark}` (Sky Link Blue #2997ff) — Action Blue would disappear against `{colors.surface-tile-1}`.
Cards & Containers
**`product-tile-light`** — Full-bleed light tile. Background `{colors.canvas}` (white), text `{colors.ink}`, rounded `{rounded.none}` (0 — tiles touch edges), vertical padding `{spacing.section}` (80px). Centered stack: product name in `{typography.display-lg}` (40px / 600) → one-line tagline in `{typography.lead}` (28px / 400) → two `{component.button-primary}` CTAs ("Learn more" / "Buy") → product render resting on the surface with the system shadow.
**`product-tile-parchment`** — Same as `{component.product-tile-light}` but on `{colors.canvas-parchment}` (#f5f5f7). Used to break two consecutive white tiles.
**`product-tile-dark`** — Full-bleed dark tile. Background `{colors.surface-tile-1}` (#272729), text `{colors.on-dark}`, rounded `{rounded.none}`, vertical padding `{spacing.section}` (80px). Same content stack as the light tile but with `{component.text-link-on-dark}` for inline copy and `{component.button-primary}` (Action Blue still works on the dark surface). Used on the homepage product grid as the alternating dark band.
**`product-tile-dark-2`** — Variant on `{colors.surface-tile-2}` (#2a2a2c). Used where a dark tile sits directly above or below `{component.product-tile-dark}` to create the faintest separation through micro-step lightness change.
**`product-tile-dark-3`** — Variant on `{colors.surface-tile-3}` (#252527). Used at the bottom of the stack and in embedded video/player frames.
**`store-utility-card`** — Used in store grid and accessories grid. Background `{colors.canvas}` (white), 1px solid `{colors.hairline}` border, rounded `{rounded.lg}` (18px), padding `{spacing.lg}` (24px). Top: product image (1:1 crop with `{rounded.sm}` (8px) inner image radius). Below: product name in `{typography.body-strong}` (17px / 600), price in `{typography.body}` (17px / 400), and a `{component.text-link}` ("Buy" or "Learn more"). No shadow by default; product render itself carries the system product-shadow.
**`configurator-option-chip`** — Pill-shaped tappable cell used in the iPhone 17 Pro buy page. Background `{colors.canvas}`, text `{colors.ink}` in `{typography.caption}`, rounded `{rounded.pill}`, padding 12px × 16px. Contains a small product thumbnail + label + price delta. Arranged in a grid of 4–5 options per row.
**`configurator-option-chip-selected`** — Selected state. Border upgrades to 2px solid `{colors.primary-focus}`. Same shape, same content.
**`environment-quote-card`** — A photographic-canvas hero specific to the environment page. Dark photographic backdrop (mountain vista at dawn) with `{colors.surface-tile-1}` as the fallback color, centered white-text headline in `{typography.display-lg}` (40px), small green "Apple 2030" pictographic logo above the headline, single `{component.button-primary}` below. Padding `{spacing.section}` (80px).
**`floating-sticky-bar`** — Floats at the bottom of the viewport on the iPhone 17 Pro buy page during scroll. Background `{colors.canvas-parchment}` at 80% opacity with `backdrop-filter: blur(N)`, height 64px, padding 12px × 32px. Left: running price total in `{typography.body}`. Right: `{component.button-primary}` ("Add to Bag").
Inputs & Forms
**`search-input`** — The accessories search input. Background `{colors.canvas}`, text `{colors.ink}` in `{typography.body}` (17px), 1px solid `rgba(0, 0, 0, 0.08)` border, rounded `{rounded.pill}` (full pill — search is also pill-shaped, matching the CTA grammar), padding 12px × 20px, height 44px. Leading icon: search glyph at 14px, muted tint.
Error and validation states were not surfaced in the analyzed pages.
Footer
**`footer`** — Background `{colors.canvas-parchment}` (#f5f5f7), text `{colors.ink-muted-80}`. Link columns in `{typography.dense-link}` (17px / 400 / 2.41 line-height — the relaxed leading is what makes the dense columns scannable). Column headings in `{typography.caption-strong}` (14px / 600). Legal row at the very bottom in `{typography.fine-print}` (12px / 400) with `{colors.ink-muted-48}` text. Vertical padding 64px.
Do's and Don'ts
Do
- Use `{colors.primary}` (Action Blue #0066cc) for every interactive element — links, pill CTAs, focus signals — and nothing else. The single accent is non-negotiable.
- Set headlines in `{typography.hero-display}` or `{typography.display-lg}` with negative letter-spacing (`-0.28 → -0.374px`) to get the signature "Apple tight" cadence.
- Run body copy at `{typography.body}` (17px / 400 / 1.47 / -0.374px) — not 16px. The extra pixel defines the brand's reading pace.
- Alternate `{component.product-tile-light}` (or parchment) and `{component.product-tile-dark}` for full-bleed section rhythm. The color change IS the divider.
- Reserve `{rounded.pill}` for the primary blue CTA and any other element that should read as an "action" (configurator chips, search input, sticky bar CTA).
- Apply the single product-shadow (`rgba(0, 0, 0, 0.22) 3px 5px 30px`) only to product renders resting on a surface — never on cards, buttons, or text.
- Use `transform: scale(0.95)` as the active/press state on every button — it's the system-wide micro-interaction.
- Keep the global nav `{colors.surface-black}` (true black) — it's the only place pure black appears on most pages.
Don't
- Don't introduce a second accent color; every "click me" signal is `{colors.primary}` (Action Blue).
- Don't add shadows to cards, buttons, or text — shadow is reserved for product imagery.
- Don't use gradients as decorative backgrounds; atmosphere comes from photography.
- Don't set body copy at weight 500 — Apple's ladder is 300 / 400 / 600 / 700, with 500 deliberately absent. Body is always 400; strong inline is 600; display is 600.
- Don't round full-bleed tiles — tiles are rectangular and edge-to-edge; the color change is the divider.
- Don't tighten line-height below 1.47 for body copy — the editorial leading is part of the brand.
- Don't mix radii grammars — use `{rounded.sm}` for compact utility, `{rounded.lg}` for utility cards, `{rounded.pill}` for pills, and nothing in between (except the rare `{rounded.md}` Pearl Button).
- Don't use `{colors.primary-on-dark}` (Sky Link Blue) on light surfaces — it's the dark-tile-only variant. Action Blue is for light surfaces.
Responsive Behavior
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Small phone | ≤ 419px | Single-column tiles; sub-nav collapses to category name + primary CTA only; hero typography drops to 28px |
| Phone | 420–640px | Single-column stack; product renders scale to 80% of tile width; hero h1 drops to 34px |
| Large phone | 641–735px | Tiles transition to tighter padding (48px vertical vs 80px); fine-print wraps |
| Tablet portrait | 736–833px | Global nav collapses to hamburger; sub-nav hides category chips, keeps primary CTA |
| Tablet landscape | 834–1023px | Global nav returns fully expanded; 3-column utility grids become 2-column |
| Small desktop | 1024–1068px | Product tiles use 2/3 width with margin gutters; hero h1 stays at 40px |
| Desktop | 1069–1440px | Full layout; 4–5 column store grids; 1440px content max |
| Wide desktop | ≥ 1441px | Content locks at 1440px, margins absorb extra width |
The structural breakpoints that matter for agents: 1440px (content lock), 1068px (small-desktop), 833px (tablet landscape switch), 734px (tablet portrait), 640px (phone), 480px (small phone).
Touch Targets
- Minimum 44 × 44px. `{component.button-primary}` lands at ~44 × 100px (with the full-pill radius making the visible hit area more generous than the label suggests).
- `{component.button-icon-circular}` is exactly 44 × 44px.
- Global nav utility links are smaller (~32 × 80px) — they deliberately sit at a tighter target because they're precision desktop actions, and the mobile hamburger replaces them at ≤ 833px.
Collapsing Strategy
- **Global nav**: full horizontal link row on desktop → collapses to Apple logo + hamburger + bag icon at 834px and below.
- **Sub-nav**: category name + inline links + primary CTA → category name + primary CTA only at mobile; inline links move into a hamburger tray.
- **Product tiles**: stack from 2-column to 1-column at 834px; vertical padding tightens from 80px → 48px at small-phone.
- **Utility grids** (store, accessories): 5-col → 4-col (1440px) → 3-col (1068px) → 2-col (834px) → 1-col (640px).
- **Hero typography**: `{typography.hero-display}` (56px) → `{typography.display-lg}` (40px) at 1068px → 34px at 640px → 28px at 419px.
Image Behavior
- All product imagery uses responsive `srcset` with breakpoint-matched crops.
- Hero photography may switch art direction at mobile (e.g., the environment page's vista crops to a taller aspect ratio on mobile, framing the subject differently).
- Product renders maintain their 1:1 or 4:3 aspect ratios across breakpoints; only scale changes.
- Lazy-loading is default; the above-fold hero loads eagerly.
Iteration Guide
1. Focus on ONE component at a time. Reference its YAML key directly (`{component.product-tile-dark}`, `{component.search-input}`).
2. Variants of an existing component (`-active`, `-focus`, `-2`, `-3`) live as separate entries in `components:`.
3. Use `{token.refs}` everywhere — never inline hex.
4. Never document hover. Default and Active/Pressed states only.
5. Display headlines stay SF Pro Display 600 with negative letter-spacing. Body stays SF Pro Text 400 at 17px. The boundary is unbreakable.
6. The single drop-shadow (`rgba(0, 0, 0, 0.22) 3px 5px 30px`) is reserved for product photography only.
7. When in doubt about emphasis: alternate surface (light → dark tile) before adding chrome.
Known Gaps
- Form validation and error states were not surfaced on the analyzed pages; only the neutral search input is documented.
- The homepage's embedded video/player frame uses `{colors.surface-black}`; interior player controls are not documented (they're a platform widget, not a web-design token).
- Some component imagery is dynamic (rotating product hero) and its specific copy varies per surface — component specs name the structure, not the rotating content.
- Dark-mode counterparts for store and accessories utility cards were not surfaced on the analyzed pages; the system documented is the daytime/light-dominant variant Apple ships by default.
- Atmospheric photography (environment page mountain vista) is a content asset, not a design token; the documented `{component.environment-quote-card}` describes the structural surface only.
- The exact backdrop-filter blur radius on `{component.sub-nav-frosted}` and `{component.floating-sticky-bar}` is platform-dependent; production CSS uses `saturate(180%) blur(20px)` as a typical baseline but the value isn't formalized as a token.
개요
Apple의 웹 존재는 **거의 보이지 않는 UI로 구성된 경건한 제품 사진**의 마스터클래스입니다. 모든 페이지는 전체 제품 "타일"의 스택입니다. 밝은 캔버스와 어두운 캔버스가 번갈아 가며 각 캔버스는 주요 헤드라인, 한 줄짜리 태그라인, 두 개의 작은 파란색 알약 CTA 및 엄청나게 선명한 제품 렌더링을 중심으로 합니다. 제품과 경쟁하는 것은 없습니다. 타이포그래피는 자신감이 있지만 조용합니다. 색상은 순백색, 회백색 양피지 또는 검정색에 가까운 타일입니다. 상호작용 요소는 하나의 차분한 파란색입니다.
현대 SaaS 표준에서도 밀도가 비정상적으로 낮습니다. 각 타일은 대략 하나의 뷰포트를 차지하며 장식용 크롬이 없습니다. 즉, 테두리, 그라데이션, 장식 프레임, 헤드라인에 그림자가 없습니다. 고도는 제품 이미지가 표면에 있을 때만 나타납니다(시각적 무게를 위한 단일 소프트 `rgba(0, 0, 0, 0.22) 3px 5px 30px` 드롭). 그 결과 박물관 갤러리처럼 느껴지는 카탈로그가 탄생했습니다. 벽이 사라지고 유물이 대신하게 됩니다.
매장 및 매장 표면은 동일한 섀시를 유지하지만 모드를 전환합니다. 제품 구성자(iPhone 17 Pro, 액세서리 그리드)는 ``(18px) 반경에 얇은 테두리가 있고 지속적이고 얇은 하위 탐색 스트립과 쌍을 이루는 흰색 유틸리티 카드의 빽빽한 그리드를 도입합니다. 환경 페이지는 더 어둡고 사설적인 성향을 띠고 있습니다. 다섯 가지 표면 모두에서 타이포그래피 시스템, 간격 리듬 및 단일 파란색 액센트가 일관됩니다. 이는 서로 다른 볼륨으로 표현된 하나의 디자인 언어입니다.
**주요 특성:**
- 사진 우선 프리젠테이션; 제품이 말할 수 있도록 UI가 뒤로 물러납니다.
- 교대로 풀 블리드 타일 섹션: 흰색/양피지 ← 검정색에 가까운 색상 변경 자체가 섹션 구분선 역할을 합니다.
- 단일 파란색 악센트(`` — #0066cc)는 모든 대화형 요소를 전달합니다. 두 번째 브랜드 색상이 없습니다.
- 두 개의 버튼 문법: 작은 파란색 알약 CTA(``) 및 압축 유틸리티 직사각형(``).
- SF 프로 디스플레이 + SF 프로 텍스트 — 시그니처 "Apple Tight" 헤드라인 느낌을 위해 디스플레이 크기에 음수 문자 간격을 적용했습니다.
- 제품 이미지가 숨 쉬어야 할 때만 속삭이듯 부드러운 높이가 사용됩니다. 전체 시스템에서 정확히 하나의 그림자입니다.
- 단단한 2행 탐색: 슬림형 `` + 제품별 ``(지속적인 오른쪽 정렬 기본 CTA 포함)
- 여러 페이지에 걸친 섹션 리듬: 밝은 영웅 → 어두운 제품 타일 → 밝은 유틸리티 타일 → 어두운 타일 → 양피지 바닥글 — 예측 가능한 펄스.
색상
> **분석된 소스 페이지:** 홈페이지, 환경, 매장, iPhone 17 Pro 구매 페이지, 액세서리 색인. 색상 시스템은 5개 표면 모두에서 동일합니다. 표면 모드 혼합만 다릅니다.
브랜드 및 액센트
- **액션 블루**(`` — #0066cc): 단일 브랜드 수준의 대화형 색상입니다. 모든 텍스트 링크, 모든 파란색 알약 CTA("자세히 알아보기", "구매") 및 포커스 링 루트. 이것은 Apple의 조용하지만 보편적인 "click me" 신호입니다. 누르기 상태는 16진수 변경이 아닌 활성 배율 변환을 통해 약간 더 어두운 변형으로 전환됩니다.
- **포커스 블루** (`` — #0071e3): Action Blue의 약간 더 밝은 형제, 버튼의 키보드 포커스 링용으로 예약됨(`outline: 2px solid`).
- **스카이 링크 블루**(`` — #2997ff): 복사 내 링크 및 인라인 설명선을 위해 어두운 표면에 사용되는 더 밝은 파란색입니다. 여기서 Action Blue는 타일 배경에서 사라집니다.
표면
- **순백색**(`` — #ffffff): 주요 캔버스입니다. 콘텐츠, 유틸리티 카드, 매장 타일, 구성 그리드.
- **양피지** (`` — #f5f5f7): 시그니처 Apple 오프화이트. 상점 유틸리티 섹션의 조명 타일, 바닥글 영역 및 기본 페이지 캔버스를 대체하는 데 사용됩니다. 흰색과 리듬을 만들 정도로만 다릅니다.
- **진주 단추** (`` — #fafafc): 보조 "고스트" 단추의 채우기로 사용되는 거의 흰색입니다. 양피지 캔버스보다 가벼우므로 단추는 여전히 ``에 대한 단추로 읽힙니다.
- **검은색에 가까운 타일 1**(`` — #272729): 홈페이지 제품 그리드의 기본 어두운 타일 표면입니다.
- **검은색에 가까운 타일 2**(`` — #2a2a2c): 마이크로 스텝 라이터 — 어두운 타일이 타일 1 바로 위 또는 아래에 위치하여 가장 희미한 분리를 만드는 데 사용됩니다.
- **검은색에 가까운 타일 3**(`` — #252527): 마이크로 스텝 더 어두워짐 — 스택 하단과 내장된 비디오/플레이어 프레임에 사용됩니다.
- **퓨어 블랙**(`` — #000000): 진정한 공백을 위해 예약됨 — 비디오 플레이어 배경, 가장자리 간 사진 오버레이, 전역 탐색 모음 배경.
- **반투명 칩 회색** (`` — #d2d2d7): 원형 제어 버튼용 사진에 사용되는 반투명 회색 칩의 기본 16진수입니다. 프로덕션에서는 `rgba(210, 210, 215, 0.64)`.
로 ~64% 알파로 적용됩니다.
텍스트
- **검은색에 가까운 잉크**(`` — #1d1d1f): 모든 헤드라인, 모든 본문 단락 및 어두운 유틸리티 버튼 채우기의 목소리입니다. 페이지를 인쇄된 느낌보다는 사진 같은 느낌으로 유지하기 위해 순수한 검정색 대신 선택했습니다.
- **본문**(`` — #1d1d1f): 잉크와 동일한 16진수 — Apple은 밝은 표면의 모든 텍스트에 검정색에 가까운 하나의 톤을 사용합니다.
- **Body On Dark** (`` — #ffffff): 어두운 타일과 전역 탐색 모음의 모든 텍스트입니다.
- **바디 음소거**(`` — #cccccc): 순백색이 너무 클 수 있는 어두운 타일의 보조 복사본입니다.
- **잉크 음소거 80**(`` — #333333): 흰색 펄 버튼 표면의 본문 텍스트 - 순수한 검정색보다 약간 부드럽습니다.
- **잉크 음소거 48**(`` — #7a7a7a): 비활성화된 버튼 텍스트 및 법적 세부 인쇄.
가는선 및 테두리
- **디바이더 소프트**(`` — #f0f0f0): 보조 버튼의 "테두리" 톤 — 하드 라인이 아닌 링 섀도우 역할을 합니다. 프로덕션에서는 종종 `rgba(0, 0, 0, 0.04)`.
로 적용됩니다.
- **가는 선** (`` — #e0e0e0): 상점 유틸리티 카드 및 구성 칩의 1px 가는 선 테두리입니다.
브랜드 그라데이션
**장식적인 그라데이션이 없습니다.** 제품 사진(iPhone 17 Pro 카메라 플레이트, Apple Watch 밴드, AirPods 반사)의 분위기 있는 깊이는 CSS 그라데이션 오버레이가 아니라 이미지에 내재되어 있습니다. 환경 페이지의 주인공은 사진 분위기(새벽의 산 풍경)를 사용하지만 그라데이션 토큰은 정의되지 않습니다. Apple은 그라데이션 기반 디자인 토큰이 전혀 없는 보기 드문 명품 브랜드 사이트입니다.
타이포그래피
글꼴군
- **디스플레이**: `SF Pro Display, system-ui, -apple-system, sans-serif` — 19px 이상의 크기에 최적화된 Apple의 독점 디스플레이 화면입니다. 모든 헤드라인의 목소리를 정의합니다.
- **본문/UI**: `SF Pro Text, system-ui, -apple-system, sans-serif` — 20px 미만의 본문 문구, 캡션, 버튼 및 링크에 사용되는 텍스트 최적화 변형입니다.
- **OpenType 기능**: `font-variant-numeric: numerator`은 숫자 링크(가격표, 사양 시트)에서 활성화됩니다. Display sizes rely on tight tracking rather than contextual ligatures.
계층
| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | |
사용
|---|---|---|---|---|---|
| _`` | 56px | 600 | 1.07 | -0.28px | 영웅 헤드라인; 서명 "Apple Tight" 추적 |
| _`` | 40px | 600 | 1.10 | 0 | 모든 제품 타일 위에 타일 헤드라인 |
| _`` | 34px | 600 | 1.47 | -0.374px | 섹션 헤드(표시 비율의 SF Pro 텍스트) |
| _`` | 28px | 400 | 1.14 | 0.196px | 제품 타일 하위 사본 |
| _`` | 24px | 300 | 1.5 | 0 | 환경 페이지 리드 단락(드문 가중치 300) |
| _`` | 21px | 600 | 1.19 | 0.231px | 하위 타일 태그라인; 하위 탐색 카테고리 이름 |
| _`` | 17px | 600 | 1.24 | -0.374px | 인라인 강한 강조 |
| _`` | 17px | 400 | 1.47 | -0.374px | 기본 단락 |
| _`` | 17px | 400 | 2.41 | 0 | 바닥글/저장 유틸리티 링크 목록(느슨한 선행) |
| _`` | 14px | 400 | 1.43 | -0.224px | 보조 캡션, 버튼 텍스트 |
| _`` | 14px | 600 | 1.29 | -0.224px | 강조된 캡션 |
| _`` | 18px | 300 | 1.0 | 0 | 스토어 히어로 CTA(드문 가중치 300) |
| _`` | 14px | 400 | 1.29 | -0.224px | 유틸리티/탐색 버튼 라벨 |
| _`` | 12px | 400 | 1.0 | -0.12px | 작은 글씨, 바닥글 본문 |
| _`` | 10픽셀 | 400 | 1.3 | -0.08px | 마이크로 법적 면책조항 |
| _`` | 12px | 400 | 1.0 | -0.12px | 전역 탐색 메뉴 항목 |
원칙
- **디스플레이 크기의 음수 문자 간격.** 17px 이상의 모든 헤드라인에는 약간의 추적 조임이 있습니다(`-0.12 → -0.374px`). 이는 상징적인 "Apple Tight" 헤드라인 케이던스를 생성합니다. 12px 이하에서는 절대 사용하지 마세요.
- **본문은 16px이 아니라 17px입니다.** Apple은 SaaS 규칙을 깨고 단락 텍스트를 17px로 실행합니다. 추가 픽셀은 페이지에 "스캔이 아닌 읽기" 속도를 제공합니다.
- **가중치 300은 실제적이고 드뭅니다.** 소수의 큰 크기 읽기에 의도적으로 사용됩니다(18px/300의 `` 및 24px/300의 ``). 이는 우연이 아닙니다. 콘텐츠가 경쾌하게 느껴져야 하는 순간을 위해 예약된 밝은 분위기의 단서입니다.
- **헤드라인의 경우 가중치 700이 아니라 600입니다.** Apple의 헤드라인은 가중치 600입니다. 가중치 700은 더 많은 어설션이 필요할 때 ``(21px)에 드물게 사용됩니다.
- **줄 높이는 상황에 따라 다릅니다.** 표시 크기는 1.07~1.19(긴밀함)를 사용합니다. 본체는 1.47을 사용합니다. 바닥글/스토어의 유틸리티 링크 스택은 비정상적으로 완화된 2.41(``)을 사용합니다. 2.41은 버그가 아닙니다. 바닥글의 조밀한 링크 열이 숨쉬는 방식입니다.
- **무게 500은 고의로 없습니다.** 사다리는 300/400/600/700입니다. 중간 중량 판독값은 항상 600을 사용합니다.
글꼴 대체에 대한 참고사항
SF Pro는 Apple의 독점 시스템 글꼴입니다. 오프시스템 구축 시:
- 첫 번째 스택 항목으로 `system-ui, -apple-system, BlinkMacSystemFont`을 사용하세요. macOS/iOS/Safari에서는 실제 SF Pro로 확인됩니다.
- Apple이 아닌 플랫폼의 경우 **Inter**(Google Fonts, 변수)는 가장 가까운 오픈 소스 버전입니다. __CODEBCK_725___를 포함한 가중치 600의 Inter는 SF Pro의 반올림된 "a" 문자와 비슷합니다.
- 디스플레이 크기를 `letter-spacing` `-0.01em` 줄여 Apple의 타이트한 느낌을 재현합니다. Inter의 기본 추적은 SF Pro보다 약간 더 넓게 실행됩니다.
- 본문 텍스트의 경우 Inter를 대체할 때 line-height를 `0.03`(1.47 → 1.44)만큼 좁힙니다. Inter의 x 높이가 높을수록 선행이 덜 필요합니다.
레이아웃
간격 시스템
- **기본 단위:** 8px. 하위 기본 값(2, 4, 5, 6, 7)은 엄격한 인쇄 조정에 사용됩니다. 구조적 레이아웃은 8/12/16/20/24.
에 맞춰집니다.
- **토큰:** `` 4px · `` 8px · `` 12px · `` 17px · `` 24px · `` 32px · `` 48px · `` 80px.
- **섹션 수직 패딩:** ``(80px) 제품 타일 내부; 타일은 간격이 0인 가장자리에서 가장자리까지 스택됩니다(색상 변경으로 중단이 제공됨).
- **카드 패딩:** 유틸리티 그리드 카드 내부 ``(24px).
- **버튼 패딩:** 세로 8~11px, 가로 15~22px.
- **범용 리듬 상수:** 17px 본문 줄 높이 승수(~25px 줄) 및 21px 태그라인 크기가 분석된 모든 페이지에 표시됩니다.
그리드 및 컨테이너
- **최대 콘텐츠 너비:** 텍스트가 많은 섹션(환경)에서 ~980px, 제품 그리드(매장, 액세서리)에서 ~1440px, 제품 타일(홈페이지)의 풀 블리드.
- **열 패턴:** 매장/액세서리의 3~5열 유틸리티 카드 그리드; 홈페이지 임시 섹션에 2열 타일이 나란히 표시됩니다. 제품 타일 히어로의 단일 열 중심 스택.
- **홈통:** 유틸리티 그리드의 카드 사이 20~24픽셀.
공백 철학
Apple의 공백은 제품의 받침대입니다. 모든 타일은 헤드라인 위 최소 64px, 아래 48~64px 공기로 시작됩니다. 제품 렌더링은 결코 혼잡하지 않습니다. 제품 이미지에 가장 가까운 콘텐츠는 최소 40px 이상 떨어져 있습니다. 바닥글은 이 문제를 해결하는 유일한 영역입니다. 여기에서 Apple은 전체 정보 아키텍처를 한 눈에 볼 수 있도록 의도적으로 밀도를 높였습니다.
고도 및 깊이
| 레벨 | 치료 | |
사용
|---|---|---|
| 플랫 | 그림자 없음, 테두리 없음 | 풀 블리드 타일, 전역 탐색, 바닥글, 본문 섹션 |
| 부드러운 헤어라인 | 1px `rgba(0, 0, 0, 0.08)` 테두리 | 유틸리티 카드, 하위 탐색 젖빛 유리 분리기 |
| 배경 흐림 | `backdrop-filter: blur(N)` 양피지 80% | 하위 탐색 및 iPhone은 부동 고정 막대를 구매합니다 |
| 제품 섀도우 | _`rgba(0, 0, 0, 0.22) 3px 5px 30px 0` | 제품 렌더링이 표면에 놓여 있음(시스템에서 유일하게 실제 "그림자") |
**그림자 철학.** Apple은 **정확히 하나의** 그림자를 사용하며 사진 제품 이미지에 적용됩니다. 카드나 버튼, 텍스트에는 적용되지 않습니다. UI의 상승은 (a) 표면 색상 변경(밝은 타일 ← 어두운 타일) 및 (b) 고정 막대의 배경 흐림으로 인해 발생합니다. 단일 그림자는 UI 계층 구조가 아니라 제품에 무게를 부여하는 것입니다.
장식적 깊이
- **환경 페이지(사진 비스타)의 대기 이미지**는 분위기를 제공합니다. CSS 그라데이션이 포함되지 않았습니다.
- **가장자리에서 가장자리 타일 교체**는 경계나 그림자 없이 리듬을 만듭니다. 색상 변경 자체가 구분선입니다.
- **배경 필터 흐림**은 `` 및 ``에서 장식용이 아닌 기능적인 '콘텐츠 위에 떠 있는' 효과를 만듭니다.
도형
경계 반경 배율
| 토큰 | 가치 | |
사용
|---|---|---|
| _`` | 0픽셀 | 풀 블리드 제품 타일(코너 라운딩 없음) |
| _`` | 5픽셀 | 미묘한 칩 스타일로 지정된 인라인 링크(드물게) |
| _`` | 8픽셀 | 어두운 유틸리티 버튼(로그인, 가방), 인라인 카드 이미지 |
| _`` | 11px | 화이트 펄 버튼 캡슐 |
| _`` | 18px | 유틸리티 카드, 액세서리 그리드 카드 저장 |
| _`` | 9999px | 기본 파란색 알약 CTA, 하위 탐색 구매 버튼, 구성 옵션 칩, 검색 입력 - 시그니처 Apple 알약 |
| _`` | 9999px / 50% | 사진 위에 떠다니는 원형 제어 칩 |
사진 기하학
- **히어로 이미지**: 홈페이지에서 풀 블리드, 21:9 이상; 환경 및 상점 페이지의 경우 16:9입니다. 제품 렌더링은 사진처럼 사실적이며 종종 타일 배경이 되는 색조 표면에서 촬영됩니다.
- **제품 렌더링**: 투명도가 있는 PNG/WebP; 표면 타일 위에 놓고 시스템 그림자를 선택하세요.
- **액세서리 그리드**: ``(18px) 반경에서 정사각형 1:1 자르기, 밝은 중립 배경, 20~40px 내부 패딩으로 중앙에 제품 배치.
- **히어로 타일에는 둥근 이미지가 없습니다** — 이미지는 풀 블리드 직사각형입니다. 반올림(``, ``)은 인라인 카드 이미지에만 나타납니다.
- 모든 중단점에서 반응형 `srcset` 및 `sizes`을 통한 지연 로딩; CDN에 최적화된 WebP.
구성요소
상단 탐색
**`global-nav`** — 모든 페이지 상단에 고정된 매우 얇은 검정색 탐색 모음입니다. 배경 ``, 높이 44px, 텍스트 `` ``(12px / 400 / -0.12px 추적). 링크는 조용하고 ~20px 간격으로 상단을 가로지르며 연결됩니다. 오른쪽 정렬 클러스터: 검색, 가방 아이콘 — 항상 표시됩니다. 모바일에서는 ~834px 및 Apple 로고 중앙에서 햄버거로 축소됩니다.
**`sub-nav-frosted`** — 전역 탐색 아래에 고정되는 표면별 탐색입니다. 배경 필터 흐림을 사용하여 불투명도 80%의 배경 ``, 반투명 유리 효과 생성. 높이 52px. 왼쪽 콘텐츠: ``(21px/600)의 제품 카테고리 이름("iPhone", "Store", "Accessories"). 콘텐츠 오른쪽: ``(14px)의 인라인 탐색 링크, 영구 ``("구매") 또는 유틸리티 링크로 끝남.
버튼
_**`button-primary`** — 시그니처 Apple 액션입니다. 배경 ``(Action Blue #0066cc), 텍스트 `` in ``(SF Pro Text 17px / 400), 둥근 ``(전체 알약 — 캡슐 모양), 패딩 11px × 22px. 전체 알약 반경은 브랜드 행동 신호입니다.
- 활성 상태: `` — `transform: scale(0.95)`(시스템 전체의 마이크로 상호작용).
- 포커스 상태: `` — 2px 실선 `` 윤곽선.
**`button-secondary-pill`** — 두 개의 파란색 알약이 함께 나타날 때 두 번째 CTA로 사용됩니다("자세히 알아보기" / "구매"). 배경 투명, 텍스트 ``, 1px 단색 `` 테두리, 둥근 ``, 패딩 11px × 22px. "유령 알약"으로 읽습니다.
**`button-dark-utility`** — 전역 탐색 작업(로그인, 가방, 언어 선택기). 배경 ``(#1d1d1f), ``(14px / 400 / -0.224px 추적)의 텍스트 ``, 반올림 ``(8px), 패딩 8px × 15px. 활성 상태는 `transform: scale(0.95)`.
을 통해 축소됩니다.
**`button-pearl-capsule`** — 제품 카드 보조 버튼입니다. 배경 ``(#fafafc), ``(14px)의 텍스트 ``, 3px 실선 `` 테두리(보이는 선이 아닌 부드러운 링 역할), 둥근 ``(11px), 패딩 8px × 14px.
**`button-store-hero`** — 스토어 히어로 화면에 사용되는 더 큰 기본 CTA입니다. ``과 동일한 Action Blue + Paper White이지만 ``(18px / 300 - 희귀한 가중치 300에 유의) 및 약간 더 많은 패딩(14px × 28px)을 사용합니다. 매장 방문 시 드물게 사용됩니다.
**`button-icon-circular`** — 사진 위에 떠 있습니다. 44 × 44px, 배경 `` ~64% 알파, 아이콘 ``, 반올림 ``. 캐러셀 컨트롤, 닫기 버튼, 이미지 내 컨트롤(iPhone 구매 페이지의 제품 이미지 썸네일)에 사용됩니다.
**`text-link`** — ``의 인라인 본문 링크(액션 블루). 문맥에 따라 밑줄이 그어지거나 밑줄이 그어지지 않습니다.
**`text-link-on-dark`** — ``(스카이 링크 블루 #2997ff)의 어두운 타일에 있는 인라인 본문 링크 — 액션 블루가 ``.
에 대해 사라집니다.
카드 및 용기
**`product-tile-light`** — 풀 블리드 조명 타일. 배경 ``(흰색), 텍스트 ``, 둥근 ``(0 — 타일이 가장자리에 닿음), 수직 패딩 ``(80px). 중앙 스택: ``(40px/600)의 제품 이름 → ``(28px/400)의 한 줄 태그라인 → 2개의 `` CTA("자세히 알아보기"/ "구매") → 제품 렌더링이 시스템 그림자와 함께 표면에 놓여 있습니다.
_**`product-tile-parchment`** — ``과 동일하지만 ``(#f5f5f7)에 있습니다. 두 개의 연속된 흰색 타일을 부수는 데 사용됩니다.
**`product-tile-dark`** — 풀 블리드 어두운 타일. 배경 ``(#272729), 텍스트 ``, 둥근 ``, 세로 패딩 ``(80px). 밝은 타일과 동일한 콘텐츠 스택이지만 인라인 복사의 경우 `` 및 ``(Action Blue는 여전히 어두운 표면에서 작동함)이 있습니다. 홈페이지 제품 그리드에서 교대로 어두운 띠로 사용됩니다.
_**`product-tile-dark-2`** — ``(#2a2a2c)의 변형입니다. 어두운 타일이 `` 바로 위 또는 아래에 위치하여 미세한 밝기 변화를 통해 가장 희미한 분리를 만드는 데 사용됩니다.
_**`product-tile-dark-3`** — ``(#252527)의 변형입니다. 스택 하단과 삽입된 비디오/플레이어 프레임에 사용됩니다.
**`store-utility-card`** — 매장 그리드 및 액세서리 그리드에 사용됩니다. 배경 ``(흰색), 1px 단색 `` 테두리, 둥근 ``(18px), 패딩 ``(24px). 상단: 제품 이미지(내부 이미지 반경이 ``(8px)인 1:1 자르기). 아래: ``(17px/600)의 제품 이름, ``(17px/400)의 가격 및 ``("구매" 또는 "자세히 알아보기"). 기본적으로 그림자가 없습니다. 제품 렌더링 자체는 시스템 제품 섀도우를 전달합니다.
_**`configurator-option-chip`** — iPhone 17 Pro 구매 페이지에 사용되는 알약 모양의 탭 가능한 셀입니다. 배경 ``, ``의 텍스트 ``, 반올림 ``, 패딩 12px × 16px. 작은 제품 썸네일 + 라벨 + 가격 델타가 포함되어 있습니다. 행당 4~5개의 옵션이 그리드로 배열되어 있습니다.
**`configurator-option-chip-selected`** — 선택된 상태. 테두리가 2px 솔리드 ``으로 업그레이드되었습니다. 같은 모양, 같은 내용.
_**`environment-quote-card`** — 환경 페이지에 특화된 사진 캔버스 히어로입니다. 대체 색상으로 ``을 사용하는 어두운 사진 배경(새벽의 산 전망), ``(40px)의 중앙 흰색 텍스트 헤드라인, 헤드라인 위의 작은 녹색 "Apple 2030" 그림 문자 로고, 아래 단일 ``. 패딩 ``(80px).
_**`floating-sticky-bar`** — 스크롤하는 동안 iPhone 17 Pro 구매 페이지의 뷰포트 하단에 떠 있습니다. 배경 `` 불투명도 80%, `backdrop-filter: blur(N)`, 높이 64px, 패딩 12px × 32px. 왼쪽: `` 단위의 총 실행 가격. 오른쪽: `` ("가방에 담기").
입력 및 양식
**`search-input`** — 액세서리 검색 입력입니다. 배경 ``, 텍스트 `` ``(17px), 1px 실선 `rgba(0, 0, 0, 0.08)` 테두리, 둥근 ``(전체 알약 - 검색도 알약 모양이며 CTA 문법과 일치), 패딩 12px × 20px, 높이 44px. 주요 아이콘: 14px의 문자 검색, 음소거된 색조.
분석된 페이지에는 오류 및 유효성 검사 상태가 표시되지 않았습니다.
바닥글
_**`footer`** — 배경 ``(#f5f5f7), 텍스트 ``. ``의 링크 열(17px / 400 / 2.41 줄 높이 — 완화된 행간이 조밀한 열을 스캔 가능하게 만드는 것입니다). ``(14px/600)의 열 제목입니다. `` 텍스트가 포함된 ``(12px/400)의 맨 아래에 있는 법적 행입니다. 세로 패딩 64px.
해야 할 일과 하지 말아야 할 일
Do
- 링크, 알약 CTA, 초점 신호 등 모든 대화형 요소에 ``(Action Blue #0066cc)를 사용하세요. 단일 악센트는 협상할 수 없습니다.
- 음수 문자 간격(`-0.28 → -0.374px`)을 사용하여 `` 또는 ``에 헤드라인을 설정하여 "Apple Tight" 시그니처를 얻습니다.
- 16px가 아닌 ``(17px / 400 / 1.47 / -0.374px)에서 본문 복사를 실행하세요. 추가 픽셀은 브랜드의 읽기 속도를 정의합니다.
- 풀 블리드 섹션 리듬의 경우 ``(또는 양피지) 및 ``을 대체합니다. 색상 변경은 구분선입니다.
- 기본 파란색 CTA 및 "작업"으로 읽어야 하는 기타 요소(구성기 칩, 검색 입력, 고정 막대 CTA)에 대해 ``을 예약하세요.
- 단일 제품 그림자(`rgba(0, 0, 0, 0.22) 3px 5px 30px`)는 표면에 있는 제품 렌더링에만 적용하고 카드, 버튼 또는 텍스트에는 적용하지 마세요.
- 모든 버튼의 활성/누름 상태로 `transform: scale(0.95)`을 사용하세요. 이는 시스템 전체의 마이크로 상호 작용입니다.
- 전역 탐색 유지 ``(진짜 검정색) — 대부분의 페이지에 순수한 검정색이 나타나는 유일한 위치입니다.
하지 마세요
- 두 번째 강조 색상을 도입하지 마세요. 모든 "클릭하세요" 신호는 ``(액션 블루)입니다.
- 카드, 버튼, 텍스트에 그림자를 추가하지 마세요. 그림자는 제품 이미지용으로 예약되어 있습니다.
- 그라데이션을 장식용 배경으로 사용하지 마세요. 분위기는 사진에서 나옵니다.
- Don't set body copy at weight 500 — Apple's ladder is 300 / 400 / 600 / 700, with 500 deliberately absent. 본문은 항상 400입니다. 강한 인라인은 600입니다. 디스플레이는 600입니다.
- 풀 블리드 타일을 둥글게 하지 마십시오. 타일은 직사각형이고 가장자리가 맞닿아 있습니다. 색상 변경은 구분선입니다.
- 본문의 줄 높이를 1.47 미만으로 조이지 마세요. 편집 선두는 브랜드의 일부입니다.
- 반경 문법을 혼합하지 마십시오. 컴팩트 유틸리티의 경우 ``, 유틸리티 카드의 경우 ``, 알약의 경우 ``을 사용하고 그 사이에는 아무것도 사용하지 마십시오(드문 `` 진주 버튼 제외).
- 밝은 표면에는 ``(스카이 링크 블루)을 사용하지 마세요. 어두운 타일 전용 변형입니다. Action Blue는 밝은 표면에 적합합니다.
반응적 행동
중단점
| 이름 | 폭 | 주요 변경 사항 |
|---|---|---|
| 소형 전화기 | ≤ 419px | 단일 열 타일; 하위 탐색은 카테고리 이름 + 기본 CTA로만 축소됩니다. hero typography drops to 28px |
| 전화 | 420~640px | 단일 열 스택; 제품은 타일 너비의 80%까지 크기를 렌더링합니다. 영웅 h1이 34px로 떨어짐 |
| 대형 전화기 | 641~735px | 타일이 더 단단한 패딩으로 전환됩니다(세로 48px 대 80px). 작은 글씨로 인쇄된 포장지 |
| 태블릿 초상화 | 736~833px | 글로벌 탐색이 햄버거로 축소됩니다. 하위 탐색은 카테고리 칩을 숨기고 기본 CTA를 유지합니다 |
| 태블릿 풍경 | 834~1023px | 전역 탐색은 완전히 확장되어 반환됩니다. 3열 유틸리티 그리드가 2열로 됨 |
| 소형 데스크탑 | 1024~1068px | 제품 타일은 여백 홈통이 있는 2/3 너비를 사용합니다. 영웅 h1은 40px로 유지됩니다 |
| 데스크탑 | 1069~1440px | 전체 레이아웃; 4-5개의 기둥 저장소 그리드; 콘텐츠 최대 1440px |
| 와이드 데스크탑 | ≥ 1441px | 콘텐츠는 1440px로 잠기고 여백은 추가 너비를 흡수합니다 |
상담원에게 중요한 구조적 중단점: 1440px(콘텐츠 잠금), 1068px(소형 데스크톱), 833px(태블릿 가로 방향 전환), 734px(태블릿 세로 방향), 640px(휴대폰), 480px(소형 휴대폰)
터치 대상
- 최소 44 × 44픽셀. ``은 ~44 × 100픽셀에 도달합니다(최대 알약 반경을 사용하면 라벨에서 제안하는 것보다 가시적 히트 영역이 더 넉넉해집니다).
- ``은(는) 정확히 44 × 44px입니다.
- 전역 탐색 유틸리티 링크는 더 작습니다(~32 × 80px). 이는 정밀한 데스크톱 작업이기 때문에 의도적으로 더 좁은 대상에 위치하며 모바일 햄버거는 833px 이하에서 링크를 대체합니다.
축소 전략
- **전역 탐색**: 데스크탑의 전체 수평 링크 행 → 834px 이하에서 Apple 로고 + 햄버거 + 가방 아이콘으로 축소됩니다.
- **Sub-nav**: category name + inline links + primary CTA → category name + primary CTA only at mobile; 인라인 링크가 햄버거 트레이로 이동합니다.
- **제품 타일**: 834px에서 2열에서 1열로 스택됩니다. 소형 휴대폰에서는 수직 패딩이 80px → 48px로 조여집니다.
- **유틸리티 그리드**(스토어, 액세서리): 5열 → 4열(1440px) → 3열(1068px) → 2열(834px) → 1열(640px).
- **히어로 타이포그래피**: ``(56px) → 1068px에서 ``(40px) → 640px에서 34px → 419px에서 28px.
이미지 동작
- 모든 제품 이미지는 중단점 일치 자르기와 함께 반응형 `srcset`을 사용합니다.
- 영웅 사진은 모바일에서 아트 방향을 바꿀 수 있습니다(예: 환경 페이지의 전망이 모바일에서 더 큰 가로 세로 비율로 잘려 피사체의 프레임이 다르게 구성됨).
- 제품 렌더링은 중단점 전체에서 1:1 또는 4:3 화면비를 유지합니다. 배율만 변경됩니다.
- 지연 로딩이 기본값입니다. 상단 영웅이 열심히 로드됩니다.
반복 가이드
1. 한 번에 하나의 구성 요소에만 집중하세요. YAML 키를 직접 참조합니다(``, ``).
2. 기존 구성요소의 변형(`-active`, `-focus`, `-2`, `-3`)은 `components:`.
에 별도의 항목으로 존재합니다.
3. 어디서나 ``을 사용하세요. 16진수 인라인은 사용하지 마세요.
4. 문서에 마우스를 올리지 마세요. 기본 및 활성/누름 상태만 해당됩니다.
5. 디스플레이 헤드라인은 음수 문자 간격으로 SF Pro Display 600을 유지합니다. 본문은 SF Pro Text 400을 17px로 유지합니다. 경계는 깨질 수 없습니다.
6. 단일 그림자(`rgba(0, 0, 0, 0.22) 3px 5px 30px`)는 제품 사진용으로만 예약되어 있습니다.
7. 강조가 의심스러운 경우: 크롬을 추가하기 전에 표면을 대체합니다(밝은 타일 → 어두운 타일).
알려진 격차
- 양식 유효성 검사 및 오류 상태가 분석된 페이지에 표시되지 않았습니다. 중립 검색 입력만 문서화되어 있습니다.
- 홈페이지에 삽입된 비디오/플레이어 프레임은 ``을 사용합니다. 내부 플레이어 컨트롤은 문서화되어 있지 않습니다(웹 디자인 토큰이 아닌 플랫폼 위젯입니다).
- 일부 구성요소 이미지는 동적(회전하는 제품 히어로)이며 구체적인 복사본은 표면마다 다릅니다. 구성요소 사양은 회전하는 콘텐츠가 아닌 구조를 지정합니다.
- 상점 및 액세서리 유틸리티 카드에 대한 다크 모드 대응 항목은 분석된 페이지에 표시되지 않았습니다. 문서화된 시스템은 Apple이 기본적으로 제공하는 주간/빛이 지배적인 변형입니다.
- 대기 사진(환경 페이지 산 풍경)은 디자인 토큰이 아닌 콘텐츠 자산입니다. 문서화된 ``은 구조적 표면만 설명합니다.
- `` 및 ``의 정확한 배경화면 필터 흐림 반경은 플랫폼에 따라 다릅니다. 프로덕션 CSS는 `saturate(180%) blur(20px)`를 일반적인 기준으로 사용하지만 값은 토큰으로 형식화되지 않습니다.
概要
_Apple の Web プレゼンスは、*ほぼ目に見えない UI で囲まれた敬虔な製品写真**のマスタークラスです。すべてのページは、製品の端から端までの「タイル」のスタックです。明るいキャンバスと暗いキャンバスが交互に配置され、それぞれの中心にヒーローの見出し、一行のキャッチフレーズ、2 つの小さな青い錠剤 CTA、そして信じられないほど鮮明な製品レンダリングが配置されています。製品と競合するものはありません。タイポグラフィーは自信に満ちていますが、静かです。色は純白、オフホワイトの羊皮紙、または黒に近いタイルのいずれかです。インタラクティブな要素は、単一の静かな青色です。
密度は、現代の SaaS 標準から見ても異常に低いです。各タイルはおよそ 1 つのビューポートを占め、装飾的なクロムはありません。境界線、グラデーション、装飾フレーム、見出しの影はありません。高度は、製品画像が表面に置かれている場合にのみ表示されます (視覚的な重みのために単一のソフト `rgba(0, 0, 0, 0.22) 3px 5px 30px` ドロップ)。その結果、まるで博物館のギャラリーのようなカタログが完成しました。壁が消え、人工物が引き継がれました。
店舗とショップの表面は同じシャーシを保持しますが、モードが切り替わります。製品コンフィギュレーター (iPhone 17 Pro、アクセサリ グリッド) では、半径 `` (18 ピクセル) の細い境界線を持つ白いユーティリティ カードのタイトなグリッドが導入され、永続的な薄いサブナビゲーション ストリップと組み合わせられています。環境ページはより暗く、より編集的なものになっています。 5 つの表面すべてにわたって、タイポグラフィ システム、間隔のリズム、および単一の青色のアクセントが一貫しています。これは、さまざまな量で表現された 1 つのデザイン言語です。
_**主な特徴:**
- 写真ファーストのプレゼンテーション。 UI が後退し、製品が音声を話せるようになります。
- フルブリード タイル セクションを交互に配置: 白/パーチメント ↔ ほぼ黒。色の変更自体がセクションの区切りとして機能します。
- 単一の青色のアクセント (`` — #0066cc) には、すべてのインタラクティブ要素が含まれます。 2 番目のブランド カラーは存在しません。
- 2 つのボタン文法: 小さな青い錠剤 CTA (``) とコンパクトなユーティリティ四角形 (``)。
- SF Pro Display + SF Pro Text — 特徴的な「Apple タイト」な見出しの雰囲気を実現するために、ディスプレイ サイズでの負の文字間隔。
- 製品画像に呼吸が必要な場合にのみ使用されるささやきのようなソフトなエレベーション。システム全体でちょうど 1 つのドロップ シャドウです。
- タイトな 2 行ナビゲーション: スリム `` + 製品固有の `` と永続的な右揃えのプライマリ CTA。
- 複数のページにわたるセクションのリズム: ライトヒーロー→ダーク製品タイル→ライトユーティリティタイル→ダークタイル→羊皮紙フッター — 予測可能なパルス。
色
> **分析されたソース ページ:** ホームページ、環境、ストア、iPhone 17 Pro 購入ページ、アクセサリのインデックス。カラー システムは 5 つのサーフェスすべてで同一です。サーフェス モードの組み合わせのみが異なります。
ブランドとアクセント
- **アクション ブルー** (`` — #0066cc): 単一のブランド レベルのインタラクティブ カラー。すべてのテキスト リンク、すべての青い錠剤 CTA (「詳細を確認」、「購入」)、およびフォーカス リングのルート。これは Apple の静かだが普遍的な「クリックしてください」信号です。 プレス状態は、16 進数の変更ではなく、アクティブなスケール変換を介してわずかに暗いバリアントに移行します。
- **フォーカス ブルー** (`` — #0071e3): アクション ブルーのわずかに明るい兄弟で、ボタンのキーボード フォーカス リング用に予約されています (`outline: 2px solid`)。
- **スカイ リンク ブルー** (`` — #2997ff): コピー内リンクとインライン コールアウトの暗い表面に使用される明るい青。タイルの背景に対してアクション ブルーが消えます。
表面
- **ピュア ホワイト** (`` — #ffffff): 支配的なキャンバス。コンテンツ、ユーティリティ カード、ストア タイル、コンフィギュレーター グリッド。
- **羊皮紙** (`` — #f5f5f7): Apple の特徴であるオフホワイト。ストア ユーティリティ セクションのライト タイル、フッター領域、およびデフォルトのページ キャンバスを交互に表示するために使用されます。白とは違うだけでリズムが生まれます。
- **パール ボタン** (`` — #fafafc): 二次「ゴースト」ボタンの塗りつぶしとして使用されるほぼ白。羊皮紙のキャンバスよりも明るいため、ボタンは__CODEBCK_684___に対するボタンとして読み取れます。
- **黒に近いタイル 1** (`` — #272729): ホームページの商品グリッド上の主要な暗いタイルの表面。
- **黒に近いタイル 2** (`` — #2a2a2c): マイクロステップ ライター — 暗いタイルがタイル 1 の真上または真下にある場合に使用され、最もかすかな分離を作成します。
- **黒に近いタイル 3** (`` — #252527): マイクロステップで暗くなります — スタックの一番下および埋め込みビデオ/プレーヤー フレームで使用されます。
- **ピュア ブラック** (`` — #000000): 真の無効用に予約されています — ビデオ プレーヤーの背景、端から端までの写真オーバーレイ、グローバル ナビゲーション バーの背景。
- **半透明チップ グレー** (`` — #d2d2d7): 円形コントロール ボタンの写真上に使用される半透明グレー チップの基本ヘクス。運用環境では、~64% アルファで `rgba(210, 210, 215, 0.64)`.
として適用されます。
テキスト
- **黒に近いインク** (`` — #1d1d1f): すべての見出し、すべての本文段落の音声、および暗いユーティリティ ボタンの塗りつぶし。ページを印刷物ではなく写真のように見せるために、純粋な黒の代わりに選択しました。
- **本文** (`` — #1d1d1f): インクと同じ 16 進数 — Apple は、明るい表面上のすべてのテキストに黒に近い 1 つのトーンを使用します。
- **ダーク ボディ** (`` — #ffffff): ダーク タイルとグローバル ナビゲーション バー上のすべてのテキスト。
- **ボディミュート** (`` — #cccccc): 真っ白だとうるさすぎる暗いタイル上のセカンダリ コピー。
- **インク ミュート 80** (`` — #333333): 白いパール ボタン表面の本文テキスト — 純粋な黒よりもわずかに柔らかい。
- **インク ミュート 48** (`` — #7a7a7a): ボタンのテキストと法的細字が無効になりました。
ヘアラインと境界線
- _**ディバイダー ソフト** (`` — #f0f0f0): 二次ボタンの「境界線」トーン — ハード ラインではなくリング シャドウとして機能します。 運用環境では、__CODEBCK_698___.
として適用されることが多い
- **ヘアライン** (`` — #e0e0e0): ストア ユーティリティ カードおよびコンフィギュレーター チップの 1 ピクセルのヘアライン境界線。
ブランド グラデーション
**装飾的なグラデーションはありません。** 製品写真の大気の深さ (iPhone 17 Pro のカメラ プレート、Apple Watch のバンド、AirPods の反射) は、CSS グラデーション オーバーレイではなく、画像に固有のものです。環境ページのヒーローは写真のような雰囲気 (夜明けの山の眺め) を使用していますが、グラデーション トークンは定義されていません。 Apple は、グラデーションベースのデザイン トークンをまったく使用していない珍しい高級ブランド サイトです。
タイポグラフィ
フォント ファミリー
- **ディスプレイ**: `SF Pro Display, system-ui, -apple-system, sans-serif` — Apple 独自のディスプレイ面、19 ピクセル以上のサイズに最適化されています。すべての見出しの内容を定義します。
- **本文 / UI**: `SF Pro Text, system-ui, -apple-system, sans-serif` — 本文のコピー、キャプション、ボタン、および 20 ピクセル未満のリンクに使用されるテキスト最適化バリアント。
- **OpenType 機能**: `font-variant-numeric: numerator` は数値リンク (価格表、仕様書) で有効になります。表示サイズは、文脈に応じた合字ではなく厳密な追跡に依存します。
階層_
|トークン |サイズ |重量 |行の高さ |文字間隔 | |
を使用します
|---|---|---|---|---|---|
| `` | 56ピクセル | 600 | 1.07 | -0.28ピクセル |ヒーローの見出し。署名「Apple タイト」追跡 |
| `` | 40ピクセル | 600 | 1.10 | 0 |すべての商品タイルの上に見出しを並べて表示 |
| `` | 34ピクセル | 600 | 1.47 | -0.374ピクセル |セクションの見出し (表示比率での SF Pro テキスト) |
| `` | 28ピクセル | 400 | 1.14 | 0.196ピクセル |製品タイルのサブコピー |
| `` | 24ピクセル | 300 | 1.5 | 0 |環境ページのリード段落 (まれに重み 300) |
| `` | 21ピクセル | 600 | 1.19 | 0.231ピクセル |サブタイルのキャッチフレーズ。サブナビゲーション カテゴリ名 |
| `` | 17ピクセル | 600 | 1.24 | -0.374ピクセル |インラインの強い強調 |
| `` | 17ピクセル | 400 | 1.47 | -0.374ピクセル |デフォルトの段落 |
| `` | 17ピクセル | 400 | 2.41 | 0 |フッター/ストア ユーティリティ リンク リスト (緩和された先頭) |
| `` | 14ピクセル | 400 | 1.43 | -0.224ピクセル |二次キャプション、ボタン テキスト |
| `` | 14ピクセル | 600 | 1.29 | -0.224ピクセル |強調されたキャプション |
| `` | 18ピクセル | 300 | 1.0 | 0 |ストア ヒーロー CTA (レア ウェイト 300) |
| `` | 14ピクセル | 400 | 1.29 | -0.224ピクセル |ユーティリティ/ナビゲーション ボタンのラベル |
| `` | 12ピクセル | 400 | 1.0 | -0.12ピクセル |細字、フッター本文 |
| `` | 10ピクセル | 400 | 1.3 | -0.08ピクセル |マイクロ法的免責事項 |
| `` | 12ピクセル | 400 | 1.0 | -0.12ピクセル |グローバル ナビゲーション メニュー項目 |
原則
- **表示サイズでの負の文字間隔。** 17 ピクセル以上のすべての見出しには、若干のトラッキングが厳しくなります (`-0.12 → -0.374px`)。これにより、象徴的な「Apple タイト」という見出しのリズムが生まれます。 12px 以下では決して使用しないでください。
- **本文は 16 ピクセルではなく 17 ピクセルでコピーします。** Apple は SaaS の慣例を破り、段落テキストを 17 ピクセルで実行します。 余分なピクセルにより、ページに紛れもなく「スキャンではなく読み取り」のペースが与えられます。
- **ウェイト 300 は実際であり、まれです。** 少数の大きなサイズの読み取りで意図的に使用されます (18px/300 の`` および 24px/300 の ``)。これは偶然ではありません。コンテンツが軽やかである必要がある瞬間のために用意された、明るい雰囲気の合図です。
- **見出しのウェイトは 700 ではなく 600 です。** Apple の見出しはウェイト 600 に設定されています。ウェイト 700 は、もう少し主張が必要な場合に `` (21 ピクセル) に控えめに使用されます。
- **行の高さはコンテキストによって異なります。** 表示サイズは 1.07 ～ 1.19 (タイト) を使用します。本体は1.47を使用しています。フッター/ストアのユーティリティ リンク スタックは、非常に緩和された 2.41 (``) を使用します。 2.41 はバグではありません。フッターの密なリンク列がどのように呼吸するかです。
- **ウェイト 500 は意図的に省略されています。** ラダーは 300 / 400 / 600 / 700 です。中程度のウェイトの測定値には常に 600 が使用されます。
フォントの代替に関する注意
SF Pro は、Apple 独自のシステム フォントです。オフシステムを構築する場合:
- 最初のスタック エントリとして `system-ui, -apple-system, BlinkMacSystemFont` を使用します。macOS/iOS/Safari では、これは実際の SF Pro に解決されます。
- _Apple 以外のプラットフォームの場合、**Inter** (Google Fonts、変数) が最も近いオープンソースの同等物です。 `font-feature-settings: "ss03"` のウェイト 600 のインテルは、SF Pro の丸みを帯びた「a」文字に近似します。
- __CODEBCK_726___ を__CODEBCK_727___ ずつディスプレイ サイズを小さくして、Apple のタイトな雰囲気を再現します。 Inter のデフォルトのトラッキングは SF Pro よりもわずかに広く実行されます。
- 本文のテキストについては、Inter を置き換えるときに行の高さを `0.03` で引き締めます (1.47 → 1.44)。Inter の x-height が高くなるほど、行間が少なくなります。
レイアウト
間隔システム
- **基本単位:** 8 ピクセル。サブベース値 (2、4、5、6、7) は、タイポグラフィーを厳密に調整するために使用されます。構造レイアウトは 8/12/16/20/24 にスナップします。
- **トークン:** `` 4px · `` 8px · `` 12px · `` 17px · `` 24px · `` 32px · `` 48px · `` 80px.
- **セクションの垂直パディング:** 商品タイル内の `` (80 ピクセル)。タイルは端から端までギャップ 0 で積み重ねられます (色の変化により切れ目が生じます)。
- **カード パディング:** `` (24 ピクセル) ユーティリティ グリッド カード内。
- **ボタンのパディング:** 縦 8 ～ 11 ピクセル、横 15 ～ 22 ピクセル。
- **ユニバーサル リズム定数:** 17 ピクセルの本文の行の高さの乗数 (~25 ピクセルの行) と 21 ピクセルのキャッチフレーズのサイズが、分析されたすべてのページに表示されます。
グリッドとコンテナ
- **コンテンツの最大幅:** テキストの多いセクション (環境) では ~980 ピクセル、製品グリッド (店舗、アクセサリ) では ~1440 ピクセル、製品タイル (ホームページ) ではフルブリード。
- _**列パターン:** ストア/アクセサリー上の 3 ～ 5 列のユーティリティ カード グリッド。ホームページの時折セクションにある 2 列の並列タイル。製品タイルのヒーローを中心とした単一列のスタック。
- **余白:** ユーティリティ グリッドのカード間の 20 ～ 24 ピクセル。
ホワイトスペースの哲学
Apple の空白部分は製品の台座です。すべてのタイルは、見出しの上に少なくとも 64 ピクセル、下に 48 ～ 64 ピクセルの空気から始まります。製品のレンダリングが混雑することはありません。商品画像に最も近いコンテンツは少なくとも 40 ピクセル離れています。 フッターは、これを破る唯一の領域です。Apple は、完全な情報アーキテクチャが一目でわかるようにするために、意図的に密度を高めています。
標高と深さ
|レベル |治療 | |
を使用します
|---|---|---|
|フラット |影も境界線もありません |フルブリード タイル、グローバル ナビゲーション、フッター、本文セクション |
|柔らかいヘアライン | 1px `rgba(0, 0, 0, 0.08)` 境界線 |ユーティリティ カード、サブナビゲーション曇りガラス セパレーター |
|背景ぼかし | 背景ぼかし`backdrop-filter: blur(N)` 羊皮紙 80% |サブナビと iPhone はフローティング スティッキー バーを購入 |
|製品の影 | `rgba(0, 0, 0, 0.22) 3px 5px 30px 0` |表面上に置かれた製品のレンダリング (システム内の唯一の真の「影」) |
**シャドウの哲学。** Apple は **1 つ**のドロップ シャドウを使用しており、それは製品の写真画像に適用されますが、カード、ボタン、テキストには決して適用されません。 UI の高さは、(a) 表面の色の変化 (明るいタイル ↔ 暗いタイル) と (b) スティッキー バーの背景のぼかしから生じます。単一のシャドウは、UI 階層ではなく、製品に重みを与えるためのものです。
装飾の深さ_
- **環境ページ (写真の眺め) の雰囲気画像** は雰囲気を与えます。 CSS グラデーションは関係ありません。
- **端から端までのタイルの交互配置**により、境界線や影のないリズムが生まれます。色の変化自体が区切りとなります。
- **__CODEBCK_742___ および `` の背景フィルターぼかし**は、装飾的ではなく機能的な「コンテンツ上に浮かぶ」効果を作成します。
図形
境界線の半径スケール
|トークン |値 | |
を使用します
|---|---|---|
| `` | 0ピクセル |フルブリード製品タイル (角の丸みなし) |
| `` | 5ピクセル |微妙なチップとしてスタイル設定された場合のインライン リンク (まれ) |
| `` | 8ピクセル |ダークユーティリティ ボタン (サインイン、バッグ)、インライン カード画像 |
| `` | 11ピクセル |ホワイトパールボタンカプセル |
| `` | 18ピクセル |ストア ユーティリティ カード、アクセサリ グリッド カード |
| `` | 9999ピクセル |主要な青色の錠剤 CTA、サブナビゲーションの購入ボタン、コンフィギュレーター オプション チップ、検索入力 — Apple の特徴的な錠剤 |
| `` | 9999ピクセル / 50% |写真の上に浮かぶ円形の制御チップ |
写真の幾何学
- **ヒーロー画像**: ホームページではフルブリード、21:9 以上。環境ページとショップページでは16:9。製品のレンダリングは写真のようにリアルで、多くの場合、タイルの背景となる色付きの表面で撮影されます。
- **製品のレンダリング**: 透明度のある PNG/WebP。表面タイルの上に置き、システム シャドウを拾います。
- **アクセサリ グリッド**: `` (18 ピクセル) 半径で正方形の 1:1 クロップ、明るい中間色の背景、20 ～ 40 ピクセルの内部パディングで商品を中央に配置。
- **ヒーロー タイルに丸い画像はありません** - 画像は完全な長方形です。 丸め (``、__CODEBCK_753___) はインライン カード画像にのみ表示されます。
- すべてのブレークポイントにわたるレスポンシブ__CODEBCK_754___および__CODEBCK_755___を介した遅延読み込み。 CDN に最適化された WebP.
コンポーネント
トップナビゲーション_
**`global-nav`** — 各ページの上部に固定された永続的な極薄の黒いナビゲーション バー。背景 ``、高さ 44 ピクセル、__CODEBCK_759___ 内のテキスト `` (12 ピクセル / 400 / -0.12 ピクセルの追跡)。リンクは静かで、最大 20 ピクセル間隔で、上部の端から端まで走っています。右揃えクラスター: 検索、バッグのアイコン — 常に表示されます。モバイルでは、約 834 ピクセルでハンバーガーに折りたたまれ、Apple ロゴが中央に表示されます。
_**`sub-nav-frosted`** — グローバル ナビゲーションの下に固定される Surface 固有のナビゲーション。不透明度 80% の背景__CODEBCK_761___、背景フィルターのぼかしにより、曇りガラスの効果が得られます。高さ52ピクセル。左側のコンテンツ:__CODEBCK_762___ (21px / 600) の製品カテゴリ名 (「iPhone」、「ストア」、「アクセサリ」)。コンテンツの権利: `` (14 ピクセル) のインライン ナビゲーション リンク、永続的な `` (「購入」) またはユーティリティ リンクで終わる。
ボタン
**`button-primary`** — Apple の特徴的なアクション。背景 `` (アクション ブルー #0066cc)、__CODEBCK_768___ のテキスト `` (SF Pro Text 17px / 400)、丸みを帯びた `` (完全な錠剤 — カプセル型)、パディング 11px × 22px。丸薬の範囲はブランド アクションのシグナルです。
- アクティブ状態: `` — `transform: scale(0.95)` (システム全体のマイクロインタラクション)。
- フォーカス状態: `` — 2 ピクセルの実線__CODEBCK_773___ アウトライン。
_**`button-secondary-pill`** — 2 つの青い錠剤が一緒に表示される場合の 2 番目の CTA として使用されます (「詳細を見る」/「購入する」)。背景は透明、テキスト__CODEBCK_775___、1ピクセルのソリッド__CODEBCK_776___の境界線、角丸__CODEBCK_777___、パディング11ピクセル×22ピクセル。 「ゴースト ピル」と読みます。
**`button-dark-utility`** — グローバル ナビゲーション アクション (サインイン、バッグ、言語セレクター)。背景 `` (#1d1d1f)、__CODEBCK_781___ のテキスト `` (14px / 400 / -0.224px トラッキング)、丸め `` (8px)、パディング 8px × 15px。 `transform: scale(0.95)`.
を介してアクティブ状態が縮小します
**`button-pearl-capsule`** — 製品カードの 2 番目のボタン。背景 `` (#fafafc)、__CODEBCK_787___ (14px) のテキスト ``、3 ピクセルの実線 `` 境界線 (目に見える線ではなくソフトリングとして機能)、丸みを帯びた `` (11ピクセル)、パディング 8 ピクセル × 14px.
**`button-store-hero`** — ストアのヒーロー サーフェスで使用される、より大きなプライマリ CTA。 `` と同じアクション ブルー + ペーパー ホワイトですが、_`` (18 ピクセル / 300 — まれにウェイト 300 であることに注意) とわずかに多いパディング (14 ピクセル × 28 ピクセル) が含まれています。店舗の踊り場では控えめに使用されます。
_**`button-icon-circular`** — 写真の上に浮かび上がります。 44 × 44ピクセル、背景__CODEBCK_794___、アルファ約64%、アイコンは__CODEBCK_795___、丸みを帯びた__CODEBCK_796___。カルーセル コントロール、閉じるボタン、画像内コントロール (iPhone 購入ページの製品画像サムネイル) に使用されます。
**`text-link`** — `` (アクション ブルー) のインライン本文リンク。コンテキストごとに下線付きまたは下線なし。
**`text-link-on-dark`** — `` の暗いタイル上のインライン ボディ リンク (スカイ リンク ブルー #2997ff) — `` に対してアクション ブルーが消えます。
カードとコンテナ
_**`product-tile-light`** — フルブリード ライト タイル。 背景 `` (白)、テキスト ``、角丸 `` (0 - タイルがエッジに接触)、垂直パディング `` (80ピクセル)。中央スタック: `` (40px / 600) の製品名 → `` (28px / 400) の 1 行のタグライン → 2 つの `` CTA (「詳細を見る」/「購入する」) → システム シャドウとともに表面に表示される製品レンダリング。
**`product-tile-parchment`** — `` と同じですが、__CODEBCK_812___ (#f5f5f7) にあります。 2 つの連続する白いタイルを壊すために使用されます。
_**`product-tile-dark`** — フルブリードの暗いタイル。背景__CODEBCK_814___ (#272729)、テキスト__CODEBCK_815___、角丸__CODEBCK_816___、垂直パディング__CODEBCK_817___ (80ピクセル)。ライト タイルと同じコンテンツ スタックですが、インライン コピー用の `` と `` が使用されます (アクション ブルーは暗いサーフェスでも機能します)。ホームページの商品グリッドで交互のダーク バンドとして使用されます。
**`product-tile-dark-2`** — `` (#2a2a2c) のバリアント。 `` の真上または真下に暗いタイルが配置されている場合に使用され、マイクロステップの明度変更を通じて最もかすかな分離を作成します。
**`product-tile-dark-3`** — `` (#252527) のバリアント。スタックの下部および埋め込みビデオ/プレーヤー フレームで使用されます。
_**`store-utility-card`** — ストア グリッドとアクセサリ グリッドで使用されます。背景__CODEBCK_826___ (白)、1ピクセルのソリッド__CODEBCK_827___の境界線、丸い__CODEBCK_828___ (18ピクセル)、パディング__CODEBCK_829___ (24ピクセル)。上: 製品画像 (__CODEBCK_830___ (8px) の画像半径で 1:1 トリミング)。以下: `` (17px / 600) の製品名、__CODEBCK_832___ (17px / 400) の価格、__CODEBCK_833___ (「購入」または「詳細」)。デフォルトでは影はありません。プロダクト レンダー自体は、システムの product-shadow を運びます。
**`configurator-option-chip`** — iPhone 17 Pro の購入ページで使用される錠剤型のタップ可能なセル。背景__CODEBCK_835___、テキスト__CODEBCK_836___、__CODEBCK_837___、丸め__CODEBCK_838___、パディング12px × 16px。小さな製品のサムネイル + ラベル + 価格デルタが含まれます。 1 行あたり 4 ～ 5 個のオプションがグリッドに配置されます。
_**`configurator-option-chip-selected`** — 選択された状態。境界線は 2 ピクセルの実線 `` にアップグレードされます。同じ形状、同じ内容。
**`environment-quote-card`** — 環境ページに固有の写真キャンバス ヒーロー。 `` を代替色とした暗い写真の背景 (夜明けの山の眺め)、__CODEBCK_843___ (40 ピクセル) の中央に白いテキストの見出し、見出しの上に小さな緑色の「Apple 2030」絵文字ロゴ、下に単一の ``。パディング__CODEBCK_845___ (80ピクセル).
**`floating-sticky-bar`** — スクロール中に iPhone 17 Pro の購入ページのビューポートの下部に表示されます。背景__CODEBCK_847___、不透明度80%、__CODEBCK_848___、高さ64ピクセル、パディング12ピクセル×32ピクセル。左: `` の実行価格合計。右: `` (「バッグに追加」).
入力とフォーム
**`search-input`** — アクセサリの検索入力。背景 ``、__CODEBCK_854___ 内のテキスト `` (17 ピクセル)、1 ピクセルの実線 `rgba(0, 0, 0, 0.08)` 境界線、丸みを帯びた `` (完全な錠剤 — 検索も錠剤の形で、CTA 文法に一致します)、パディング 12 ピクセル × 20 ピクセル、高さ 44 ピクセル。先頭のアイコン: 14 ピクセルの検索グリフ、淡い色合い。
エラーと検証の状態は、分析されたページには表示されませんでした。
フッター
**`footer`** — 背景 `` (#f5f5f7)、テキスト ``。 `` の列をリンクします (17px / 400 / 2.41 行の高さ — リラックスした行送りにより、密な列がスキャン可能になります)。 `` の列見出し (14px / 600)。 `` (12px / 400) の最下部に__CODEBCK_863___ テキストを含む有効な行。垂直パディング 64px.
推奨事項と禁止事項
_実行
- すべてのインタラクティブ要素 (リンク、ピル CTA、フォーカス信号) には `` (アクション ブルー #0066cc) を使用し、それ以外には使用しません。単一のアクセントは交渉の余地がありません。
- 見出しを__CODEBCK_865___または__CODEBCK_866___で負の文字間隔(`-0.28 → -0.374px`)で設定し、特徴的な「Appleタイト」のリズムを取得します。
- 本文コピーを__CODEBCK_868___ (17px / 400 / 1.47 / -0.374px) — 16px ではなく実行します。余分なピクセルによって、ブランドの読書ペースが決まります。
- フルブリードセクションのリズムには、__CODEBCK_869___ (または羊皮紙) と `` を交互に使用します。色の変更は区切り線です。
- __CODEBCK_871___ は、青色のプライマリ CTA および「アクション」として読み取られるその他の要素 (コンフィギュレーター チップ、検索入力、スティッキー バー CTA) 用に予約してください。
- 単一のプロダクト シャドウ (`rgba(0, 0, 0, 0.22) 3px 5px 30px`) を、表面上にあるプロダクト レンダリングにのみ適用します。カード、ボタン、テキストには決して適用しないでください。
- __CODEBCK_873___ をすべてのボタンのアクティブ/押下状態として使用します。これはシステム全体のマイクロインタラクションです。
- グローバル ナビゲーションを維持__CODEBCK_874___ (真の黒) — ほとんどのページで純粋な黒が表示される唯一の場所です。
しないでください
- 2 番目のアクセント カラーを導入しないでください。すべての「クリックしてください」信号は__CODEBCK_875___ (アクション ブルー).
- カード、ボタン、またはテキストに影を追加しないでください。影は製品画像用に予約されています。
- _グラデーションを装飾的な背景として使用しないでください。雰囲気は写真から生まれます。
- ボディ コピーをウェイト 500 に設定しないでください — Apple のラダーは 300 / 400 / 600 / 700 で、500 は意図的に省略されています。本体は常に 400 です。強力なインラインは 600 です。表示は 600.
- フルブリード タイルを丸めないでください。タイルは長方形で端から端まであります。色の変更が区切り線です。
- 本文のコピーでは行の高さを 1.47 未満にしないでください。編集リーダーはブランドの一部です。
- 半径文法を混合しないでください。コンパクト ユーティリティには ``、ユーティリティ カードには ``、錠剤には `` を使用し、その間には何も使用しません (まれな `` パール ボタンを除く)。
- _`` (スカイ リンク ブルー) は明るい表面では使用しないでください。これは暗いタイルのみのバリアントです。 アクション ブルーはライト サーフェス用です。
応答動作
ブレークポイント_
|名前 |幅 |主な変更点 |
|---|---|---|
|小型電話 | ≤ 419 ピクセル |単一列タイル。サブナビゲーションはカテゴリ名 + プライマリ CTA のみに折りたたまれます。ヒーローのタイポグラフィーが 28 ピクセルに低下 |
|電話 | 420–640ピクセル |単一列スタック。製品はタイル幅の 80% にスケールをレンダリングします。ヒーロー h1 が 34 ピクセルに低下します |
|大型電話 | 641–735ピクセル |タイルはより狭いパディングに移行します (垂直方向 48 ピクセル対 80 ピクセル)。細字の折り返し |
|タブレットのポートレート | 写真736–833ピクセル |グローバルナビがハンバーガーに崩れる。サブナビゲーションはカテゴリチップを非表示にし、プライマリ CTA を維持します |
|タブレットの風景 | 834–1023ピクセル |グローバル ナビゲーションは完全に展開された状態で返されます。 3 列のユーティリティ グリッドが 2 列になります |
|小型デスクトップ | 1024–1068ピクセル |製品タイルは、マージン ガター付きの 2/3 幅を使用します。ヒーロー h1 は 40 ピクセルのまま |
|デスクトップ | 1069–1440ピクセル |フルレイアウト。 4 ～ 5 列のストア グリッド。コンテンツ最大 1440 ピクセル |
|ワイドデスクトップ | ≥ 1441 ピクセル |コンテンツは 1440 ピクセルでロックされ、余白は余分な幅を吸収します |
エージェントにとって重要な構造ブレークポイント: 1440px (コンテンツ ロック)、1068px (小型デスクトップ)、833px (タブレット横向き切り替え)、734px (タブレット縦向き)、640px (電話)、480px (小型電話)。
タッチターゲット_
- 最小 44 × 44 ピクセル。 `` は、約 44 × 100 ピクセルで表示されます (錠剤の半径がフルに設定されているため、表示されるヒット エリアはラベルが示すよりも広くなります)。
- `` は正確に 44 × 44 ピクセルです。
- グローバル ナビゲーション ユーティリティ リンクは小さくなっています (~32 × 80 ピクセル)。これらは正確なデスクトップ アクションであるため、意図的により狭いターゲットに配置されており、モバイル ハンバーガーは 833 ピクセル以下でそれらを置き換えます。
戦略の崩壊
- **グローバル ナビゲーション**: デスクトップ上の完全な水平リンク行 → 834 ピクセル以下で Apple ロゴ + ハンバーガー + バッグのアイコンに折りたたまれます。
- **サブナビゲーション**: カテゴリ名 + インライン リンク + プライマリ CTA → カテゴリ名 + プライマリ CTA (モバイルのみ)。インライン リンクはハンバーガー トレイに移動します。
- **商品タイル**: 834 ピクセルで 2 列から 1 列にスタックします。小型スマートフォンでは、垂直方向のパディングが 80 ピクセルから 48 ピクセルに縮小されます。
- **ユーティリティ グリッド** (ストア、アクセサリ): 5 列 → 4 列 (1440 ピクセル) → 3 列 (1068 ピクセル) → 2 列 (834 ピクセル) → 1 列 (640 ピクセル)。
- _**ヒーロー タイポグラフィ**: `` (56 ピクセル) → `` (40 ピクセル) (1068 ピクセル) → 34 ピクセル (640 ピクセル) → 28 ピクセル (419 ピクセル)。
画像の動作
- すべての商品画像は、ブレークポイントに一致するクロップを備えたレスポンシブ__CODEBCK_885___を使用しています。
- ヒーロー写真は、モバイルでアートの方向性を切り替える可能性があります (例: モバイルでは環境ページのビスタ クロップが縦横比を高くし、被写体を異なるフレーミングにします)。
- プロダクト レンダリングは、ブレークポイント全体で 1:1 または 4:3 のアスペクト比を維持します。スケールのみが変更されます。
- 遅延読み込みがデフォルトです。スクロールせずに見える範囲のヒーローは熱心にロードされます。
反復ガイド
1.一度に 1 つのコンポーネントに焦点を当てます。 YAML キーを直接参照します (``、__CODEBCK_887___)。
2. 既存のコンポーネントのバリアント (`-active`、__CODEBCK_889___、__CODEBCK_890___、__CODEBCK_891___) は、__CODEBCK_892___.
の個別のエントリとして存在します。
3.どこでも `` を使用します。16 進数をインライン化しないでください。
4.決してホバーを文書化しないでください。デフォルトおよびアクティブ/押された状態のみ。
5.ディスプレイの見出しは SF Pro Display 600 のままで、負の文字間隔になります。ボディは SF Pro Text 400 の 17px のままです。境界は壊すことができません。
6.単一のドロップ シャドウ (`rgba(0, 0, 0, 0.22) 3px 5px 30px`) は製品写真専用に予約されています。
7。強調について疑問がある場合: クロムを追加する前に、別のサーフェス (明るいタイル→暗いタイル) を選択します。
既知のギャップ
- フォーム検証とエラー状態が分析されたページに表示されませんでした。中立的な検索入力のみが文書化されています。
- ホームページの埋め込みビデオ/プレーヤー フレームは `` を使用しています。内部プレーヤー コントロールは文書化されていません (これらはプラットフォーム ウィジェットであり、Web デザイン トークンではありません)。
- 一部のコンポーネント画像は動的であり (製品のヒーローが回転する)、その特定のコピーはサーフェスごとに異なります。コンポーネントの仕様では、回転するコンテンツではなく構造に名前が付けられます。
- ストアおよびアクセサリのユーティリティ カードに対応するダークモードのカードは、分析されたページには表示されませんでした。文書化されているシステムは、Apple がデフォルトで出荷する日中/光優先のバージョンです。
- 大気中の写真 (環境ページの山の眺め) はコンテンツ資産であり、デザイントークンではありません。文書化された `` は構造面のみを説明しています。
- _`` および `` の正確な背景フィルターのぼかし半径はプラットフォームに依存します。実稼働 CSS は、__CODEBCK_899___ を一般的なベースラインとして使用しますが、値はトークンとして形式化されていません。