# Apple Premium
순백 배경 위 대형 제품 사진과 SF Pro 시스템 타이포 — 여백과 정밀함으로 프리미엄을 말하는 제품 마케팅 스타일.
- taxonomy: corporate-clean · premium-marketing, product-hero, system-typography, monochrome-plus-blue, pill-buttons, airy · complexity=medium
- page types: landing, marketing, ecommerce
- best for: 프리미엄 제품·하드웨어 랜딩, 제품 사진이 주인공인 마케팅 페이지, 고급 소비자 브랜드 히어로
- avoid for: 데이터 밀도 높은 대시보드, 장난스러운 컬러풀 앱, 제품 사진이 없는 텍스트 전용 사이트
- provenance: website (Apple) — confidence: colors_measured=computed-css, color_roles=vision-inferred, typography=computed-css, radius=computed-css, taxonomy=vision-inferred, motion=vision-inferred, layout=vision-inferred, dark=vision-inferred
## Design rules
# 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).
## Tokens (theme.css — use these values verbatim, do not re-derive)
```css
/* Apple Premium — theme.css (generated, do not edit) */
:root {
--radius: 18px;
--radius-selector: 980px;
--radius-field: 8px;
--font-sans: "SF Pro Text", "SF Pro Display", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display: "SF Pro Display", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
--spacing: 8px;
--shadow: 0px 4px 12px 0px color-mix(in oklab, oklch(0.232 0.004 286.1) 8%, transparent);
--ks-display-weight: 600;
--ks-display-tracking: -0.015em;
--background: oklch(1.000 0.000 0);
--foreground: oklch(0.232 0.004 286.1);
--card: oklch(1.000 0.000 0);
--card-foreground: oklch(0.232 0.004 286.1);
--popover: oklch(1.000 0.000 0);
--popover-foreground: oklch(0.232 0.004 286.1);
--primary: oklch(0.522 0.177 255.8);
--primary-foreground: oklch(1.000 0.000 0);
--secondary: oklch(0.971 0.003 286.4);
--secondary-foreground: oklch(0.232 0.004 286.1);
--muted: oklch(0.971 0.003 286.4);
--muted-foreground: oklch(0.540 0.008 286.1);
--accent: oklch(0.669 0.181 251.8);
--accent-foreground: oklch(1.000 0.000 0);
--destructive: oklch(0.577 0.221 27.3);
--destructive-foreground: oklch(1.000 0.000 0);
--border: oklch(0.900 0.003 286.4);
--input: oklch(0.900 0.003 286.4);
--ring: oklch(0.522 0.177 255.8);
--chart-1: oklch(0.522 0.177 255.8);
--chart-2: oklch(0.669 0.181 251.8);
--chart-3: oklch(0.540 0.008 286.1);
--chart-4: oklch(0.815 0.078 252.9);
--chart-5: oklch(0.322 0.005 286.1);
}
.dark {
--background: oklch(0.000 0.000 0);
--foreground: oklch(0.971 0.003 286.4);
--card: oklch(0.232 0.004 286.1);
--card-foreground: oklch(0.971 0.003 286.4);
--popover: oklch(0.232 0.004 286.1);
--popover-foreground: oklch(0.971 0.003 286.4);
--primary: oklch(0.669 0.181 251.8);
--primary-foreground: oklch(1.000 0.000 0);
--secondary: oklch(0.232 0.004 286.1);
--secondary-foreground: oklch(0.971 0.003 286.4);
--muted: oklch(0.232 0.004 286.1);
--muted-foreground: oklch(0.600 0.006 286.1);
--accent: oklch(0.669 0.181 251.8);
--accent-foreground: oklch(1.000 0.000 0);
--destructive: oklch(0.628 0.210 27.3);
--destructive-foreground: oklch(1.000 0.000 0);
--border: oklch(0.300 0.004 286.1);
--input: oklch(0.300 0.004 286.1);
--ring: oklch(0.669 0.181 251.8);
--chart-1: oklch(0.669 0.181 251.8);
--chart-2: oklch(0.815 0.078 252.9);
--chart-3: oklch(0.600 0.006 286.1);
--chart-4: oklch(0.522 0.177 255.8);
--chart-5: oklch(0.724 0.150 55.0);
}
```
## Golden example (exemplar.html — match this structure and token usage)
```html
```
## Apply
- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/apple.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `