# Design Reference - Apple
> Gallery wall at natural light — enormous type casts shadows on a white surface, color enters only as product.

## Source
- Original site: https://www.apple.com/macbook-neo
- Captured: 2026-04-14T16:33:10.799Z

## Tags
- No tags captured

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Ink | `#1d1d1f` | neutral | Primary text, headings, nav labels, icon fills — near-black with just enough warmth to avoid harshness on white |
| Graphite | `#707070` | neutral | Secondary body copy, captions, footnotes, muted nav items |
| Slate | `#474747` | neutral | Tertiary body text, supporting link text, secondary nav |
| Ash | `#333333` | neutral | Icon strokes, mid-weight body text, button labels in ghost state |
| Fog | `#f5f5f7` | neutral | Page canvas background, section divider bands, badge fills |
| Snow | `#ffffff` | neutral | Card surfaces, nav background, elevated container fills |
| Obsidian | `#000000` | neutral | Dark card variant, hero icon fills, maximum-contrast black card |
| Silver Mist | `#e8e8ed` | neutral | Frosted pill button background (country selector), input backgrounds |
| Azure | `#0071e3` | brand | Primary CTA button fill, active nav 'Buy' button — the sole permission-to-act color on the entire page |
| Cobalt Link | `#0066cc` | brand | Inline text links, navigation anchor colors — slightly darker than Azure to distinguish interactive text from interactive buttons |
| Citrus Gradient | `#dddc8c` | accent | MacBook Neo Citrus finish showcase backdrop — dark-to-citrus theatrical product gradient |
| Indigo Gradient | `#2535e2` | accent | MacBook Neo Indigo finish showcase backdrop — dark-to-deep-blue theatrical product gradient |
| Blush Gradient | `#cc29bc` | accent | MacBook Neo Blush finish showcase backdrop — dark-to-magenta-violet theatrical product gradient |
| Citrus Finish | `#dddc8c` | accent | Product color swatch — Citrus finish selector chip |
| Blush Finish | `#e8d0d0` | accent | Product color swatch — Blush finish selector chip |
| Indigo Finish | `#596680` | accent | Product color swatch — Indigo finish selector chip |
| Caution | `#b64400` | semantic | Badge warning text, price asterisk callouts — deep amber-orange for inline semantic alerts |

## Typography
- role: 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.; sizes: 21px, 24px, 28px, 32px, 40px, 56px, 80px, 96px; family: SF Pro Display; weight: 600, 700; lineHeight: 1.04–1.20; substitute: Inter, system-ui; letterSpacing: -0.022em at 96px, -0.019em at 80px, -0.016em at 56px, -0.015em at 40px, -0.005em at 28px, +0.004em at 21px; fontFeatureSettings: "numr"
- role: 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.; sizes: 12px, 14px, 17px, 18px, 20px, 24px, 44px; family: SF Pro Text; weight: 300, 400, 500, 600; lineHeight: 1.24–1.50; substitute: Inter, system-ui; letterSpacing: -0.022em at 44px, -0.010em at 20px, -0.006em at 17px, -0.003em at 14px, -0.003em at 12px; fontFeatureSettings: "numr"

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "cards": "28px",
      "buttons": "999px",
      "navItems": "980px",
      "pillButtons": "999px",
      "featureLinks": "28px",
      "smallButtons": "10px",
      "roundedButtons": "36px"
    },
    "elementGap": "10px",
    "sectionGap": "80-120px",
    "cardPadding": "28px",
    "pageMaxWidth": "1200px"
  },
  "radius": {
    "cards": "28px",
    "buttons": "999px",
    "navItems": "980px",
    "pillButtons": "999px",
    "featureLinks": "28px",
    "smallButtons": "10px",
    "roundedButtons": "36px"
  }
}
```

## Component Patterns
- name: Primary Buy Button; role: Sole conversion CTA across page and sticky nav
- name: Ghost Text Button; role: Section 'Learn more' links styled as buttons
- name: Rounded Ghost Button; role: Feature navigation tabs (Calls and Texts, Handoff, iPhone Mirroring, AirDrop)
- name: Frosted Pill Selector; role: Country/region selector and segmented control overlays
- name: Dark Pill Button; role: Hero section 'Buy' CTA on dark product backdrops
- name: White Feature Card; role: Primary content card for feature showcases
- name: Fog Feature Card; role: Alternate feature card on white backgrounds
- name: Dark Feature Card; role: High-contrast product detail card
- name: Global Navigation Bar; role: Persistent top nav with product categories
- name: Sticky Product Sub-Nav; role: Page-section navigator (Overview, Tech Specs, Compare, Switch from PC to Mac)
- name: Product Color Swatch Chip; role: Finish selector for Silver, Blush, Citrus, Indigo
- name: New Badge; role: Product 'New' label in nav and product cards
- name: Carousel Pagination Dot; role: Slide indicator in feature carousels

## Do
- Use 28px border-radius for all feature cards (#ffffff and #f5f5f7 backgrounds) — this exact value is the page's geometric signature.
- Reserve #0071e3 exclusively for the primary 'Buy' CTA button. No other UI element uses this blue — its scarcity makes it the only color that reads as an imperative.
- Apply negative letter-spacing scaled to font size: -2.11px at 96px display, -0.9px at 56px heading-lg, -0.1px at 17px body. Positive or zero tracking at display sizes breaks the chiseled headline aesthetic.
- Use #f5f5f7 as page canvas and #ffffff as card surface. Never reverse this — cards must always be lighter than their parent background.
- Set SF Pro Display weight 700 for all primary product headlines at 56px and above. Weight 600 is for supporting headers (24-40px), never for hero text.
- Use rgba(210,210,215,0.64) with backdrop-filter blur(20px) for any temporary overlay controls (country selectors, segmented pickers) — this is the frosted-glass layer distinct from all opaque surfaces.
- Product finish gradients (Citrus, Indigo, Blush) are used only as full-bleed section backdrops for that finish's showcase. Never use them as UI chrome, card backgrounds, or button fills.

## Don't
- Do not add box-shadow to any card or container. The entire elevation system is color-value-only — shadows break the flat-lit gallery effect.
- Do not use #0066cc (Cobalt Link) for button backgrounds. It is an inline text link color only — using it on filled buttons conflicts with the #0071e3 CTA hierarchy.
- Do not use font weight 300 for headlines below 40px — below that threshold, weight 300 loses definition against the white/fog background.
- Do not place two rounded-pill buttons side by side in the same visual zone. The 999px radius is rationed to one CTA per section to prevent diffusion of focus.
- Do not use the product finish colors (#dddc8c Citrus, #e8d0d0 Blush, #596680 Indigo) as semantic or UI accent colors — they exist only as product identity swatches and gradient source colors.
- Do not use positive letter-spacing on SF Pro Display at sizes above 28px. The +0.007em–+0.011em values from the data appear only at small display sizes (21px); at headline scale positive tracking is tonally inconsistent.
- Do not center-align body paragraphs longer than 2 lines. Apple's body copy left-aligns in two-column feature layouts; centered text is reserved for single-line hero subheadings and price callouts.