apple.com — Design System

1. Visual Theme & Atmosphere

Apple’s web design language is the most systematized in the industry. Every token has a semantic name, every spacing value is calculated, and the entire system is built to support both light and dark modes without structural changes. The atmosphere is premium minimalism: white space as a material, typography as the primary visual element. There is an almost aggressive clarity — page backgrounds are pure white, text is near-black, and the single accent color (blue #0066CC) appears only where genuine action is invited. The design system (sk- prefix tokens) reads like a design language specification rather than a stylesheet.

2. Color Palette & Roles

Backgrounds (semantic fills)

• Primary: rgb(255, 255, 255) — white
• Secondary: rgb(250, 250, 252) — --sk-fill-secondary; barely-perceptible cool tint
• Tertiary: rgb(245, 245, 247) — --sk-fill-tertiary; for card surfaces
• Quaternary: rgb(232, 232, 237) — --sk-fill-gray-quaternary; dividers, borders

Text hierarchy

• Primary: rgb(29, 29, 31) — warm near-black (--sk-body-text-color)
• Secondary: rgb(110, 110, 115) — mid-grey
• Tertiary: rgb(134, 134, 139) — lighter grey

Accent (action only)

• Blue: rgb(0, 113, 227) — --sk-fill-blue; buttons, interactive elements
• Link blue: rgb(0, 102, 204) — --sk-body-link-color; text links
• Focus ring: #0071E3

Status / contextual

• Green: rgb(3, 161, 14) — success
• Red: rgb(227, 0, 0) — error/destructive
• Orange: rgb(245, 99, 0) — warning
• Yellow: rgb(255, 224, 69) — highlight

Special surfaces

• Nav (frosted): rgba(250, 250, 252, 0.8) with backdrop blur
• Dark nav variant: #161617
• Environmental teal/cream: rgb(84,140,140) / rgb(246,246,238) — product photography context colors

3. Typography Rules

Two SF Pro optical variants, used with precision:

SF Pro Display — for large type (28px+). Used for h1 (80px / 600 / -1.2px tracking), h3 (28px), h5 (24px), and large paragraph text (21px). The negative tracking on the hero (-1.2px) is characteristic of Apple’s large-display typesetting.

SF Pro Text — for small, dense type. Used for body (17px / 400 / -0.374px), h2 (12px), h4 (14px), navigation, and links. Negative tracking persists even at small sizes — a deliberate Apple signature.

• Body: 17px / 400 / 25px line-height / -0.374px tracking — unusually generous for body copy
• Hero h1: 80px / 600 / 84px line-height / -1.2px — tall and tight
• Buttons: 18px / 300 — light weight, unusual for CTAs

The total absence of third-party typefaces is the strongest possible design statement: this system doesn’t exist without the Apple ecosystem.

4. Component Stylings

Navigation: Frosted rgba(250,250,252,0.8) at 44px height. Sticky, with translucency effect. Dark variant for dark pages.

Cards: rgb(245, 245, 247) — tertiary fill. No visible shadows in base system; elevation through background color only.

Buttons: 18px / 300 weight — light and confident. Focus ring: #0071E3 at 1px offset.

Links: rgb(0,102,204) — distinguished from button blue, consistent with web convention but Apple-toned.

Focus management: Dedicated --sk-focus-color, --sk-focus-offset, and --sk-focus-offset-container tokens — accessibility is a first-class design consideration.

Border radii: Not prominently varied; system relies on Apple’s platform conventions.

5. Layout Principles

Max content width: 1680px with 90px padding on large viewports (--viewport-content-padding-lg). Three breakpoints: 320px, 834px, 1024px. The layout system is fluid between breakpoints, not stepping.

The --apps specific tokens (--more-apps-col: 8, icon grids) show product-specific layout overrides layered onto the base system. This modularity is core to how Apple manages hundreds of pages with one system.

6. Depth & Elevation

Apple’s web design deliberately avoids shadows. The four-step fill hierarchy (white → secondary → tertiary → quaternary) creates depth through lightness value alone. The frosted nav achieves depth through transparency, not shadow. This is a conscious aesthetic choice aligned with the flat-design era Apple popularized.

7. Do’s and Don’ts

Do

• Use the semantic sk- fill tokens in order (primary → secondary → tertiary) for surface elevation
• Apply negative letter-spacing to all type; it’s baked into every size
• Reserve blue exclusively for interactive/action elements
• Maintain 17px body text — do not drop below for legibility

Don’t

• Use drop shadows; Apple’s system doesn’t
• Mix in non-system fonts; SF Pro is non-negotiable on Apple’s own pages
• Use red, orange, or green for decoration; they’re semantic status colors
• Deviate from the 1680px max-width container

8. Responsive Behavior

Three defined breakpoints: 320px (small), 834px (medium), 1024px (large). Viewport-specific variables adjust nav heights and content padding proportionally. The hero at 80px would likely scale to ~40–48px on mobile. The 8-column app grid (--more-apps-col: 8) probably halves or quarters on small screens.

9. Agent Prompt Guide

Implement Apple.com’s design system: white page, near-black text (rgb(29,29,31)), SF Pro Display for 28px+ headings with negative tracking, SF Pro Text for body at 17px. Single action accent blue (rgb(0,113,227)). Four surface levels for elevation via background fills — no drop shadows. Max-width 1680px, frosted nav at 44px. The design earns its premium feel through precision, not decoration.

Generated by Sparkbites — extracted from live CSS analysis