Apple

---
version: alpha
name: "Apple.com WWDC26 Dark Hero"
description: "Typography baseline relies on SF Pro Text for primary body copy, nav flyout content, hero subtitle text."
colors:
  apple-cta-blue: "#0071e3"
  apple-surface-gray: "#f5f5f7"
  pure-black: "#000000"
  apple-blue: "#2997ff"
  apple-link-blue: "#0066cc"
  apple-mid-gray: "#86868b"
  apple-near-black: "#1d1d1f"
  apple-white: "#ffffff"
  apple-light-gray: "#e8e8ed"
typography:
  body-ui-default:
    fontFamily: "SF Pro Text"
    fontSize: "17px"
    fontWeight: "400"
    lineHeight: "25px"
    letterSpacing: "-0.374px"
  nav-label-badge:
    fontFamily: "SF Pro Text"
    fontSize: "12px"
    fontWeight: "600"
    lineHeight: "16px"
    letterSpacing: "-0.12px"
  small-caption:
    fontFamily: "SF Pro Text"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "16px"
    letterSpacing: "-0.12px"
  section-heading:
    fontFamily: "SF Pro Display"
    fontSize: "24px"
    fontWeight: "600"
    lineHeight: "28px"
    letterSpacing: "0.216px"
  hero-title:
    fontFamily: "SF Pro Text"
    fontSize: "44px"
    fontWeight: "400"
    lineHeight: "44px"
    letterSpacing: "-0.12px"
  large-display-heading:
    fontFamily: "SF Pro Display"
    fontSize: "40px"
    fontWeight: "600"
    lineHeight: "44px"
  xl-display-heading:
    fontFamily: "SF Pro Display"
    fontSize: "56px"
    fontWeight: "600"
    lineHeight: "60px"
    letterSpacing: "-0.28px"
  body-small:
    fontFamily: "SF Pro Text"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "18px"
    letterSpacing: "-0.224px"
  subheading-display:
    fontFamily: "SF Pro Display"
    fontSize: "21px"
    fontWeight: "400"
    lineHeight: "25px"
    letterSpacing: "0.231px"
rounded:
  radius-pill: "980px"
  radius-small: "5px"
  radius-medium: "8px"
  radius-full: "999px"
spacing:
  spacing-2: "2px"
  spacing-4: "4px"
  spacing-6: "6px"
  spacing-7: "7px"
  spacing-8: "8px"
  spacing-9: "9px"
  spacing-10: "10px"
  spacing-11: "11px"
  spacing-12: "12px"
  spacing-15: "15px"
  spacing-19: "19px"
  spacing-20: "20px"
  spacing-21: "21px"
  spacing-22: "22px"
  spacing-40: "40px"
  spacing-44: "44px"
---

## Overview

Typography baseline relies on SF Pro Text for primary body copy, nav flyout content, hero subtitle text.

This system uses a 11px base grid with scale values 2, 4, 6, 7, 8, 9, 10, 11, 12, 15, 19, 20, 21, 22, 40, 44, 48, 84, 128.

**Signature traits:**
- Core token rhythm: Token evidence indicates consistent color, spacing, and radius rhythm across visible UI.

## Colors

The palette uses 9 validated color tokens across 1 theme profile. Semantic roles stay attached to observed usage so generation agents can choose accents without inventing new color meaning.

**Semantic naming:**
- **action-text** maps to `apple-near-black`: Role "text" is grounded by usage context "Primary body text, headings, nav link text across all zones".
- **surface-background** maps to `pure-black`: Role "background" is grounded by usage context "Hero section background, global nav badge background, full-bleed dark sections".
- **surface-border** maps to `apple-light-gray`: Role "border" is grounded by usage context "Nav curtain background, dividers, quaternary fill surfaces".
- **action-background** maps to `apple-cta-blue`: Role "background" is grounded by usage context "Primary CTA button background (Add to calendar), focus ring color".

### Text Scale
- **Apple Blue** (#2997ff): Link color in footer and hero zones, secondary interactive text. Role: text. {authored: rgb(41, 151, 255), space: rgb}
- **Apple Link Blue** (#0066cc): Body link color, footer shop links, blocklink color. Role: text. {authored: rgb(0, 102, 204), space: rgb}
- **Apple Mid Gray** (#86868b): Secondary/tertiary text, search result section headers, caption text. Role: text. {authored: rgb(134, 134, 139), space: rgb}
- **Apple Near-Black** (#1d1d1f): Primary body text, headings, nav link text across all zones. Role: text. {authored: rgb(29, 29, 31), space: rgb, alpha: 0.8}
- **Apple White** (#ffffff): Button label text on dark backgrounds, nav badge text, hero overlay text. Role: text. {authored: rgb(255, 255, 255), space: rgb, alpha: 0.8}

### Interactive
- **Apple Light Gray** (#e8e8ed): Nav curtain background, dividers, quaternary fill surfaces. Role: border. {authored: rgb(232, 232, 237), space: rgb}

### Surface & Shadows
- **Apple CTA Blue** (#0071e3): Primary CTA button background (Add to calendar), focus ring color. Role: background. {authored: rgb(0, 113, 227), space: rgb}
- **Apple Surface Gray** (#f5f5f7): Footer background, buy strip background, search hover state background. Role: background. {authored: rgb(245, 245, 247), space: rgb}
- **Pure Black** (#000000): Hero section background, global nav badge background, full-bleed dark sections. Role: background. {authored: rgb(0, 0, 0), space: rgb, alpha: 0.4}

## Typography

Typography uses SF Pro Text, SF Pro Display across extracted hierarchy roles. Keep hierarchy mapped to these token rows before adding decorative type styles.

Mixes SF Pro Text and SF Pro Display for visual contrast. Weight range spans regular, semi-bold. Sizes range from 12px to 56px.

### Font Roles
- **Headline Font**: SF Pro Text
- **Body Font**: SF Pro Text

### Type Scale Evidence
| Role | Font | Size | Weight | Line Height | Letter Spacing | Stack / Features | Notes |
|------|------|------|--------|-------------|----------------|------------------|-------|
| Primary body copy, nav flyout content, hero subtitle text | SF Pro Text | 17px | 400 | 25px | -0.374px | SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Global nav item labels, badges, small UI labels | SF Pro Text | 12px | 600 | 16px | -0.12px | SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Footer captions, secondary small text | SF Pro Text | 12px | 400 | 16px | -0.12px | SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Product section headings, card titles | SF Pro Display | 24px | 600 | 28px | 0.216px | SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Large hero display text (e.g. WDC26 event title) | SF Pro Text | 44px | 400 | 44px | -0.12px | SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Major product launch headings | SF Pro Display | 40px | 600 | 44px | normal | SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Largest hero/campaign headings | SF Pro Display | 56px | 600 | 60px | -0.28px | SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Fine print, footnotes, supplemental body text | SF Pro Text | 14px | 400 | 18px | -0.224px | SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Product sub-headings, feature callouts | SF Pro Display | 21px | 400 | 25px | 0.231px | SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |

## Layout

Responsive system uses 4 breakpoint tier(s): mobile, tablet, desktop, wide.

### Responsive Strategy
- **mobile (<= 1068px)**: Constrain layout for small viewports and prioritize vertical stacking.
- **tablet (641-1069px)**: Increase spacing and column structure for medium-width viewports.
- **desktop (1069-1440px)**: Expand layout density and horizontal composition for wide viewports.
- **wide (>= 1441px)**: Stretch composition with generous gutters and wider layout spans.

### Spacing System
| Token | Value | Px | Notes |
|------|-------|----|-------|
| spacing-2 | 2px | 2 | Extracted spacing token |
| spacing-4 | 4px | 4 | Extracted spacing token |
| spacing-6 | 6px | 6 | Extracted spacing token |
| spacing-7 | 7px | 7 | Extracted spacing token |
| spacing-8 | 8px | 8 | Extracted spacing token |
| spacing-9 | 9px | 9 | Mapped to --sk-button-padding-vertical |
| spacing-10 | 10px | 10 | Extracted spacing token |
| spacing-11 | 11px | 11 | Extracted spacing token |
| spacing-12 | 12px | 12 | Extracted spacing token |
| spacing-15 | 15px | 15 | Extracted spacing token |
| spacing-19 | 19px | 19 | Extracted spacing token |
| spacing-20 | 20px | 20 | Extracted spacing token |
| spacing-21 | 21px | 21 | Extracted spacing token |
| spacing-22 | 22px | 22 | Extracted spacing token |
| spacing-40 | 40px | 40 | Extracted spacing token |
| spacing-44 | 44px | 44 | Extracted spacing token |
| spacing-48 | 48px | 48 | Extracted spacing token |
| spacing-84 | 84px | 84 | Extracted spacing token |
| spacing-128 | 128px | 128 | Extracted spacing token |

## Elevation & Depth

Keep depth flat unless validated shadow or interaction evidence appears in the extraction payload. Do not invent shadows beyond this evidence boundary.

### Shadow Evidence
| Shadow Token | Layers | Details |
|--------------|--------|---------|
| shadow-card-float | 1 | 3px 5px 30px 0px rgba(0, 0, 0, 0.22) |

### Interaction Signals
| Theme | Signal | Evidence |
|-------|--------|----------|
| Light | backdrop-filter | blur(20px) ; saturate(1.8) blur(20px) |
| Light | outline-color | rgb(29, 29, 31) ; rgb(232, 232, 237) ; rgb(41, 151, 255) |
| Light | outline-width | 3px |
| Light | outline-offset | 0px ; -7px |
| Light | transform | matrix(1, 0, 0, 1, 0, -4) ; matrix(1, 0, 0, 1, 0, 0) ; matrix(1, 0, 0, 1, -631, 0) |

## Shapes

Shape language maps directly to rounded tokens. Keep component corners consistent with the role mapping below before introducing bespoke geometry.

### Radius Roles
| Token | Value | Px | Role Mapping |
|------|-------|----|--------------|
| radius-small | 5px | 5 | Subtle corner |
| radius-medium | 8px | 8 | Control corner |
| radius-pill | 980px | 980 | Large surface corner |
| radius-full | 999px | 999 | Large surface corner |

### Geometry Evidence
| Radius Token | Shape | Units |
|--------------|-------|-------|
| radius-pill | 980px | px |
| radius-small | 5px | px |
| radius-medium | 8px | px |
| radius-full | 999px | px |

## Components

(none detected)

## Do's and Don'ts

Guardrails protect Core token rhythm without adding unsupported visual claims.

| Do | Don't |
|----|---------|
| Do maintain consistent spacing using the base grid | Don't make unsupported claims about absent visual features |
| Do maintain WCAG AA contrast ratios (4.5:1 for normal text) | Don't mix rounded and sharp corners in the same view |
| Do use the primary color only for the single most important action per screen |  |
| Do verify evidence before writing new design-system guidance |  |

## Responsive Evidence

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <= 480px | (max-width: 480px) |
| Mobile | <= 640px | (max-width: 640px) |
| Mobile | <= 734px | (max-width: 734px) |
| Breakpoint 4 | <= 833px | (max-width: 833px) |
| Breakpoint 5 | <= 1023px | (max-width: 1023px) |
| Breakpoint 6 | <= 1044px | (max-width: 1044px) |
| Breakpoint 7 | <= 1068px | (max-width: 1068px) |
| Mobile | 641-833px | (min-width: 641px) and (max-width: 833px) |
| Mobile | 735-1068px | (min-width: 735px) and (max-width: 1068px) |
| Mobile | >= 735px | (min-width: 735px) |
| Mobile | 736-1069px | (min-width: 736px) and (max-width: 1069px) and (min-height: 734px) |
| Tablet | 834-833px | (min-width: 834px) and (max-width: 833px) |
| Tablet | 834-1023px | (min-width: 834px) and (max-width: 1023px) |
| Tablet | >= 834px | (min-width: 834px) |
| Desktop | >= 1069px | (min-width: 1069px) |
| Desktop | 1070-1440px | (min-width: 1070px) and (max-width: 1440px) and (min-height: 776px) |
| Desktop | >= 1070px | (min-width: 1070px) and (min-height: 776px) |
| Desktop | >= 1441px | (min-width: 1441px) |
| Breakpoint 19 | Unknown | (hover: hover) |

## Agent Prompt Guide

### Example Component Prompts
- Create button component using validated primary color role and spacing tokens.
- Create card component with mapped radius role and evidence-backed elevation.
- Create form input component using inferred typography hierarchy and border roles.

### Iteration Guide
1. Start with extracted palette and typography roles only.
2. Map spacing and radius directly from token tables before visual polish.
3. Apply component patterns one section at a time and compare against source intent.
4. Keep elevation claims tied to explicit evidence in output.
5. Iterate with smallest diffs and re-check section hierarchy after each change.