Apple

# Apple Design System

## Visual Theme & Atmosphere
Minimalist, premium, product-focused. The Apple design philosophy centers on "letting the product speak." Massive hero imagery dominates the viewport. The near-white background (#F5F5F7) creates an infinite, airy canvas. Everything feels expensive, considered, and meticulously crafted.

## Color Palette & Roles
| Token | Hex | Role |
|-------|-----|------|
| Primary | #1D1D1F | Text, primary elements |
| Secondary | #0071E3 | CTAs, links, Apple Blue |
| Accent | #F56300 | Orange accents, alerts |
| Background | #FFFFFF | Main canvas |
| Surface | #F5F5F7 | Sections, secondary backgrounds |
| Text | #1D1D1F | Primary text |
| Muted | #86868B | Secondary text, captions |
| Border | #D2D2D7 | Subtle dividers |

## Typography Rules
- **Display**: SF Pro Display — large headlines, product names
- **Text**: SF Pro Text — body copy, UI elements
- **Base Size**: 17px
- **H1**: 3.5rem / weight 600 / tight letter-spacing
- **H2**: 2.5rem / weight 600
- **Body**: 17px / weight 400 / line-height 1.4
- Generous letter-spacing on headlines

## Component Stylings
- **Buttons**: Rounded pill shape (980px radius), blue #0071E3 or dark #1D1D1F
- **Product Cards**: Minimal, large imagery, subtle shadows
- **Navigation**: Clean top bar, transparent then blurred on scroll
- **Links**: Blue #0071E3, no underline
- **Grid**: 12-column, generous gutters

## Layout Principles
- Massive hero images (often full-bleed)
- Generous whitespace (60-80px section padding)
- Centered content, max-width containers
- Product photography dominates
- Scroll-triggered reveal animations

## Responsive Behavior
- Fluid breakpoints: 734px, 1068px, 1440px
- Mobile: Single column, stacked content
- Tablet: 2-column grids
- Desktop: Full 12-column, large hero imagery
- Typography scales down proportionally

## Agent Prompt Guide
When generating UI for Apple-style designs:
- Use extensive white/gray space
- Large product images or abstract gradients
- SF Pro or Inter fonts
- Rounded pill buttons (blue for primary)
- Subtle shadows (0 4px 20px rgba(0,0,0,0.08))
- Centered, confident typography