Apple

Overview

Apple's design system embodies "Reductive Elegance"—a philosophy that strips away visual noise to reveal product and purpose. The brand serves a global audience seeking premium technology, and the interface evokes confidence, clarity, and forward momentum through restraint rather than ornamentation. Every pixel serves function; every interaction feels inevitable.

The voice is precise, confident, and human. Apple speaks in declarative statements without hyperbole: "Pro further." "One more thing." Vocabulary favors concrete nouns and active verbs; marketing copy avoids superlatives in favor of capability. The tone is conversational yet authoritative, never breathless or casual. Example: "iPhone 18 Pro delivers computational photography that sees what your eye misses—and captures it in a single frame."

Colors

Apple's palette is anchored by a single, unmistakable accent: Electric Blue (#0071e3), the primary brand color used exclusively on call-to-action buttons, links, and interactive focus states. This blue appears sparingly against a predominantly neutral canvas, making every instance of it a deliberate signal of interactivity. The surface stack ranges from pure white (#ffffff) for primary content areas to soft grays (#f5f5f7, #e8e8ed) for container backgrounds and dividers, creating subtle visual hierarchy without contrast shock. On-surface text is a near-black (#1d1d1f) at 17px body weight, with secondary text in mid-gray (#6e6e73) for captions and metadata. The dark mode inverse uses #161617 as the base surface with #f5f5f7 text, maintaining the same contrast ratio (14:1) for accessibility.

Typography

The type system uses two distinct families: SF Pro Display for headlines and display text (sizes 28px–60px, weights 600–700), and SF Pro Text for body and UI text (sizes 14px–18px, weights 400–600). Display text uses tight leading (68px for 60px type, 48px for 40px) and negative letter-spacing (-0.04em for display, -0.02em for headlines) to create visual density and premium feel. Body text (17px, 400 weight, 26px leading) is set with generous line-height to ensure readability at arm's length on screens. Hierarchy is conveyed through size and weight, never color; primary actions use label-md (16px, 500 weight) in white on blue, while secondary actions use the same size in blue on transparent. On small labels over busy product photography, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to e

Layout

Apple's layout uses a 12-column grid with a max-width of 1280px, centered with symmetric margins. The page rhythm alternates between full-bleed hero sections (black or product-focused backgrounds) and contained content sections with 24px gutters on desktop, 16px on tablet, and 12px on mobile. White-space is generous: section separation uses 64px (lg spacing) on desktop, creating visual breathing room between product showcases and feature callouts. Container padding follows a consistent 24px (md spacing) on all sides for card-based layouts, with 12px (sm spacing) for compact UI elements like buttons and badges. The grid is fluid on mobile (100% width minus safe-area insets) and fixed on desktop, ensuring product imagery scales responsively without distortion. Horizontal rhythm is maintained

Elevation & Depth

Depth in Apple's system is achieved through subtle layering and shadow, not through dramatic perspective. Level 1 (Base): flat surfaces with no shadow, used for body backgrounds and primary content areas. Level 2 (Elevated Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to product cards, modals, and floating UI elements to lift them 4–8px above the base. Level 3 (Floating/Modals): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), used for full-screen overlays, dropdown menus, and top-level navigation. All shadows use a soft, diffuse blur (8px–24px) and low opacity (0.12–0.15) to avoid har

Shapes

Apple's shape language is "Architectural Minimalism"—sharp corners dominate, with selective rounding applied only where it serves function. Buttons use full-radius (980px) to create pill-shaped affordances that feel distinctly Apple; this extreme rounding signals "tap here" without visual aggression. Cards and containers use 10px (md) or 12px (lg) radius for subtle definition without softness. Input fields and form elements use 6px (DEFAULT) radius for a clean, technical appearance. The rationale: sharp corners convey precision and engineering; selective rounding on interactive elements create

Components

Action Elements Buttons are the primary interaction primitive. Primary buttons (button-primary) use #0071e3 background with white text, 44px height, 11px vertical padding, 21px horizontal padding, and full-radius (980px). On hover, the background shifts to #0066cc (secondary blue); on active/press, it darkens to #0051ba. Secondary buttons (button-secondary) use transparent background with a 1px border in primary blue and blue text; on hover, the background fills with primary-container (#e8f0ff). All button text uses label-md typography (16px, 500 weight). Transitions between states use 200ms cubic-bezier(0.4, 0, 0.6, 1) for a snappy, responsive feel.

Containers & Surfaces Cards (card component) use white background (#ffffff) with 10px border-radius, 24px padding, and a subtle shad

Do's and Don'ts

**Do**

• Do use the primary blue (#0071e3) exclusively for interactive elements—buttons, links, and focus states—to create a clear visual hierarchy and signal interactivity.
• Do maintain generous white-space (24px gutters, 64px section separation) to let product imagery and content breathe; density signals complexity, not sophistication.
• Do apply SF Pro Display for headlines and SF Pro Text for body; never mix typefaces or use system fonts as fallbacks in hero sections.
• Do use full-radius (980px) on buttons and pill-shaped UI elements to create distinctive, tappable affordances that feel distinctly Apple.
• Do apply subtle shadows (0 3px 8px rgba(0, 0, 0, 0.15)) to elevated surfaces; avoid harsh, high-contrast shadows that feel dated or heavy.

**Don't**

• Don't use secondary or tertiary colors as primary CTAs; the blue accent is sacred and reserved for the most important actions.
• Don't apply border-radius to every element; sharp corners are the default; rounding is earned through function, not aesthetics.
• Don't use color alone to convey state or meaning; always pair color changes with text, icons, or spatial shifts for accessibility.
• Don't exceed 1280px container width on desktop; the grid is intentionally constrained to maintain focus and readability.
• Don't animate transitions longer than 300ms or use easing curves other than cubic-bezier(0.4, 0, 0.6, 1); Apple's motion is snappy and purposeful, never leisurely.