Apple

# Apple — MacBook Neo — Style Reference
> Gallery wall at natural light — enormous type casts shadows on a white surface, color enters only as product.
Theme: light

Apple's MacBook Neo product page radiates cool luminosity — a gallery-white canvas where enormous weight-700 headlines at 80-96px dominate above feather-light body copy, creating a tension between mass and air. The page background stays #f5f5f7, one step off pure white, giving cards and content wells a surface-lift effect without any shadows. Negative letter-spacing tightens progressively with size — display headlines track at -0.022em while body text breathes at -0.003em, a signature move that makes large type feel chiseled rather than loose. The single interactive accent (#0071e3 CTA blue) appears only on the 'Buy' pill button and nav links, rationed so every appearance reads as an instruction to act. Product gradients — dark-to-citrus-green, dark-to-blue, dark-to-violet — serve as full-bleed theatrical backdrops for each color finish showcase, never decorating UI chrome.

## Colors
| Name | Value | Role |
|------|-------|------|
| Azure | `#0071e3` | Primary CTA button fill, active nav 'Buy' button — the sole permission-to-act color on the entire page |
| Cobalt Link | `#0066cc` | Inline text links, navigation anchor colors — slightly darker than Azure to distinguish interactive text from interactive buttons |
| Citrus Gradient | `linear-gradient(184deg, rgb(29, 29, 31) 0%, rgb(223, 231, 79) 33%, rgb(94, 156, 42) 66%, rgb(10, 134, 26) 95%)` | MacBook Neo Citrus finish showcase backdrop — dark-to-citrus theatrical product gradient |
| Indigo Gradient | `linear-gradient(184deg, rgb(29, 29, 31) 20%, rgb(168, 211, 251) 43%, rgb(0, 18, 249) 76%, rgb(37, 53, 224) 95%)` | MacBook Neo Indigo finish showcase backdrop — dark-to-deep-blue theatrical product gradient |
| Blush Gradient | `linear-gradient(184deg, rgb(29, 29, 31) 20%, rgb(243, 196, 246) 43%, rgb(245, 0, 180) 76%, rgb(204, 41, 188) 95%)` | MacBook Neo Blush finish showcase backdrop — dark-to-magenta-violet theatrical product gradient |
| Citrus Finish | `#dddc8c` | Product color swatch — Citrus finish selector chip |
| Blush Finish | `#e8d0d0` | Product color swatch — Blush finish selector chip |
| Indigo Finish | `#596680` | Product color swatch — Indigo finish selector chip |
| Obsidian | `#000000` | Dark card variant, hero icon fills, maximum-contrast black card |
| Ink | `#1d1d1f` | Primary text, headings, nav labels, icon fills — near-black with just enough warmth to avoid harshness on white |
| Ash | `#333333` | Icon strokes, mid-weight body text, button labels in ghost state |
| Slate | `#474747` | Tertiary body text, supporting link text, secondary nav |
| Graphite | `#707070` | Secondary body copy, captions, footnotes, muted nav items |
| Silver Mist | `#e8e8ed` | Frosted pill button background (country selector), input backgrounds |
| Fog | `#f5f5f7` | Page canvas background, section divider bands, badge fills |
| Snow | `#ffffff` | Card surfaces, nav background, elevated container fills |
| Caution | `#b64400` | Badge warning text, price asterisk callouts — deep amber-orange for inline semantic alerts |

## Typography
| Family | Role |
|--------|------|
| SF Pro Display | All marketing headlines, product name lockups, section titles. Weight 700 at 80-96px is the page's defining visual move — these headlines are 2-4 words at near-poster scale, taking up half the viewport before any product image appears. Negative tracking at display sizes (-0.022em at largest) tightens letterforms into a single typographic mass. |
| SF Pro Text | Body copy, nav labels, captions, button labels, footnotes. Weight 400 at 17px is the default body size. Weight 300 appears at larger marketing sizes (20-24px) for subheadings that should feel lighter than headlines. Weight 600 for emphasis labels. The -0.003em tracking at body sizes is subtle but keeps dense paragraphs from sprawling. |