apple.com Sample

# Design Thinking

Before coding, understand the context and define a bold aesthetic direction:
- **Purpose**: What problem does this interface solve? Who is using it?
- **Style**: Choose an extreme style: minimalism, maximalism, retro-futurism, organic/natural, luxury/artisanal, playful/toy-like, magazine/editorial, raw/rough, art deco/geometric, soft pastel, industrial/practical, etc. There are many styles to choose from. You can draw inspiration from them, but ensure your design truly aligns with the selected aesthetic direction.
- **Constraints**: Technical requirements (frameworks, performance, accessibility).
- **Differentiation**: What makes it memorable? What one thing will people remember?
**Key**: Choose a clear conceptual direction and execute it precisely. Both bold maximalism and refined minimalism are viable — the key is intention, not intensity.
## Aesthetic Default Settings
- Start with composition, not components.
- Prioritize full-bleed hero images or full-canvas visual anchors.
- Make the brand or product name the most prominent text.
- Keep copy concise for quick scanning.
- Use white space, alignment, scaling, cropping, and contrast before adding borders.
- Default constraint system: no more than two fonts and one accent color.

# Overall Atmosphere
## Design System
### 1. Core Style
Ultra-clean developer documentation aesthetic with precise Swiss typography, expansive whitespace, and modular resource grids. The interface prioritizes scannability and trust through generous breathing room, strict alignment grids, and subdued chromatic restraint.

### 2. Color Palette
- **Backgrounds**: Pure white (#FFFFFF) alternating with subtle cool gray (approx #F5F5F7) for section differentiation
- **Text**: Near-black primary (approx #1D1D1F), secondary gray (approx #86868B) for metadata
- **Accents**: System blue for interactive elements and external links
- **Surface overlays**: Light translucent scrims on navigation bars

### 3. Font Stack
San Francisco system font family (SF Pro) with optical sizing. Heavy use of semibold (600) for headings, regular (400) for body, and tight tracking on large display text. Monospace accents for technical annotations.

### 4. Texture
Flat, matte surfaces with no drop shadows on content cards. Subtle 1px hairline borders (#D2D2D7) to delineate sections. Crisp, Retina-optimized iconography with 2px strokes.

### 5. Motion Design
Subtle scroll-triggered fade-ins. Sticky navigation with backdrop-filter blur on scroll. Smooth easing on hover states for download links (transform: translateX on arrows).

## Component Guidelines
### Button / Card / Navigation / Input / Typography
- **Buttons**: Text-only links with chevron/right-arrow icons; no filled buttons in content areas
- **Cards**: Resource tiles with large thumbnail images (16:9 or 4:3), minimal padding, grouped link lists below
- **Navigation**: Dual-layer system—global dark nav (translucent black) + local white nav with bottom border; sticky behavior with background blur
- **Typography**: Large display headings (40-48px) with tight line height (1.1), section headers in bold (24-28px), body copy in gray with comfortable line height (1.5)

## Distinctive Element Few-shot Examples

### 1. Hero with Chapter Navigation
**Purpose:**
Primary page header establishing context and providing rapid anchor navigation to platform-specific resources via iconographic wayfinding.

**Evidence:**
- DOM shows `header.section.section-header` containing main title "Apple Design Resources" followed by `nav.chapternav` with platform icons (iOS, macOS, tvOS, etc.)
- Screenshot 1 displays centered typography with horizontal row of platform icons (iPhone, Mac, TV, Watch, Vision Pro, etc.) beneath description text
- Text content: "Design apps accurately and quickly using official Apple design templates..."

**Visual Rules:**
- Layout: Centered text alignment, max-width container (~980px), generous top padding (80-100px)
- Color: Pure white background, black text, blue accent links
- Typography: Large bold headline (48px), medium gray subhead (21px, max-width 680px centered)
- Spacing: 24px between title and subtitle, 40px between subtitle and chapter nav icons
- Radius / border / shadow: None on text area; chapter nav icons are 48-64px square with 12px border-radius
- Motion: Chapter icons have subtle scale on hover (1.05), localnav becomes sticky with blur backdrop on scroll

**Recreation Prompt:**
> Create a centered hero section with a large bold headline "Apple Design Resources" and a gray subheadline paragraph. Below the text, add a horizontal scrollable navigation bar with 8 platform icons (iPhone, Mac, Apple TV, Watch, Vision Pro, gear icon for Technologies, "Aa" for Fonts, tools icon, bezel icon). Each icon should be 60px square with rounded corners, grayscale by default, black on hover. Use clean white background with ample padding top and bottom. Include a sticky secondary navigation bar above the hero with breadcrumb "Design" on left and menu items (Overview, What's New, etc.) on right.

**Structure Sketch:**
```html
<header class="section-header">
  <h1>Apple Design Resources</h1>
  <p class="subtitle">Design apps accurately and quickly...</p>
  <nav class="chapternav">
    <a href="#ios-apps"><img src="ios-icon.svg" alt="iOS & iPadOS"/><span>iOS & iPadOS</span></a>
    <a href="#macos-apps"><img src="macos-icon.svg" alt="macOS"/><span>macOS</span></a>
    <!-- ... additional platform links -->
  </nav>
</header>
```

### 2. Resource Download Card Grid
**Purpose:**
Modular content containers for downloadable assets, grouping preview thumbnails with hierarchical metadata and multi-format download options.

**Evidence:**
- DOM shows multiple `section.section-download` elements containing grids with headings like "iOS 26 and iPadOS 26" and resource titles "UI Kit", "App Icon Template"
- Screenshot 1 shows two-column layout with device mockup images on left and icon template on right
- Screenshot 2 shows visionOS section with dark immersive UI thumbnails
- Each card contains: thumbnail image, resource name (h5), and format links (Figma, Sketch, Photoshop) with external-link arrows

**Visual Rules:**
- Layout: CSS Grid with 2-3 columns, gap 24-32px; alternates white and light gray backgrounds per section (`bg-light` class)
- Color: White or light gray backgrounds; thumbnails have subtle rounded corners (18-20px radius)
- Typography: Section headers (h2) are 32px bold; resource subheaders (h4) are 24px; individual resource titles (h5) are 17px semibold
- Spacing: Section padding 80px vertical, 48px horizontal; internal card padding minimal (12-16px)
- Radius / border / shadow: Thumbnails have 18px border-radius, no shadow; cards have no border
- Motion: Hover on thumbnail scales 1.02; download links show arrow translate-x on hover

**Recreation Prompt:**
> Create a two-column grid of resource cards. Each card has a large thumbnail image at top (showing UI mockups or design templates) with 18px rounded corners. Below the image is a bold title "UI Kit" and a list of download format links (Figma, Sketch) with small external link arrows. Use alternating section backgrounds: white for macOS section, light gray (#F5F5F7) for iOS section. Include subheaders like "iOS 26 and iPadOS 26" above the grid. Thumbnails should have subtle hover scale effect.

**Structure Sketch:**
```html
<section id="ios-apps" class="section-download bg-light">
  <div class="container">
    <h2>iOS and iPadOS</h2>
    <h4>iOS 26 and iPadOS 26</h4>
    <div class="grid">
      <div class="resource-card">
        <div class="thumbnail">
          <img src="ios-mockups.jpg" alt="iOS UI Kit"/>
        </div>
        <h5>UI Kit</h5>
        <ul class="formats">
          <li><a href="#">Figma ↗</a></li>
          <li><a href="#">Sketch ↗</a></li>
        </ul>
      </div>
      <!-- Additional cards -->
    </div>
  </div>
</section>
```

### 3. Two-Tier Sticky Navigation
**Purpose:**
Persistent wayfinding combining global site navigation with context-specific local navigation that remains accessible during scroll.

**Evidence:**
- DOM shows `nav#globalnav` with Apple Developer logo and menu items (Get Started, Platforms, Technologies, etc.)
- Secondary `nav#localnav` with "Design" branding and subsection links (Overview, What's New, Get Started, Guidelines, Resources)
- Screenshot 1 shows dark translucent global nav at very top, white local nav below it with thin bottom border
- Localnav has `localnav-sticking` class indicating sticky behavior

**Visual Rules:**
- Layout: Full-width bars, fixed positioning; global nav height ~48px, local nav ~52px
- Color: Global nav is translucent black/dark gray with white text; local nav is white with black text and 1px border-bottom (#D2D2D7)
- Typography: Global nav uses 12px text; local nav uses 14px with "Design" as bold page identifier
- Spacing: Horizontal padding 24px; flex layout with space-between for logo/menu separation
- Radius / border / shadow: No radius; global nav has subtle bottom border; local nav gains `backdrop-filter: blur(20px)` when sticky
- Motion: Smooth transition to sticky state with background blur activation; menu dropdowns on hover with fade-in

**Recreation Prompt:**
> Create a two-level navigation header. Top level: dark translucent bar (rgba(0,0,0,0.8)) with Apple Developer logo on left and menu items (Get Started, Platforms, Technologies, Community, Documentation) on right. Second level: white bar with "Design" in bold on left and subsection links (Overview, What's New, Get Started, Guidelines, Resources) on right with active page underlined. The second bar should become sticky on scroll with glassmorphism blur effect. Include search and account icons in top right.

**Structure Sketch:**
```html
<nav id="globalnav" class="globalnav">
  <div class="content">
    <a class="logo">Apple Developer</a>
    <div class="menu">
      <a href="#">Get Started</a>
      <a href="#">Platforms</a>
      <!-- ... -->
    </div>
  </div>
</nav>
<nav id="localnav" class="localnav localnav-scrim">
  <div class="content">
    <a class="title">Design</a>
    <div class="menu">
      <a href="#">Overview</a>
      <a href="#">What's New</a>
      <a href="#" class="active">Resources</a>
    </div>
  </div>
</nav>
```

### 4. Feature Section with Asymmetric Layout
**Purpose:**
Highlighting specific tools (SF Symbols, Icon Composer) with descriptive copy on left and representative UI screenshots on right, creating visual interest through asymmetry.

**Evidence:**
- DOM shows `section.section-sf-symbols` and `section.section-download` for tools like "SF Symbols" and "Icon Composer"
- Screenshot 3 shows "Icon Composer" section with left-aligned text block and large floating app screenshot on right
- Text includes description and "Learn more" link followed by download button with system requirements
- Screenshot shows SF Symbols grid interface on right side

**Visual Rules:**
- Layout: Two-column asymmetric grid (40% text / 60% image), vertically centered
- Color: Alternating backgrounds (white/gray); screenshots have subtle drop shadow or floating appearance
- Typography: Large section header (32-40px), body paragraph (17px, gray), blue "Learn more" link with chevron
- Spacing: 80px vertical padding; 40px gap between text and image columns
- Radius / border / shadow: Screenshots have 12px radius and subtle shadow (0 20px 40px rgba(0,0,0,0.1)) to simulate floating window
- Motion: Parallax subtle movement on scroll; image scales slightly on section enter

**Recreation Prompt:**
> Create a two-column feature section for "Icon Composer". Left side: Large bold heading, descriptive paragraph text in gray, blue "Learn more ›" link, and a download button with app icon and system requirements text. Right side: Large screenshot of the application interface floating with soft shadow (20px blur, 10% opacity black). Use white background. The layout should be 40/60 split with the image breaking slightly out of the container on the right. Add subtle entrance animation where the image fades in and slides up slightly on scroll.

**Structure Sketch:**
```html
<section class="section-feature">
  <div class="container grid-asymmetric">
    <div class="content">
      <h2>Icon Composer</h2>
      <p>Icon Composer lets you create layered icons out of Liquid Glass...</p>
      <a href="#" class="learn-more">Learn more ›</a>
      <div class="download-block">
        <img src="app-icon.png" class="app-icon"/>
        <div>
          <a href="#">Download Icon Composer ↓</a>
          <small>Requires macOS Sequoia or later.</small>
        </div>
      </div>
    </div>
    <div class="media">
      <img src="icon-composer-ui.jpg" class="screenshot" alt="Interface"/>
    </div>
  </div>
</section>
```

### 5. Technology Badge Grid
**Purpose:**
Dense information display for numerous small resources (badges, logos, guidelines) using compact card cells with iconography and metadata.

**Evidence:**
- DOM shows `section#technologies` with grid containing items like "Add Apple Watch Face", "AirPlay", "App Clips"
- Screenshot 2 shows Technologies section with small thumbnail cards (3-column) featuring UI components like Apple Watch buttons and AirPlay icons
- Screenshot 2 shows "Add Apple Watch Face" card with white/black buttons on gray background

**Visual Rules:**
- Layout: 3-column grid with fixed aspect ratio cards (~1:1 or 4:3), gap 24px
- Color: Light gray card backgrounds (#F5F5F7) with centered content; thumbnails show actual UI components
- Typography: Small bold titles (15px), format tags below (PNG, PDF, SVG) with external links
- Spacing: 16px internal padding; section padding 60px vertical
- Radius / border / shadow: Cards have 18px border-radius, no shadow, subtle border (#E5E5E5)
- Motion: Cards lift slightly on hover (translateY -4px) with shadow appearance

**Recreation Prompt:**
> Create a 3-column grid of technology resource cards. Each card has a light gray background (#F5F5F7) with rounded corners (18px). Inside: a centered thumbnail showing UI components (like Apple Watch face buttons or AirPlay icons), a bold title "Add Apple Watch Face", and format links "PNG, PDF, SVG" in smaller text. Cards should have consistent height (300px) with content vertically centered. On hover, card moves up 4px and gains soft shadow. Include section header "Technologies" above grid with 80px bottom margin.

**Structure Sketch:**
```html
<section id="technologies" class="section-download">
  <div class="container">
    <h2>Technologies</h2>
    <div class="grid-3col">
      <div class="tech-card">
        <div class="preview">
          <img src="watch-face-badges.png" alt="Add Apple Watch Face"/>
        </div>
        <h5>Add Apple Watch Face</h5>
        <div class="formats">
          <a href="#">PNG</a>, <a href="#">PDF</a>, <a href="#">SVG</a>
        </div>
      </div>
      <!-- Additional tech cards -->
    </div>
  </div>
</section>
```

## Engineering CSS Evidence

Compressed from live DOM computed styles. This section keeps high-frequency tokens and intent, not raw CSS dumps.

### Compressed Design Tokens

**Mode:** light

#### Color Roles
- **color.text.primary:** #000000 (107)
- **color.text.secondary:** #9b9b9b (17)
- **color.surface.base:** #ffffff (1)
- **color.accent:** #000000 (212)
- **color.border.default:** #000000 (107)
- **color.focus.ring:** #000000 (107)

#### Typography Roles
- **font.family.primary:** SF Pro Text (193)
- **font.family.secondary:** SF Pro Display (87)
- **font.size.display:** 48px (93)
- **font.size.body:** 12px (17)
- **font.size.label:** 11px (3)
- **ratio:** display is 4x body

#### Spacing Rhythm
- **base unit:** 4px
- **space.1:** 5.7px (122)
- **space.2:** 25px (34)
- **space.3:** 8px (30)
- **space.4:** 3px (18)
- **space.5:** 20px (16)

#### Radius Roles
- Not enough evidence

#### Shadow Intent
- **level:** none
- **usage:** 0
- **note:** flat surfaces dominate

#### Motion Intent
- **level:** moderate
- **range:** 240-320ms
- **common durations:** 320ms (10), 240ms (2)
- **easing style:** cubic-bezier(0.4, 0, 0.6, 1) (10), cubic-bezier(0.28, 0.11, 0.32, 1) (2)

### Distinctive Implementation Signals

- Flat surfaces are preferred over decorative depth.
- Motion is moderate, centered around 240-320ms.
- Type hierarchy is ratio-driven: display is 4x body.

### Extraction Diagnostics

- Sampled 280 visible elements from 1597 total DOM elements.
- Confidence: high.
- No extraction warnings.

## Core Principles
1. Firmly Refuse (Negative Constraints):
- Prohibit using purple/blue gradients on white backgrounds
- Prohibit using common fonts (Inter, Roboto, Arial, system-ui)
- Prohibit using predictable hero-CTA-feature-review templates
- Prohibit using common geometric shapes or abstract spots
- Prohibit using visual effects that look like stock images or clichés
## Performance Optimization
- Ensure pages load quickly, avoid unnecessary large resources
- Use modern image formats (WebP) and appropriate compression
- Implement lazy loading techniques for long page content
**Important Note**: The implementation complexity should match the aesthetic vision. Maximalist designs require complex code as well as a lot of animations and effects. Minimalist or refined designs require restraint, precision, and attention to spacing, typography, and subtle details. Elegance comes from a perfect interpretation of the vision.