Apple

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/apple.com -->
<!-- Extracted: 2026-04-26T13:04:58.880Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "Apple"
description: "Apple's brand vibe is one of sophisticated innovation and accessible premium technology. It projects an image of cutting-edge design and seamless user experience, inviting customers into an exclusive yet user-friendly ecosystem."
colors:
  primary: "#0071e3"
  secondary: "#6e6e73"
  tertiary: "#b64400"
  neutral: "#6e6e73"
  surface: "#fafafc"
  on-surface: "#1d1d1f"
  border: "#d2d2d7"
  link: "#0066cc"
  surface-dark: "#161617"
typography:
  display-lg:
    fontFamily: "SF Pro Text"
    fontSize: "34px"
    fontWeight: "600"
    lineHeight: "50px"
    letterSpacing: "-0.374px"
  headline-lg:
    fontFamily: "SF Pro Text"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "16.0005px"
    letterSpacing: "-0.12px"
  headline-md:
    fontFamily: "SF Pro Display"
    fontSize: "40px"
    fontWeight: "600"
    lineHeight: "44px"
  body-md:
    fontFamily: "SF Pro Text"
    fontSize: "17px"
    fontWeight: "400"
    lineHeight: "25px"
    letterSpacing: "-0.374px"
rounded:
  md: "980px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-primary:
    backgroundColor: "#0071e3"
    textColor: "#ffffff"
    rounded: "980px"
    padding: "11px 21px"
    fontSize: "17px"
    fontWeight: "400"
    borderWidth: "1px"
  button-outline:
    textColor: "#0066cc"
    rounded: "980px"
    padding: "11px 21px"
    fontSize: "17px"
    fontWeight: "400"
    borderColor: "#0066cc"
    borderWidth: "1px"
---

# Apple — Design System

## Overview

Apple's design ethos embodies the Creator archetype, relentlessly innovating to deliver premium, intuitive technology. The aesthetic aligns with brands like Tesla, Dyson, Bang & Olufsen, and Lexus, prioritizing sleek design, advanced functionality, and an exclusive user experience. This design system communicates sophistication and accessibility, inviting users into a seamlessly integrated digital and physical world. Every element is crafted to feel cutting-edge yet immediately understandable, reflecting a commitment to both pioneering technology and human-centered design.

This design system explicitly rejects visual clutter, overt ornamentation, and any aesthetic that suggests compromise on quality or performance. It is not playful, rustic, or overtly industrial. Instead, it maintains a clean, minimalist, and highly refined appearance. The visual language is precise, deliberate, and understated, ensuring that the technology itself remains the focal point, while the interface provides an elegant and unobtrusive conduit for interaction. The emotional register is one of quiet confidence, intelligent design, and effortless capability.

**Key characteristics:**

- Vibe — innovative, premium, sleek, accessible, modern, intuitive
- Archetypes — The Creator, The Sage
- Comparable to — Tesla, Dyson, Bang & Olufsen, Lexus
- Design era — contemporary-minimal
- Emotional tone — aspirational-empowering
- Target audience — Individuals who value high-quality design, seamless integration, and advanced technology, often willing to pay a premium for a superior user experience and brand prestige.
- Visual energy — 6/10 (moderate)

## Colors

The color palette centers on a primary blue, #0071e3, signifying innovation, trustworthiness, and clarity. This vibrant yet authoritative hue defines interactive elements and key brand accents. A foundational surface color, #fafafc, provides a pristine, expansive backdrop, reinforcing the brand's commitment to clean aesthetics and premium presentation. This minimalist approach ensures visual focus remains on content and functionality, underscoring sophistication and user-centricity.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#0071e3` | Dodger Blue |
| secondary | `#6e6e73` | Dim Gray |
| accent / tertiary | `#b64400` | Dark Orange |
| surface | `#fafafc` | Off-White |
| background | `#fafafc` | Off-White |
| text | `#1d1d1f` | Near-Black |
| border | `#d2d2d7` | Light Gray |
| link | `#0066cc` | Cobalt |
| muted | `#6e6e73` | Dim Gray |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| background | `#161617` | Near-Black |

## Typography

The type system exclusively utilizes SF Pro Text and SF Pro Display. This choice ensures optimal legibility across all screen sizes and contexts, from dense information displays to prominent headlines. SF Pro's neutral yet modern characteristics reinforce the brand's commitment to clarity and functional elegance. Hierarchy is established through precise variations in weight and size, guiding the user's eye naturally without resorting to decorative flourishes. This systematic approach communicates professionalism, precision, and an unwavering focus on user comprehension.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| SF Pro Text | body | self-hosted | 400, 600 |
| SF Pro Text | heading | self-hosted | 400, 600 |
| SF Pro Display | heading | self-hosted | 600 |
| SF Pro Display | body | self-hosted | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | SF Pro Text | 34px | 600 | 50px | -0.374px |
| Heading 2 | SF Pro Text | 12px | 400 | 16.0005px | -0.12px |
| Heading 3 | SF Pro Display | 40px | 600 | 44px | — |
| Body | SF Pro Text | 17px | 400 | 25px | -0.374px |

### Conventions

- Heading case — title-case
- Body line-height — 25px

## Layout

- Base spacing unit — `2px`

## Shapes

Border-radius scale:

- `md` — 980px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Primary**

- Background — `#0071e3`
- Text — `#ffffff`
- Radius — `980px`
- Padding — `11px 21px`
- Font size — `17px`
- Font weight — `400`
- Sample copy — "Shop"

**Outline**

- Text — `#0066cc`
- Radius — `980px`
- Padding — `11px 21px`
- Font size — `17px`
- Font weight — `400`
- Border — `1px solid #0066cc`
- Sample copy — "Shop iPhone"

## Do's and Don'ts

### Do

- Utilize SF Pro Text (weights 400, 600) for all body copy and SF Pro Display (weights 400, 600) for headings, ensuring self-hosted versions are used.
- Apply title-case to all headings, maintaining a consistent and polished presentation.
- Ensure body text maintains a line-height of 25px for optimal readability.
- Primary call-to-action buttons must use a #0071e3 background with #ffffff text, a border-radius of 980px, and padding of 11px 21px.
- Outline buttons should feature #0066cc text, a 980px border-radius, a #0066cc border, and 11px 21px padding.
- Maintain a minimal aesthetic by avoiding box-shadows and gradients across all UI elements.
- Use a base spacing unit of 2px for all layout and component spacing, ensuring precise alignment.
- Employ a consistent border-radius of 980px for all medium and button-like rounded elements, creating a distinctive 'pill' shape.

### Don't

- Do not use any emojis or exclamation marks in marketing copy; maintain a serious and matter-of-fact tone.
- Avoid the use of box-shadows or gradients on any visual elements, as the brand maintains a flat and clean aesthetic.
- Do not deviate from the specified SF Pro font families; no other fonts are permitted.
- Do not use any border-radius values other than 980px for rounded elements, or sharp corners for non-rounded elements.
- Do not introduce any playful or overly casual language; the tone should remain enthusiastic yet accessible, with moderate vocabulary.
- Avoid complex or multi-layered visual effects; the design should remain minimal and clean.
- Do not use any background colors other than #fafafc for light mode and #161617 for dark mode.

*Source — merged*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 4/10 | formal |
| Playful ↔ Serious | 8/10 | serious |
| Enthusiastic ↔ Matter-of-fact | 7/10 | matter-of-fact |
| Respectful ↔ Irreverent | 2/10 | respectful |
| Technical ↔ Accessible | 7/10 | accessible |

### Copywriting style

- Avg. sentence length — 8 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct, action-oriented imperative verbs, often combined with product names

### Sample copy

> Discover the innovative world of Apple and shop everything iPhone, iPad, Apple Watch, Mac, and Apple TV, plus explore accessories, entertainment, and expert device support.

> Find the perfect gift for whoever you call Mom.

> Meet the latest iPhone lineup.

> Trade‑in values will vary based on the condition, year, and configuration of your eligible trade‑in device.

> Explore All Mac

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/apple.com) | 100% |
| primary | color | png | [link](brands/apple.com/logo-0.png) | 85% |
| primary | color | png | [link](brands/apple.com/logo-1.png) | 85% |
| primary | color | png | [link](brands/apple.com/logo-2.png) | 85% |
| primary | color | png | [link](brands/apple.com/logo-3.png) | 85% |
| primary | light | png | [link](brands/apple.com/logo-4.png) | 85% |
| primary | color | png | [link](brands/apple.com/logo-5.png) | 85% |
| primary | color | png | [link](brands/apple.com/logo-6.png) | 85% |
| primary | color | png | [link](brands/apple.com/logo-7.png) | 85% |
| primary | color | png | [link](brands/apple.com/logo-8.png) | 85% |
| primary | color | png | [link](brands/apple.com/logo-9.png) | 85% |
| primary | color | png | [link](brands/apple.com/logo-10.png) | 85% |

## Sources

- Official brand guidelines — https://support.apple.com/guide/applestyleguide/welcome/web
- Live brand page — https://extractvibe.com/brand/apple.com
- Raw JSON — https://extractvibe.com/api/brand/apple.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/apple.com/design.md
- Extracted — 2026-04-26T13:04:58.880Z
- Generator — ExtractVibe vv1
- Quality score — 100/100

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md