Apple

Overview

Apple's design system embodies **Architectural Minimalism**—a philosophy that treats every pixel as intentional, every color as purposeful, and every interaction as an extension of the product itself. The brand serves a global audience seeking technology that disappears into their lives, leaving only clarity and capability. The aesthetic is deliberately restrained: a near-monochromatic foundation (whites, grays, blacks at #1d1d1f, #6e6e73, #f5f5f7) punctuated by a single, commanding accent—electric blue (#0071e3)—that appears exclusively on primary actions and brand moments. This creates a visual hierarchy so clear that users navigate by instinct rather than instruction.

Apple's voice is precise, confident, and human. The brand avoids hyperbole, preferring concrete benefit statements over emotional appeals. Vocabulary is direct: "College, sorted." "Get a gift card from $100 to $150." "Shop now." The tone never whispers or shouts; it speaks as a peer who has solved a problem and is sharing the solution. Example: "We're donating $10 to the National Park Foundation for each purchase made at Apple using Apple Pay through August 28."

Colors

The color system operates on a principle of **hierarchical restraint**: a neutral foundation supports a single, high-contrast accent. **Primary (#0071e3)** is the brand's signature electric blue, reserved exclusively for call-to-action buttons, active navigation states, and focus indicators. It appears on the rendered CTA "Shop" button with rgba(0, 113, 227) and commands 32 instances across the page—the highest frequency after neutrals. **On-Primary (#ffffff)** ensures text on primary buttons maintains WCAG AAA contrast (21:1 ratio). **Secondary (#333336)** is a near-black used for primary body text and secondary navigation; it appears 19 times and provides the visual weight for readable content. **Tertiary (#86868b)** is a mid-gray reserved for helper text, secondary labels, and disabled

Typography

The type system uses **SF Pro Display** for headlines (display, headline-lg, headline-md) and **SF Pro Text** for body and labels, both from Apple's proprietary font family optimized for screen rendering at any size. Display (60px, 700 weight, -0.04em tracking) commands attention on hero sections; headline-lg (40px, 600 weight, -0.02em) anchors major sections; headline-md (28px, 600 weight, -0.01em) introduces subsections. Body-lg (18px, 400 weight) and body-md (17px, 400 weight) maintain readability at 26–28px line-height, preventing the dense feeling of tighter leading. Label-md (14px, 600 weight, 0.01em tracking) is used for buttons and metadata, with label-sm (12px, 500 weight, 0.02em) for tertiary information. The pairing communicates **precision and clarity**: display faces are geome

Layout

The layout operates on a **12-column grid with a 1280px container maximum**, centered with equal gutters (24px on desktop, 16px on tablet, 12px on mobile). The page rhythm uses a **fluid-to-fixed hybrid**: hero sections and full-width imagery bleed edge-to-edge, while content containers respect the max-width to prevent line-length from exceeding 75 characters (optimal for reading). Spacing is semantic: **lg (40px)** separates major sections (hero to product grid), **md (24px)** separates cards within a section, **sm (12px)** separates inline elements. The header uses 44px height on desktop (48px on mobile) with 22px horizontal padding, creating a rhythm that aligns with the 8px unit grid. White-space is generous—Apple's pages feel uncluttered because negative space is treated as a design e

Elevation & Depth

Depth is conveyed through **subtle shadow and surface-color shifts** rather than dramatic layering. Level 1 (Base): the page background is pure white (#ffffff) with no shadow. Level 2 (Standard Card): cards use {elevation.sm} (0 1px 2px rgba(0, 0, 0, 0.06)) with a 1px border at {outline-variant} (#d2d2d7), creating a barely-perceptible lift. Level 3 (Elevated/Hover): on hover, cards transition to {elevation.md} (0 4px 12px rgba(0, 0, 0, 0.08)) over 200ms, signaling interactivity without jarring the user. The header uses a frosted-glass effect: backdrop-filter: saturate(180%) blur(20px) with ba

Shapes

The shape philosophy is **Geometric Precision with Organic Warmth**—sharp enough to feel technical, rounded enough to feel approachable. **Buttons use {rounded.full} (9999px)**, creating pill-shaped CTAs that are impossible to miss and feel distinctly Apple (e.g., the "Shop" button at border-radius: 980px). **Cards and containers use {rounded.lg} (1rem / 16px)**, providing subtle rounding that softens the grid without feeling playful. **Inputs and smaller interactive elements use {rounded.DEFAULT} (0.5rem / 8px)**, a minimal radius that maintains legibility and feels technical. **Navigation it

Components

Action Elements

**Button Primary** (backgroundColor: {colors.primary}, textColor: {colors.on-primary}, rounded: {rounded.full}, padding: 11px 21px, height: 44px) is the signature CTA. The 44px height matches the global nav, creating a visual rhythm. On hover, transition to #0066cc (a 10% darker blue) over 200ms; on active, shift to #005bb3. The pill shape (border-radius: 980px) makes the button unmissable. Never use a shadow on primary buttons—the color contrast is sufficient. **Button Secondary** uses a transparent background with a 1px border at {colors.primary}, allowing secondary actions to coexist without competing. On hover, fill the background with {colors.primary-container} (rgba(232, 240, 255, 1)) to indicate interactivity. **Button Tertiary** is a text link with text-decorat

Do's and Don'ts

**Do**

• Do use primary blue (#0071e3) exclusively on CTAs and focus states—it's the brand's signature accent and loses impact if overused.
• Do maintain 44px minimum height for all touch targets (buttons, inputs, list items) to meet accessibility standards and Apple's own guidelines.
• Do apply the frosted-glass header effect (backdrop-filter: saturate(180%) blur(20px)) on navigation and sticky elements to create visual separation while maintaining context.
• Do use SF Pro Display for headlines and SF Pro Text for body—these fonts are optimized for Apple's ecosystem and render crisply at any size.
• Do transition interactive states over 150–200ms using ease-out timing; avoid instant changes, which feel jarring in a minimalist interface.
• Do respect the 12-column grid and 1280px container max-width; breaking the grid should be intentional (full-width hero images) and rare.

**Don't**

• Don't use multiple accent colors—the system relies on blue (#0071e3) as the sole brand color. Secondary actions use borders or background fills, not new hues.
• Don't apply shadows to primary buttons; the color contrast is sufficient, and shadows add visual weight that contradicts the minimalist aesthetic.
• Don't mix rounded and sharp corners within a component family (e.g., don't use 8px on one button and 16px on another in the same section).
• Don't use system fonts (system-ui, sans-serif, -apple-system) as fallbacks without SF Pro; the brand identity depends on the specific letterforms of Apple's typeface.
• Don't exceed 75 characters per line in body text; the 1280px container is designed to prevent line-length from becoming fatiguing.
• Don't remove focus indicators for keyboard navigation—they're essential for accessibility and must remain visible at all times, even on hover.