# Apple — Design System
> Global technology brand known for premium hardware, software, and services.
- **Canonical:** https://uiuxskills.com/library/apple
- **Source:** https://www.apple.com
- **Category:** Media & Consumer Tech
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:13:47.377Z

---

---
version: alpha
name: Apple
description: Global technology leader in consumer electronics, software, and services.
tone: Sophisticated, minimalist, confident, and direct.
color-scheme: light
colors:
  primary: "#000000"
  surface: "#FFFFFF"
  surface-bright: "#F4F8FB"
  on-surface: "#1D1D1F"
  on-primary: "#FFFFFF"
  accent: "#1246C4"
  error: "#D64040"
  success: "#28A745"
  outline: "#D2D2D7"
  focus-ring: "#0066CC"
typography:
  display-lg:
    fontFamily: SF Pro Display
    fontSize: 3rem
  display-md:
    fontFamily: SF Pro Display
    fontSize: 2.25rem
  headline-lg:
    fontFamily: SF Pro Display
    fontSize: 1.875rem
  headline-md:
    fontFamily: SF Pro Display
    fontSize: 1.5rem
  headline-sm:
    fontFamily: SF Pro Display
    fontSize: 1.25rem
  body-md:
    fontFamily: SF Pro Text
    fontSize: 1rem
  label-sm:
    fontFamily: SF Pro Text
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 18px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "#FFFFFF"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "#0055AA"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.accent}"
    typography: "{typography.label-sm}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
  input-field:
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.accent}"
  link-hover:
    textColor: "{colors.primary}"
  badge:
    backgroundColor: "{colors.surface-bright}"
    rounded: "{rounded.full}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FEE2E2"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-on-primary:
    backgroundColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-medium: 300ms
  easing-standard: cubic-bezier(0.4,0,0.2,1)
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

Apple's visual identity is defined by extreme minimalism, high-contrast typography, and a focus on premium product photography. The brand tone is confident, aspirational, and direct, prioritizing the product experience above all else.

## Colors

The color palette is strictly restrained, relying on high-contrast neutrals to let imagery and typography command attention.

*   Primary (#000000): Core brand black used for primary typography and UI elements.
*   Surface (inferred) (#FFFFFF): Standard white background for clean, high-contrast layouts.
*   Surface-bright (#F4F8FB): Light blue-tinted surface for secondary sections.
*   On-surface (inferred) (#1D1D1F): Dark grey text for optimal readability on white surfaces.
*   On-primary (inferred) (#FFFFFF): White text for use on dark backgrounds.
*   Accent (#1246C4): Signature blue used for links and primary actions.
*   Error (inferred) (#D64040): Standard error red for validation states.
*   Success (inferred) (#28A745): Standard success green for positive feedback.
*   Outline (inferred) (#D2D2D7): Subtle grey for borders and dividers.
*   Focus-ring (inferred) (#0066CC): High-visibility blue for accessibility focus states.

## Typography

The typography system utilizes the SF Pro family to ensure maximum legibility and a consistent, sophisticated aesthetic across all device scales.

*   Display-lg (inferred) (SF Pro Display): Used for hero headlines.
*   Display-md (inferred) (SF Pro Display): Used for section titles.
*   Headline-lg (inferred) (SF Pro Display): Used for sub-headlines.
*   Headline-md (inferred) (SF Pro Display): Used for secondary headers.
*   Headline-sm (inferred) (SF Pro Display): Used for card titles.
*   Body-md (inferred) (SF Pro Text): Standard body copy.
*   Label-sm (inferred) (SF Pro Text): Used for small UI labels and legal text.

## Layout

Apple utilizes a highly structured grid system with generous whitespace. Content is centered with consistent horizontal margins that scale with the viewport. The layout is strictly mobile-first, with complex galleries collapsing into single-column stacks on smaller screens. 

*   Section order: nav, hero, promo-grid, gallery, footer.
*   Hero pattern: Large, high-impact product image paired with a concise headline and two primary CTAs.
*   Spacing: Uses a scale starting at 4px (xs) up to 48px (2xl) to maintain breathing room between major sections.

## Elevation & Depth

Subtle single-layer shadows are used to provide depth without compromising the brand's flat, clean aesthetic.

*   elevation.sm — subtle lift for small UI elements.
*   elevation.md — standard card lift for interactive content.
*   elevation.lg — depth for modal or overlay components.

## Shapes

Corner radii are chosen to mirror the hardware design language of Apple devices, favoring soft, rounded edges that feel natural and premium. 

The system uses a scale from 4px (sm) to 18px (xl) and 9999px (full). Cards typically utilize {rounded.lg}, while buttons and badges often use {rounded.full} or {rounded.md} to maintain a consistent, approachable geometry.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use {colors.accent} for primary actions and transparent backgrounds for secondary actions. They are designed to be clear, concise, and highly legible using {typography.label-sm}.

### Card
Cards are defined by {rounded.lg} and a clean {colors.surface} background. They are intended to house product imagery and concise descriptive text, providing a structured container for content.

### Badge
Badges use {rounded.full} to create a pill-shaped appearance. They are typically used for status or category labels, utilizing {colors.surface-bright} for a subtle, non-intrusive background.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for all primary headlines. | Never use drop shadows on text. |
| Apply {typography.display-lg} for hero sections only. | Avoid using more than two font weights on a single page. |
| Use {colors.accent} for all call-to-action links. | Do not use {colors.error} for non-critical UI elements. |
| Maintain generous padding using {spacing.2xl} between sections. | Never mix {rounded.sm} and {rounded.full} in the same group. |
| Use {rounded.lg} for all product cards. | Avoid cluttered layouts; maintain high whitespace density. |
| Ensure all imagery is high-resolution and studio-lit. | Do not use decorative borders; rely on spacing for separation. |
| Use {typography.label-sm} for button labels. | Do not use {colors.focus-ring} for non-interactive elements. |
| Use {rounded.full} for {badge} components. | Never use {colors.surface-bright} for primary backgrounds. |

## Content Style

CTA style is imperative, short, and action-oriented (e.g., "Learn more", "Buy"). Labels should be kept to one or two words to maintain the minimalist aesthetic.

Heading tone is minimalist, benefit-driven, and punchy. Headlines should focus on the primary value proposition of the product or service, avoiding unnecessary fluff.

Copy density is very low; the brand relies on visual storytelling through high-fidelity imagery. Text should be used sparingly to support the visuals rather than compete with them.

## Imagery & Icons

Imagery is exclusively high-fidelity, studio-lit product photography, typically set against clean, neutral backgrounds to emphasize form and finish. Icons are thin-stroke, rounded-end symbols that maintain a consistent, minimal visual weight.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Apple, a sophisticated and minimalist technology brand. Match its confident, direct tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.display-lg}`, `{rounded.lg}` — never hardcode hex values, font sizes, or pixel radii.
2. Respect the components block exactly. Buttons, cards, badges, inputs, and links have defined variants; do not invent new ones.
3. For layout decisions, follow the section order (nav → hero → promo-grid → gallery → footer), mobile-first grid, and spacing scale `{spacing.xs}` through `{spacing.2xl}`.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict before proceeding.
5. Apply motion tokens (`{motion.duration-medium}`, `{motion.easing-standard}`) to all transitions on interactive components.

## Output contract

**Must:**
- Use token names for every color, type style, radius, spacing value, elevation, and motion property.
- Include hover, focus, and disabled states for all interactive components where the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`, focus ring via `{colors.focus-ring}`).
- Apply `{rounded.lg}` to all product cards, `{rounded.full}` to badges, `{rounded.md}` to inputs.
- Keep CTAs imperative, one or two words, per the Content Style section.
- Use `{spacing.2xl}` between major page sections.

**Must NOT:**
- Invent colors, fonts, radii, or elevation values outside the spec.
- Use generic utility defaults (e.g., `gray-500`, `rounded-md` as a literal string) when a brand token exists.
- Apply `{typography.display-lg}` outside hero sections.
- Use `{colors.focus-ring}` on non-interactive elements.
- Mix `{rounded.sm}` and `{rounded.full}` within the same component group.
- Rewrite, replace, or invent page copy, headings, button labels, or navigation items.
- Add emoji, decorative borders, or drop shadows on text.

## When in doubt
- If the spec doesn't define a value, ask the user before inventing one.
- Tokens marked "(inferred)" are visual approximations. If an authoritative token source (theme file, Storybook, metadata) exists, those values take precedence.
- For ambiguous backgrounds, default to `{colors.surface}`; never use `{colors.surface-bright}` as a primary background.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px.
- Prefer composing existing components over introducing new tokens.