Apple

Overview

Apple's design system embodies **Precision Minimalism**—a philosophy that strips away ornamentation to reveal essential product beauty and functional clarity. The brand serves a global audience seeking premium technology, and the UI conveys this through restrained color palettes (primarily white and near-black surfaces with a signature blue accent), generous whitespace, and typography that prioritizes legibility at all scales. The emotional response is one of calm confidence: users feel they are in control of powerful, trustworthy tools. The voice is direct, instructional, and never condescending. Apple speaks in imperative sentences with measured pacing: "Explore Mac." "Learn more about availability." "Discover what's possible." The vocabulary avoids hyperbole; instead, it grounds claims in tangible features and real-world use cases.

Colors

The color system is anchored by a **Neutral-Dominant Foundation** with a single, vibrant accent. Primary (#0071e3) is Apple's signature interaction blue, used exclusively on call-to-action buttons, links, and focus states—it appears sparingly but commands attention. The surface stack progresses from pure white (#ffffff) through carefully calibrated grays (#f5f5f7, #e8e8ed, #dcdce1) to near-black (#161617) in dark mode, enabling subtle visual hierarchy without relying on color saturation. On-surface text is set to #1d1d1f (near-black) for maximum contrast and readability; secondary text uses #6e6e73 (mid-gray) for de-emphasis. Outlines and dividers employ #d2d2d7 (light gray) at 1px weight to define boundaries without visual noise. Error states use #ff3b30 (system red) only when critical fe

Typography

The type system uses San Francisco (SF Pro Text for body, SF Pro Display for headlines) as the primary family, with system fallbacks (-apple-system, BlinkMacSystemFont, Segoe UI) ensuring consistent rendering across platforms. Display (60px, 700 weight, -0.04em tracking) anchors hero sections with commanding presence; Headline-lg (40px, 600 weight, -0.02em tracking) introduces major sections; Headline-md (34px, 600 weight) serves as page titles; Title-lg (24px, 600 weight) marks subsections. Body-lg (18px, 400 weight, 28px line-height) and Body-md (17px, 400 weight, 26px line-height) handle descriptive copy with generous line-height to support scanning. Label-md (16px, 500 weight) and Label-sm (14px, 500 weight) are reserved for UI labels, buttons, and metadata. Negative letter-spacing (-0

Layout

The layout system uses a **12-column fluid grid** with a maximum container width of 1024px, centered on the viewport. The gutter (22px on desktop, responsive down to 16px on mobile) defines the breathing room between grid columns and the viewport edge. Section spacing follows a semantic rhythm: major sections are separated by lg spacing (40px), subsections by md spacing (24px), and inline elements by sm spacing (12px). The homepage employs a hero-first pattern—a full-width hero section (100vw height, centered content) establishes brand presence, followed by stacked product showcase sections (each 60-80vh height) that scroll vertically. Cards and content blocks use md padding (24px) internally, with lg spacing (40px) between card groups. The design favors whitespace over density: no section

Elevation & Depth

Depth is conveyed through **Subtle Layering and Proximity**, not dramatic shadows. The elevation system defines three levels: Level 1 (Base) uses no shadow—flat surfaces on the background. Level 2 (Raised Cards) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft separation from the background without visual heaviness. Level 3 (Modals/Overlays) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with a semi-transparent dark overlay (rgba(0, 0, 0, 0.4)) and backdrop-filter: blur(20px) to establish clear modal hierarchy. Hover states transition shadows smoothly (200ms cubic-bezier(0.4

Shapes

The shape language follows **Functional Softness**—rounded corners are applied strategically to signal affordance without compromising precision. Buttons use full radius (980px) to create pill-shaped affordances that feel approachable and tappable; this 980px value is derived from the button's height (44px) multiplied by a factor that ensures the radius extends beyond the element's bounds, creating a perfect circle at the ends. Cards and containers use lg radius (12px) to soften edges while maintaining a structured, architectural feel. Input fields and smaller UI elements use DEFAULT radius (6

Components

Action Elements Buttons are the primary interaction primitive. Button-primary (background: #0071e3, color: white, padding: 11px 21px, border-radius: 980px, height: 44px) is reserved for the single most important action per screen—typically "Buy," "Learn More," or "Explore." On hover, the background shifts to #0066cc (200ms transition) and the cursor changes to pointer. On active/press, background becomes #005ac1. Button-secondary uses a transparent background with a 1px outline (color: #d2d2d7) and text in primary blue; on hover, the background fills with surface-container-high (#e8e8ed). Button-ghost is a minimal variant with no border, transparent background, and primary-blue text; it's used for tertiary actions or within dense layouts. All buttons use label-md typography (16px, 500

Do's and Don'ts

**Do**

• Do use primary blue (#0071e3) exclusively for the single most important CTA per screen—never use it for secondary or tertiary actions.
• Do maintain minimum 44px touch targets for all interactive elements (buttons, links, form fields) to meet accessibility standards.
• Do apply negative letter-spacing (-0.04em to -0.02em) on display and headline text to reinforce premium positioning; never apply negative tracking to body text.
• Do use the full 980px border-radius on buttons to create pill-shaped affordances; never use smaller radii for primary CTAs.
• Do separate major sections with lg spacing (40px) and subsections with md spacing (24px); never use arbitrary spacing values.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to raised cards and box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) to modals; never stack multiple shadows or use blur values outside this range.

**Don't**

• Don't use multiple accent colors on a single screen—primary blue is the only interactive accent; secondary and tertiary blues are reserved for status badges and data visualization.
• Don't apply rounded corners to dividers, hairlines, or structural elements; keep them at 0px border-radius to maintain architectural clarity.
• Don't exceed 65 characters per line in body copy; use the 1024px container-max-width and multi-column layouts to enforce this constraint.
• Don't use system fonts (system-ui, sans-serif, inherit) in production; always specify SF Pro Text or SF Pro Display with appropriate fallbacks.
• Don't apply shadows to flat, base-level surfaces; shadows are reserved for raised (Level 2) and modal (Level 3) elements only.
• Don't use opacity or color desaturation to indicate disabled states; instead, use a combination of background-color shift (#e8e8ed) and cursor: not-allowed.