# Apple Premium

## Overview
The refined premium anchor of the library: Apple.com product marketing. Pure white (or pure black) canvases, near-black system type, and huge crisp product photography that carries all the depth. Color is almost absent — a single restrained blue for links and CTAs. Hierarchy comes from scale, centering, and generous whitespace, not decoration. When a section needs weight, it gets a bigger photo and more space, not more color.

## Colors & Roles
Monochrome neutral foundation (hue ~286): `background` pure white, `foreground` near-black `#1d1d1f`. Surfaces separate by a faint tonal step — light cards sit on `#f5f5f7` (`secondary`/`muted`), dark tiles go full black. The one chromatic voice is blue: `primary` is Apple's filled-CTA blue `#0066cc` (white text), `accent` is the brighter link blue `#2997ff`, and `ring` follows the primary blue. Secondary text is `#6e6e73`. There is no on-page red — `destructive` is a conventional red kept for completeness. Use the blue sparingly: CTAs, links, focus — never as a decorative fill.

## Typography Rules
SF Pro — Apple's system font (Display for headings, Text for body). Headings are 600 semibold; body is 400 at ~17px with a distinctly negative letter-spacing (−0.022em) that reproduces the SF Pro rhythm. Display headlines are large and tracking-tight (`clamp(2.5rem, 6vw, 3.5rem)`, −0.015em). Weights observed: 300/400/600/700. The Google-Fonts fallback, Inter, is a **system-substitute** for reproduction where SF Pro is unavailable — closest match for grid and tracking, not an exact clone.

## Layout Principles
Narrow content column (~1024px) that is mostly centered. Heroes are single-column and centered: headline, one-line subhead, a CTA pair. Below the fold, product stories alternate between light (`background`/`secondary`) and full-black tiles, often two-up. Whitespace dominates — the hero is more than half empty space, and text blocks stay short.

## Depth & Elevation
Effectively flat. No gradients or noise. Depth is supplied by the product photography itself, not by shadows. The only real elevation is the translucent blurred top nav; floating cards/dropdowns get a minimal soft shadow. Otherwise separation is background steps and hairlines.

## Shapes
Buttons are pills (`border-radius: 980px`). Cards are softly rounded (~18px), inputs mildly rounded (~8px). Corners are gentle and hardware-like, never sharp-brutalist and never fully square.

## Component Stylings
- **Button**: pill (radius 980px). Primary = filled blue with white text, ~17px/400, padding ~8px 16px. Secondary = transparent with a blue border and blue text. Text variant = a bare blue link with a chevron ("Learn more ›"). Hover lightens the fill; focus draws a blue ring.
- **Card**: radius ~18px, near-shadowless. Light cards on `#f5f5f7`; dark tiles full black with white text. Product image is the hero of the card.
- **Input**: radius ~8px, faint neutral border, blue focus ring.
- **Nav**: thin translucent (blurred) top bar — logo, short category links, search and bag icons, centered and understated.

## Motion
Precise and smooth. Scroll-in fades (`opacity` + `translateY(16px)`), image scale/pin-scroll for product reveals. Emphasis easing is a refined decelerate; avoid heavy bounce or spring. The feeling is engineered, not playful.

## Do's and Don'ts
**Do:** center the hero (headline + one-line subhead + CTA pair); restrict color to neutrals plus one blue; let large product photos and whitespace carry weight; alternate light and black sections; tighten body letter-spacing.
**Don't:** introduce other saturated colors or gradients; square off the buttons; overuse shadows or glass (nav blur aside); crowd the layout with dense text or data; let decorative icons steal the product photo's role.

## Responsive Behavior
Centered single-column heroes scale gracefully; two-up product tiles stack to one column on mobile. Display type scales via `clamp()`. The nav collapses category links into a compact menu while keeping logo, search, and bag.

## Agent Prompt Guide
> Build this in the 'Apple Premium' style: pure white (or pure black) background with near-black text in an SF Pro system font stack (Inter fallback), a centered hero of a big semibold headline + one-line subhead + a pair of CTAs (a filled blue pill and an outline/text blue link), one restrained blue accent (#0066cc filled, #2997ff links) and no other saturated color, large crisp product photography carrying the depth, pill buttons (border-radius 980px), generous whitespace, slightly negative body letter-spacing, and alternating light/black full-bleed product sections.

## Known Gaps / Confidence
Colors, typography, and radii are measured from the live site (`computed-css`). Color **role** assignment is `vision-inferred` from the screenshots (which blue is primary vs. accent). `border` is not a strongly measured value — Apple's dividers are a very light neutral not cleanly isolated by the walk, so it is interpolated within the measured neutral ramp (`#f5f5f7`↔`#6e6e73`) and marked `vision-inferred`. The `dark` set is grounded in the page's genuine full-black (`#000`) product sections, not a synthesized inversion, but its raised/muted steps are authored (`vision-inferred`). SF Pro is Apple's proprietary system font; Inter is the practical Google-Fonts substitute. The extracted hero H1 sample came back undefined, so the display scale is authored from the measured size set (56/44/40/28/24/21/17px).