---
name: "Apple-inspired website style"
source: "Independent analysis of Apple's publicly observable visual patterns"
tokens:
  colors:
  canvas:
    value: "#FFFFFF"
    purpose: "Primary page surface"
  ink:
    value: "#1D1D1F"
    purpose: "Headlines and primary text"
  muted:
    value: "#6E6E73"
    purpose: "Supporting copy"
  soft-surface:
    value: "#F5F5F7"
    purpose: "Section contrast"
  action:
    value: "#0071E3"
    purpose: "Links and primary actions only"
---

# Apple-inspired website style

## Overview

This system uses a near-monochrome canvas, disciplined product typography, large quiet intervals, and one clear action color. The result feels premium because every visual decision has a narrow job.

This file is an independent starting point for visual inspiration. It does not copy source content, page structure, components, or proprietary assets, and it is not affiliated with or endorsed by Apple.

## Colors

- **canvas:** #FFFFFF — Primary page surface
- **ink:** #1D1D1F — Headlines and primary text
- **muted:** #6E6E73 — Supporting copy
- **soft-surface:** #F5F5F7 — Section contrast
- **action:** #0071E3 — Links and primary actions only

## Typography

- **Display:** -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif. Use a 600–700 weight with tight line height for short product statements
- **Body:** -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif. Use regular weight and comfortable measure; let whitespace create hierarchy
- **Utility:** -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif. Keep labels compact and sentence case

## Layout and spacing

- **Content measure:** 980px for editorial content; wider media may break out
- **Spacing rhythm:** 8px base with 24, 40, 64, 96, and 128px section intervals
- **Grid:** Centered single-focus composition with occasional two-column product stories
- **Corners:** 12–18px for media and cards; pill shapes only for compact actions

## Elevation and depth

- Prefer hierarchy created by spacing, scale, and contrast over decorative shadows.
- Use borders or subtle surface changes only when they clarify grouping.

## Shapes

12–18px for media and cards; pill shapes only for compact actions

## Motion

- Use motion to reveal product relationships, not to decorate idle surfaces.
- Prefer 250–600ms transitions with smooth ease-out curves.
- Respect reduced-motion preferences and keep essential content visible without animation.

## Components

- Apply these tokens to your own semantic components.
- Preserve your product's content hierarchy, accessibility, and interaction model.
- Treat the source style as a constraint system, not a page template.

## Do

- Use one focal message per viewport-sized section.
- Let product media carry color while the interface stays neutral.
- Reserve blue for actions and navigational emphasis.
- Make supporting copy quieter through tone and measure, not tiny type.

## Do not

- Do not copy Apple product imagery, logos, copy, or page structure.
- Do not add multiple accent colors or decorative gradients.
- Do not place every idea inside a bordered card.
- Do not imitate scroll effects unless the content relationship requires them.