Minimal Apple

# Minimal Apple

## Design Philosophy

Minimal Apple is an exercise in **radical reduction**. The design asks one question at every decision point: "Can this be removed?" If the answer is yes, it's removed. What remains is essential — pure signal with zero noise.

The philosophy draws from Dieter Rams' ten principles of good design, particularly "less, but better." Every element earns its place through function, not decoration. White space is not empty — it's the most important design element, creating rhythm, hierarchy, and breathing room.

## Design Goals

- Achieve maximum impact through minimum means
- Let content speak without competing visual noise
- Create a sense of calm, focused sophistication
- Ensure instant comprehension of page structure
- Make typography the primary design element

## Visual Language

The visual language is **monochrome serenity**. The palette is strictly black, white, and gray. No color appears anywhere — not even as accent. This constraint forces excellence in typography, spacing, and proportion.

Backgrounds are pure white. Text is near-black. The only visual variation comes from font weight, size, and the generous orchestration of white space. Borders are nearly invisible (`#f3f4f6`), appearing only when structural separation is necessary.

## Color System

| Token           | Value     | Usage                       |
|-----------------|-----------|-----------------------------|
| background      | `#ffffff` | Page background             |
| surface         | `#ffffff` | Card backgrounds            |
| primary         | `#000000` | Headings, CTAs              |
| secondary       | `#6b7280` | Secondary text              |
| text            | `#111827` | Body text                   |
| text-muted      | `#9ca3af` | Captions, metadata          |
| border          | `#f3f4f6` | Subtle dividers             |

## Typography

- **Primary Font:** SF Pro Text (system), Inter (web)
- **Heading Scale:** `clamp(2.5rem, 6vw, 5rem)` for H1 — very large, very thin
- **Body Size:** 17px, line-height 1.6 — optimized for reading comfort
- **Font Weights:** 300 (headings — thin/light), 400 (body), 500 (labels), 600 (emphasis)
- **Line Heights:** Headings at 1.05 for tight, elegant stacking
- **Letter Spacing:** -0.04em for large headings, normal for body

## Spacing System

Base unit: 4px — but sections use multiples of 8px

| Token | Value  | Usage                    |
|-------|--------|--------------------------|
| xs    | 4px    | Micro gaps               |
| sm    | 8px    | Tight spacing            |
| md    | 16px   | Component padding        |
| lg    | 32px   | Card padding             |
| xl    | 48px   | Section padding          |
| 2xl   | 80px   | Major sections           |
| 3xl   | 128px  | Hero sections            |

## Border Radius

| Token | Value | Usage                    |
|-------|-------|--------------------------|
| sm    | 4px   | Inputs                   |
| md    | 8px   | Small cards              |
| lg    | 12px  | Images                   |
| xl    | 16px  | Modal containers         |
| full  | 9999px| Avatars                  |

## Shadows

```css
.subtle-shadow {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.card-shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.elevated-shadow {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}
```

Shadows are intentionally imperceptible at first glance. They exist only to create subtle depth cues.

## Gradients

None. Gradients introduce visual complexity that contradicts the minimal philosophy.

## Layout

- **Container:** max-width 720px for text content, 1080px for media
- **Grid:** Single column for text, optional 2-column for galleries
- **Section Spacing:** 128px between major sections
- **Breakpoints:**
  - Mobile: < 640px (full-width, 20px padding)
  - Tablet: 640px–1024px (centered, 40px padding)
  - Desktop: > 1024px (centered, 64px padding)

## Components

### Navbar
- Transparent background, blends with page
- 72px height, centered logo
- Links: small, uppercase, letter-spacing 0.1em
- Sticky with subtle backdrop blur on scroll

### Hero
- Centered text layout, max-width 640px
- H1 in 300 weight, massive size
- Subtitle in muted color, 17px
- Single CTA: text link with underline, no button

### Buttons
- Primary: black background, white text, 100px border-radius
- Secondary: transparent with thin black border
- Hover: opacity 0.8
- Size: 48px height, generous horizontal padding

### Cards
- No borders, no shadows by default
- Content-focused with generous internal whitespace
- Hover: subtle shadow appears
- Images: full-bleed within card, 12px radius

### Forms
- Underline-only inputs (no background, no border)
- Focus: underline turns black
- Labels float above on focus
- Minimal validation — inline, subtle

### Footer
- Simple text, centered
- Single-column, generous top padding
- Links in muted color

## Animation

- **Duration:** 400ms standard
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)` — smooth, Apple-like
- **Hover Effects:** Opacity change only (0.8), no movement
- **Entrance:** Fade-in only, 400ms, no translation
- **Scroll:** Fade-in sections as they enter viewport
- **Transitions:** `opacity 400ms ease`

## Responsive Rules

- **Mobile (< 640px):** Single column, reduced heading size, 20px padding
- **Tablet (640px–1024px):** Centered content, 40px padding
- **Desktop (> 1024px):** Max-width containers, 64px padding
- **Typography:** Fluid scaling with clamp() — no breakpoints needed

## Accessibility

- Black on white: 21:1 contrast ratio (WCAG AAA)
- Focus indicators: 2px black outline with 4px offset
- All images have descriptive alt text
- Semantic HTML throughout
- Reduced motion: fade-in becomes instant

## Performance

- Zero JavaScript for visual effects
- System font stack for zero font-loading
- No images in default state — typography-driven
- Minimal CSS — under 4KB total
- Perfect Lighthouse score target

## Implementation Rules

1. Never use more than 2 font weights per page
2. White space must be deliberate — measured in multiples of 8px
3. No decorative elements — every pixel must serve function
4. Typography must be beautiful at every viewport size
5. Test in grayscale — if it doesn't work without color, it doesn't work
6. Never add shadow, border, or decoration "just because"