Apple
MIT
Apple's refined, light design system built on SF Pro typography with subtle grays, precise spacing, and purposeful motion—ideal for premium product experiences and polished web interfaces
Published by Layout74 importsminimal tierLayout StudioImport this kit into a Studio project and start editing.
CLI installRun it in any project. No account needed.
npx @layoutdesign/context install appleUI themeReskin shadcn or Layout UI components to match Apple.
npx shadcn add https://layout.design/r/apple/theme.json# layout.md — Apple.com Design System
---
## 0. Quick Reference
**Source:** apple.com · Token source: extracted-css-vars (94 properties, high confidence)
**Stack:** HTML/CSS with Apple's proprietary SF Pro font system. Styling via CSS custom properties.
**How to apply:** Use as `var(--token-name)` in CSS, `style={{ prop: 'var(--token-name)' }}` in JSX, or `bg-[var(--token-name)]` in Tailwind.
```css
:root {
/* Surfaces */
--sk-body-background-color: rgb(255, 255, 255);
--sk-fill-secondary: rgb(250, 250, 252);
--sk-fill-tertiary: rgb(245, 245, 247);
--r-globalnav-background-opened: #fafafc;
/* Text */
--sk-body-text-color: rgb(29, 29, 31);
--sk-headline-text-color: rgb(29, 29, 31);
--sk-glyph-gray-secondary: rgb(110, 110, 115);
--sk-glyph-blue: rgb(0, 102, 204);
--sk-body-link-color: rgb(0, 102, 204);
/* Actions */
--sk-fill-blue: rgb(0, 113, 227);
--sk-focus-color: #0071e3;
/* Nav */
--r-globalnav-height: 48px;
--globalnav-height: 48px;
/* Radius */
--radius-sm: 8px;
--radius-md: 11px;
--radius-pill: 980px;
/* Motion */
--duration-fast: 0.1s;
--duration-base: 0.24s;
--duration-slow: 0.32s;
--ease-default: ease;
}
```
```tsx
// Apple-style pill CTA button — correct token usage
const CTAButton = ({ label, href }: { label: string; href: string }) => (
<a
href={href}
style={{
fontFamily: '"SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif',
fontSize: '17px', fontWeight: 400, lineHeight: '20px',
letterSpacing: '-0.374px', color: 'var(--sk-glyph-blue)',
border: '1px solid var(--sk-glyph-blue)',
borderRadius: 'var(--radius-pill)', padding: '11px 21px',
background: 'transparent', textDecoration: 'none', display: 'inline-block',
transition: 'background-color var(--duration-base) var(--ease-default), color var(--duration-base) var(--ease-default)',
}}
>
{label}
</a>
);
```
**NEVER rules:**
- NEVER use Inter, Roboto, or Arial as the primary font — use SF Pro Text or SF Pro Display
- NEVER use a border-radius other than `8px`, `11px`, or `980px` for interactive elements
- NEVER hardcode `#0066cc` or `rgb(29,29,31)` — always reference `--sk-glyph-blue` / `--sk-body-text-color`
- NEVER use warm colours (orange, yellow, red) for CTAs — Apple blue (`--sk-fill-blue`) is the action colour
- NEVER omit `backdrop-filter: saturate(1.8) blur(20px)` on the global nav — it is structurally required
- NEVER use `font-weight: 700` or heavier for body copy — maximum is `600` (semibold)
- NEVER use decorative drop shadows on surface elements — Apple surfaces are flat or use subtle fills only
**Full design system → see layout.md**
---
## 1. Design Direction & Philosophy
### Character & Aesthetic Intent
Apple.com's design language is **restrained, high-contrast, and product-first**. Every visual decision defers to product photography and device imagery. The UI is a neutral, near-invisible scaffold. Typography carries most of the communicative weight, with large SF Pro Display headlines dominating hero sections and fine SF Pro Text copy handling navigation and footnotes.
The mood is **confident minimalism** — no gradients on UI chrome, no decorative borders, no visual noise. Whitespace is used aggressively. Product names are displayed in bold, large-scale type against pure white or near-white backgrounds.
### What This Design Explicitly Rejects
- **Warm or vivid UI chrome** — orange, yellow, and red appear only as semantic signal colours (error, warning, product). They NEVER appear on navigation elements, CTAs, or backgrounds.
- **Rounded UI containers** — cards have `border-radius: 0px`. Only interactive controls (buttons, inputs, nav items) carry radius, and it is tightly constrained to `8px`, `11px`, or the pill (`980px`).
- **Heavy typographic weights** — `font-weight: 900` (Black) exists in the font system but is reserved for one-word product titles at display sizes. Body and UI copy uses `400`; headlines use `600`.
- **Drop shadows as depth** — elevation is expressed through background fills (white → `--sk-fill-secondary` → `--sk-fill-tertiary`), not `box-shadow`.
- **Generic system fonts** — The SF Pro family is non-negotiable. Inter, Roboto, and Arial are fallbacks only.
- **Busy layouts** — sections are full-width, single-product focused, never multi-column product grids above the fold.
### Design Principles
1. **Product is hero** — UI chrome competes for zero attention.
2. **Typography at scale** — headlines are 40–56px; body in hero sections is 28px. Small copy is 12px.
3. **Blue = action** — `--sk-glyph-blue: rgb(0, 102, 204)` and `--sk-fill-blue: rgb(0, 113, 227)` are the only action colours.
4. **Motion is purposeful** — transitions are 240–320ms with `ease` or custom cubic-bezier. Never decorative.
5. **Accessibility-first focus** — `--sk-focus-color: #0071e3` with precise offset control, never suppressed.
---
## 2. Colour System
### Tier 1: Primitive Values (extracted CSS vars — preserve names exactly)
```css
:root {
/* --- NEUTRALS --- */
--sk-fill: rgb(255, 255, 255); /* Pure white surface */
--sk-fill-secondary: rgb(250, 250, 252); /* Near-white, nav opened bg */
--sk-fill-tertiary: rgb(245, 245, 247); /* Slightly elevated surface */
--sk-fill-gray: rgb(29, 29, 31); /* Near-black fill */
--sk-fill-gray-alpha: rgba(0, 0, 0, 0.88); /* Near-black alpha variant */
--sk-fill-gray-secondary: rgb(134, 134, 139); /* Mid gray fill */
--sk-fill-gray-secondary-alpha: rgba(0, 0, 0, 0.48); /* Mid gray alpha */
--sk-fill-gray-tertiary: rgb(210, 210, 215); /* Light gray fill */
--sk-fill-gray-tertiary-alpha: rgba(0, 0, 0, 0.16); /* Light gray alpha */
--sk-fill-gray-quaternary: rgb(232, 232, 237); /* Lightest gray fill */
--sk-fill-gray-quaternary-alpha: rgba(0, 0, 0, 0.08); /* Lightest gray alpha */
/* --- GLYPHS (text/icon colours) --- */
--sk-glyph: rgb(0, 0, 0); /* Pure black glyph */
--sk-glyph-gray: rgb(29, 29, 31); /* Near-black glyph (body text) */
--sk-glyph-gray-alpha: rgba(0, 0, 0, 0.88); /* Near-black alpha glyph */
--sk-glyph-gray-secondary: rgb(110, 110, 115); /* Secondary/caption text */
--sk-glyph-gray-secondary-alpha: rgba(0, 0, 0, 0.56); /* Secondary alpha */
--sk-glyph-gray-secondary-alt: rgb(66, 66, 69); /* Alt secondary glyph */
--sk-glyph-gray-secondary-alt-alpha: rgba(0, 0, 0, 0.72); /* Alt secondary alpha */
--sk-glyph-gray-tertiary: rgb(134, 134, 139); /* Tertiary/disabled text */
--sk-glyph-gray-tertiary-alpha: rgba(0, 0, 0, 0.48); /* Tertiary alpha */
/* --- ACCENT / BRAND --- */
--sk-fill-blue: rgb(0, 113, 227); /* Primary blue fill (solid buttons) */
--sk-glyph-blue: rgb(0, 102, 204); /* Primary blue glyph (links, pill btn borders) */
--sk-focus-color: #0071e3; /* Focus ring colour */
--sk-focus-color-alt: rgb(0, 0, 0); /* Alt focus ring (dark surfaces) */
/* --- SEMANTIC COLOURS --- */
--sk-fill-orange: rgb(245, 99, 0); /* Warning/promo fill */
--sk-fill-orange-secondary: rgb(255, 249, 244); /* Warning surface tint */
--sk-glyph-orange: rgb(182, 68, 0); /* Warning glyph */
--sk-fill-green: rgb(3, 161, 14); /* Success fill */
--sk-fill-green-secondary: rgb(245, 255, 246); /* Success surface tint */
--sk-glyph-green: rgb(0, 128, 9); /* Success glyph */
--sk-fill-red: rgb(227, 0, 0); /* Error/destructive fill */
--sk-fill-red-secondary: rgb(255, 242, 244); /* Error surface tint */
--sk-glyph-red: rgb(227, 0, 0); /* Error glyph */
--sk-fill-yellow: rgb(255, 224, 69); /* Highlight/attention fill */
--sk-fill-yellow-secondary: rgb(255, 254, 242); /* Highlight surface tint */
/* --- SPECIAL BRAND --- */
--sk-productred: rgb(175, 30, 45); /* Product RED — Apple charity product line */
--sk-enviro-green: rgb(0, 217, 89); /* Environmental/sustainability accent */
--sk-enviro-neutral: rgb(232, 232, 237); /* Environmental neutral fill */
/* --- NAV SPECIFIC --- */
--r-globalnav-background-opened: #fafafc; /* Global nav flyout background (light) */
--r-globalnav-background-opened-dark: #161617; /* Global nav flyout background (dark) */
}
```
### Tier 2: Semantic Aliases
```css
:root {
/* Surfaces */
--sk-body-background-color: rgb(255, 255, 255); /* Page background */
/* Text */
--sk-body-text-color: rgb(29, 29, 31); /* Body and paragraph text */
--sk-headline-text-color: rgb(29, 29, 31); /* Heading text */
--sk-body-link-color: rgb(0, 102, 204); /* Inline link colour */
/* Interaction */
--sk-link-disabled-opacity: 0.42; /* Disabled link/button opacity */
--sk-focus-offset: 1px; /* Standard focus ring offset */
--sk-focus-offset-container: 3px; /* Container focus ring offset */
}
```
### Tier 3: Component Colour Tokens (inferred from computed styles)
| Component | Property | Token | Value |
|---|---|---|---|
| Global Nav (open) | background | `--r-globalnav-background-opened` | `#fafafc` |
| Global Nav (dark open) | background | `--r-globalnav-background-opened-dark` | `#161617` |
| Pill Button | border + text | `--sk-glyph-blue` | `rgb(0, 102, 204)` |
| Solid/Dark Button | background | `--sk-fill-gray` | `rgb(29, 29, 31)` |
| Focus Ring | outline | `--sk-focus-color` | `#0071e3` |
| Disabled | opacity | `--sk-link-disabled-opacity` | `0.42` |
| Navigation bg | background | `--sk-fill-secondary` w/ `rgba(250,250,252,0.8)` | backdrop-blur applied |
### Light / Dark Mode
| Token | Light | Dark |
|---|---|---|
| Nav opened bg | `--r-globalnav-background-opened: #fafafc` | `--r-globalnav-background-opened-dark: #161617` |
| Focus ring | `--sk-focus-color: #0071e3` | `--sk-focus-color-alt: rgb(0,0,0)` |
---
## 3. Typography System
**Primary font families:**
- **SF Pro Display** — headlines, hero copy, large-scale display text (≥ 28px)
- **SF Pro Text** — UI elements, body copy, navigation, buttons (≤ 24px)
- **SF Pro Icons** — icon font (always a fallback in the stack, never used as a primary)
**Font stack (full fallback):**
```
"SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif /* Display */
"SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif /* Text/UI */
"SF Pro Text", "Myriad Set Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Icons", "Apple Legacy Icons", "Helvetica Neue", Helvetica, Arial, sans-serif /* System-aligned */
```
### Composite Typography Groups
```css
/* ─── DISPLAY HERO — Section hero headlines (h3 usage on apple.com) ─── */
.type-display-hero {
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 56px; /* extracted: 4 elements at this scale (h2 hero) */
font-weight: 600; /* semibold — heaviest used at display scale */
line-height: 60px; /* extracted: inferred proportional to 40px/44px ratio */
letter-spacing: -0.374px; /* tight tracking for large display */
color: var(--sk-headline-text-color);
}
/* ─── DISPLAY LARGE — Product section titles ─── */
.type-display-large {
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 40px; /* extracted: high confidence — 6 h3 elements */
font-weight: 600; /* semibold */
line-height: 44px; /* extracted: high confidence from h3 computed */
letter-spacing: normal;
color: var(--sk-headline-text-color);
}
/* ─── DISPLAY MEDIUM — Sub-section callouts ─── */
.type-display-medium {
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px; /* extracted: high confidence — body element, 3 p elements */
font-weight: 400; /* regular */
line-height: 32px; /* extracted: high confidence from body computed */
letter-spacing: 0.196px; /* slightly tracked out at this size */
color: var(--sk-body-text-color);
}
/* ─── TITLE — Section sub-heads, inline titles ─── */
.type-title {
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 34px; /* extracted: high confidence — h1 computed */
font-weight: 600; /* semibold */
line-height: 50px; /* extracted: high confidence from h1 computed */
letter-spacing: -0.374px; /* tight tracking */
color: var(--sk-headline-text-color);
}
/* ─── HEADLINE — Card titles, grid headings ─── */
.type-headline {
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 24px; /* extracted: 45 elements at this scale */
font-weight: 600; /* semibold */
line-height: 28px; /* reconstructed: moderate confidence, proportional */
letter-spacing: -0.374px;
color: var(--sk-headline-text-color);
}
/* ─── BODY LARGE — Section body copy ─── */
.type-body-large {
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 21px; /* extracted: 6 paragraph elements */
font-weight: 400;
line-height: 26px; /* reconstructed: moderate confidence */
letter-spacing: normal;
color: var(--sk-body-text-color);
}
/* ─── UI / BUTTON — Navigation, buttons, tabs ─── */
.type-ui {
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px; /* extracted: high confidence — 7 ui elements */
font-weight: 400; /* regular — Apple never bolds button labels */
line-height: 25px; /* extracted: nav, tab, dropdown computed */
letter-spacing: -0.374px;
color: var(--sk-body-text-color);
}
/* ─── CAPTION / NAV LABEL — Footnotes, nav section labels ─── */
.type-caption {
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px; /* extracted: high confidence — 118 elements */
font-weight: 400;
line-height: 16px; /* extracted: high confidence from h2, card computed */
letter-spacing: -0.12px;
color: var(--sk-glyph-gray-secondary);
}
/* ─── BADGE / FINE PRINT — Badges, legal micro-copy ─── */
.type-badge {
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 10px; /* extracted: badge computed */
font-weight: 400;
line-height: 13px;
letter-spacing: -0.08px;
color: rgb(255, 255, 255); /* white — badges appear on dark surfaces */
}
/* ─── FOOTNOTE — Legal footnotes, asterisk references ─── */
.type-footnote {
font-size: var(--sk-footnote-font-size); /* 0.6em relative */
vertical-align: top;
position: relative;
top: var(--sk-footnote-offset-top); /* -0.5em */
}
```
### Weight Scale
| Weight | Name | Usage |
|---|---|---|
| 400 | Regular | Body copy, UI labels, button labels, navigation links |
| 600 | Semibold | All headlines, product names, section titles |
| 700–900 | Bold–Black | Reserved for special display contexts only; NEVER for UI chrome |
---
## 4. Spacing & Layout
### Base Unit & Scale
Apple.com does not use a rigid 4px/8px grid explicitly in extracted tokens, but the component spacing cluster around multiples of common values. The nav height is **48px** (a fixed structural constant).
```css
:root {
/* ─── STRUCTURAL HEIGHTS ─── */
--r-globalnav-height: 48px; /* Global nav bar height — fixed */
--globalnav-height: 48px; /* Alias — same value */
--globalnav-collective-height: var(--globalnav-height); /* Total nav stack */
--r-localnav-height: calc(48px * var(--r-localnav-text-zoom-factor)); /* Local product nav */
--r-localnav-stacked-height: calc(63px * var(--r-localnav-text-zoom-factor)); /* Stacked local nav */
--hero-content-height: 650px; /* Standard hero section content height */
--promo-content-height: 500px; /* Promotional banner content height */
/* ─── TYPOGRAPHIC SPACING ─── */
--sk-default-stacked-margin: 0.4em; /* Default stacked element margin */
--sk-paragraph-plus-element-margin: 0.8em; /* Paragraph followed by any element */
--sk-headline-plus-first-element-margin: 0.8em; /* Headline followed by first child */
--sk-headline-plus-headline-margin: 0.4em; /* Consecutive headline spacing */
--sk-paragraph-plus-headline-margin: 1.6em; /* Paragraph before a headline */
/* ─── MEDIA GALLERY SPACING ─── */
--media-gallery-tile-gap: 13px; /* Gap between gallery tiles */
--media-gallery-dotnav-gap: 10px; /* Dot navigation gap */
--media-gallery-button-margin-top: 13px; /* Button margin within gallery */
--media-gallery-headline-margin-bottom: 17px; /* Headline bottom margin in gallery */
--media-gallery-bottom-content-padding-left: 15px;
--media-gallery-bottom-content-padding-bottom: 30px;
--media-gallery-bottom-content-padding-right: 15px;
/* ─── MEDIA GALLERY DIMENSIONS ─── */
--media-gallery-tile-width: 275px; /* Individual gallery tile width */
--media-gallery-tile-height: 496px; /* Individual gallery tile height */
--fam-gallery-tile-height: 254px; /* Family gallery tile height (shorter) */
/* ─── BORDER RADIUS SCALE ─── */
--radius-sm: 8px; /* Small: locale buttons, nav CTA chips */
--radius-md: 11px; /* Medium: dropdowns, select controls */
--radius-pill: 980px; /* Pill: secondary CTA buttons */
--radius-circle: 50%; /* Circle: dot nav icon controls */
}
```
### Breakpoints
Apple uses an unusually granular breakpoint system. Key structural breakpoints:
| Breakpoint | px | Purpose |
|---|---|---|
| Small min | 320px | `--r-localnav-viewport-small-min-width` |
| Small max | 833px | `--r-localnav-viewport-small-max-width` |
| Medium min | 834px | `--r-localnav-viewport-medium-min-width` — tablet layout |
| Medium max | 1023px | `--r-localnav-viewport-medium-max-width` |
| Large min | **1024px** | `--r-localnav-viewport-large-min-width` — desktop layout |
| Wide | 1068px | Typography scaling inflection |
| Max width | 1440px | Content container cap |
| Beyond | 1441px+ | Centred, max-width locked |
**Additional detected:** 419px, 480px, 640px, 641px, 734px, 735px, 736px, 776px, 1044px, 1069px, 1070px — used for granular typography and media scaling.
### Grid & Container
```css
/* Inferred from layout digest — no explicit grid tokens extracted */
.page-container {
max-width: 1440px; /* Inferred from breakpoint ceiling — reconstructed: moderate confidence */
margin: 0 auto;
padding: 0; /* Full-bleed sections; padding applied per-section */
}
.section-inner {
max-width: 1068px; /* Content inflection point breakpoint — reconstructed: moderate confidence */
margin: 0 auto;
padding: 0 22px; /* Standard horizontal gutter — reconstructed: moderate confidence */
}
```
---
## 5. Page Structure & Layout Patterns
> **Note:** No page screenshots were provided. All section entries are inferred from the LAYOUT DIGEST, component inventory, and computed structural styles. Rows marked **(inferred)** are not visually confirmed.
### 5.1 Section Map
| # | Section | Layout Type | Approx. Height | Key Elements |
|---|---|---|---|---|
| 1 | **Global Navigation** | `display: block`, full-width sticky | 48px fixed | Logo, nav links, search, bag icon; backdrop-blur |
| 2 | **Local Product Nav** | `display: block`, full-width sticky below global nav | 48px | Product name, anchor links, CTA button |
| 3 | **Hero / Feature** (inferred) | Full-bleed, centred content, `--hero-content-height: 650px` | 650px+ | Product headline (40–56px), sub-copy (28px), 1–2 CTA buttons |
| 4 | **Promotional Banner** (inferred) | Full-bleed, centred | ~500px | `--promo-content-height: 500px`; single product, headline + pill CTA |
| 5 | **Feature Card Grid** (inferred) | Multi-tile horizontal scroll or 2-up grid | Variable | 74 card instances; `--media-gallery-tile-width: 275px`, gap `13px` |
| 6 | **Media Gallery / Carousel** (inferred) | Horizontal scroll, dot navigation | `--media-gallery-tile-height: 496px` | Tiles 275×496px, dot nav at bottom, icon controls |
| 7 | **Family Gallery** (inferred) | Shorter tile variant | `--fam-gallery-tile-height: 254px` | Shorter cards (254px tall) for accessory/family product rows |
| 8 | **Global Footer** (inferred) | Multi-column grid | Variable | Nav links, locale switcher, legal copy at 12px |
### 5.2 Layout Patterns
**Global Navigation:**
- `display: block` container, internal items flex-row
- Background: `rgba(250, 250, 252, 0.8)` with `backdrop-filter: saturate(1.8) blur(20px)`
- Height locked at `var(--r-globalnav-height)` = **48px**
- On open (flyout): background transitions to `var(--r-globalnav-background-opened)` = `#fafafc` (opaque)
- Nav items: `font-size: 17px`, `letter-spacing: -0.374px`, `color: rgb(29, 29, 31)`
**Hero Sections (inferred):**
- Full-width, centred text layout (`text-align: center` confirmed on h3 and body computed styles)
- Headline: `font-size: 40–56px`, `font-weight: 600`, SF Pro Display
- Body: `font-size: 28px`, `font-weight: 400`, `line-height: 32px`, `text-align: center`
- CTAs: 1–2 buttons, pill-shaped (`border-radius: 980px`) in Apple blue outline style
**Card Grid (inferred):**
- `display: inline` tiles (confirmed from card computed style)
- Tile width: `var(--media-gallery-tile-width)` = **275px**
- Tile gap: `var(--media-gallery-tile-gap)` = **13px**
- Horizontal scroll on small viewports; wrapping grid on large
**Footer (inferred):**
- Multi-column link grid
- Type: 12px `--sk-glyph-gray-secondary` for link groups
- Full-bleed with light background
### 5.3 Visual Hierarchy
1. **Hero headline** (56px → 40px semibold, centre-aligned) is the single dominant visual element per section
2. **Product imagery** occupies the full section — UI chrome is subordinate
3. **CTA buttons** are always below headline and body copy, centred, pill-shaped in `--sk-glyph-blue`
4. **Local nav CTA** (e.g. "Buy") uses the dark button variant: `background: rgb(29,29,31)`, `color: white`, `border-radius: 8px`, `padding: 8px 15px` — this is NOT a pill, it is `radius-sm`
5. Whitespace between sections is generous — sections never visually bleed into one another
**CTA colour census (from computed styles):**
- Pill outline CTA: `border: 1px solid rgb(0, 102, 204)`, `color: rgb(0, 102, 204)`, `background: transparent`
- Dark chip CTA (nav): `background: rgb(29, 29, 31)`, `color: rgb(255, 255, 255)`, `border-radius: 8px`
- Neither variant uses `--sk-fill-blue` as a solid fill button — Apple.com's primary CTA is an **outline pill**, not a solid blue button
### 5.4 Content Patterns
**Pattern A — Full-bleed product hero:**
`[Section background (white or image)] → [Headline 56px centre] → [Sub-copy 28px centre] → [1–2 pill CTAs centre]`
**Pattern B — Two-up feature tiles (inferred):**
`[Left tile: product image + headline 24px + caption 12px] | [Right tile: product image + headline 24px + caption 12px]`
Gap: `13px`. Tiles are equal-width at `275px` each on desktop.
**Pattern C — Media gallery carousel:**
`[Dot nav] → [Scrollable tile row, tile: 275×496px, gap 13px] → [Bottom content area: padding 15px left/right, 30px bottom]`
**Pattern D — Navigation link list (footer, inferred):**
`[Section label 12px gray-secondary uppercase] → [Link list 12px gray body, hover underline]`
---
## 6. Component Patterns
### 6.1 Button — Pill (Secondary CTA)
**Anatomy:** `<a>` or `<button>` · text label · pill border · optional chevron icon
**Token-to-property mappings:**
| State | Property | Value |
|---|---|---|
| Default | `color` | `var(--sk-glyph-blue)` = `rgb(0, 102, 204)` |
| Default | `border` | `1px solid var(--sk-glyph-blue)` |
| Default | `border-radius` | `var(--radius-pill)` = `980px` |
| Default | `padding` | `11px 21px` |
| Default | `background` | `transparent` |
| Default | `font-size` | `17px` |
| Default | `font-weight` | `400` |
| Default | `letter-spacing` | `-0.374px` |
| Hover | `background` | `var(--sk-glyph-blue)` (inferred — blue fills on hover) |
| Hover | `color` | `rgb(255, 255, 255)` (inferred) |
| Focus-visible | `outline` | `2px solid var(--sk-focus-color)` |
| Focus-visible | `outline-offset` | `var(--sk-focus-offset)` = `1px` |
| Disabled | `opacity` | `var(--sk-link-disabled-opacity)` = `0.42` |
| Disabled | `pointer-events` | `none` |
| Transition | all | `background-color var(--duration-base) var(--ease-default), color var(--duration-base) var(--ease-default)` |
```tsx
// Apple Pill Button — production-ready with full state handling
import React from 'react';
interface PillButtonProps {
label: string;
href?: string;
onClick?: () => void;
disabled?: boolean;
type?: 'button' | 'submit';
}
export const PillButton: React.FC<PillButtonProps> = ({
label, href, onClick, disabled = false, type = 'button',
}) => {
const baseStyle: React.CSSProperties = {
fontFamily: '"SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif',
fontSize: '17px',
fontWeight: 400,
lineHeight: '20px',
letterSpacing: '-0.374px',
color: 'var(--sk-glyph-blue)',
backgroundColor: 'transparent',
border: '1px solid var(--sk-glyph-blue)',
borderRadius: 'var(--radius-pill)',
padding: '11px 21px',
textAlign: 'center',
textDecoration: 'none',
display: 'inline-block',
cursor: disabled ? 'default' : 'pointer',
opacity: disabled ? 'var(--sk-link-disabled-opacity)' : '1',
pointerEvents: disabled ? 'none' : 'auto',
transition: [
'background-color var(--duration-base) var(--ease-default)',
'color var(--duration-base) var(--ease-default)',
'border-color var(--duration-base) var(--ease-default)',
].join(', '),
};
const handleMouseEnter = (e: React.MouseEvent<HTMLElement>) => {
if (disabled) return;
const el = e.currentTarget as HTMLElement;
el.style.backgroundColor = 'var(--sk-glyph-blue)';
el.style.color = 'rgb(255, 255, 255)';
};
const handleMouseLeave = (e: React.MouseEvent<HTMLElement>) => {
const el = e.currentTarget as HTMLElement;
el.style.backgroundColor = 'transparent';
el.style.color = 'var(--sk-glyph-blue)';
};
const sharedProps = {
style: baseStyle,
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave,
'aria-disabled': disabled,
};
if (href) {
return (
<a href={disabled ? undefined : href} {...sharedProps}>
{label}
</a>
);
}
return (
<button
type={type}
disabled={disabled}
onClick={onClick}
{...sharedProps}
>
{label}
</button>
);
};
```
---
### 6.2 Button — Dark Chip (Nav CTA, e.g. "Buy")
**Anatomy:** `<a>` element · short label · dark fill · small radius
| State | Property | Value |
|---|---|---|
| Default | `background` | `rgb(29, 29, 31)` = `var(--sk-fill-gray)` |
| Default | `color` | `rgb(255, 255, 255)` |
| Default | `border-radius` | `var(--radius-sm)` = `8px` |
| Default | `padding` | `8px 15px` |
| Default | `font-size` | `14px` |
| Default | `font-weight` | `400` |
| Hover | `background` | `rgba(0, 0, 0, 0.88)` (slightly lighter, inferred) |
| Focus-visible | `outline` | `2px solid var(--sk-focus-color)` |
| Focus-visible | `outline-offset` | `1px` |
| Disabled | `opacity` | `0.42` |
---
### 6.3 Global Navigation
**Anatomy:** `<nav role="navigation">` · logo · link list · search icon · bag icon · backdrop
| State | Property | Value |
|---|---|---|
| Default | `height` | `var(--r-globalnav-height)` = `48px` |
| Default | `background` | `rgba(250, 250, 252, 0.8)` |
| Default | `backdrop-filter` | `saturate(1.8) blur(20px)` |
| Default | `font-size` | `17px` |
| Default | `letter-spacing` | `-0.374px` |
| Opened (flyout) | `background` | `var(--r-globalnav-background-opened)` = `#fafafc` (opaque) |
| Link hover | `color` | `var(--r-globalnav-color-hover)` (contextual) |
| Link hover | `text-decoration` | `none` |
| Link focus-visible | `outline-offset` | `-7px` (inset) |
| Button disabled | `cursor` | `default` |
```tsx
// Global Navigation — structural layout with correct backdrop
export const GlobalNav: React.FC<{ isOpen?: boolean }> = ({ isOpen = false }) => (
<nav
role="navigation"
style={{
position: 'sticky',
top: 0,
height: 'var(--r-globalnav-height)',
width: '100%',
backgroundColor: isOpen
? 'var(--r-globalnav-background-opened)'
: 'rgba(250, 250, 252, 0.8)',
backdropFilter: isOpen ? 'none' : 'saturate(1.8) blur(20px)',
WebkitBackdropFilter: isOpen ? 'none' : 'saturate(1.8) blur(20px)',
zIndex: 9999,
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '0 22px',
transition: `background-color var(--duration-slow) var(--ease-default)`,
}}
>
{/* Nav content */}
</nav>
);
```
---
### 6.4 Card
**Anatomy:** Container (`display: inline`) · image · category label (12px) · title (24px) · optional CTA
| State | Property | Value |
|---|---|---|
| Default | `display` | `inline` |
| Default | `background` | `transparent` |
| Default | `border-radius` | `0px` — cards are NOT rounded |
| Default | `font-size` (label) | `12px` |
| Default | `color` (label) | `rgba(0, 0, 0, 0.56)` = `--sk-glyph-gray-secondary-alpha` |
| Default | `padding` | `0px` |
| Hover | `text-decoration` | `none` on container; underline on link child |
| Focus-visible | `outline` | `2px solid var(--sk-focus-color)` |
| Transition | | `all var(--duration-slow) var(--ease-default)` |
**Critical:** Cards on apple.com have **zero border-radius**. NEVER apply `--radius-sm` or higher to a card container.
---
### 6.5 Badge
**Anatomy:** `<span>` · text label · transparent background (overlays dark surface)
| State | Property | Value |
|---|---|---|
| Default | `font-size` | `10px` |
| Default | `font-weight` | `400` |
| Default | `line-height` | `13px` |
| Default | `letter-spacing` | `-0.08px` |
| Default | `color` | `rgb(255, 255, 255)` |
| Default | `background` | `transparent` (overlaid on dark image/surface) |
| Default | `border-radius` | `0px` |
| Default | `text-align` | `center` |
---
### 6.6 Tab / Anchor Link
**Anatomy:** `<a>` with underline decoration · active state indicated by underline thickness
| State | Property | Value |
|---|---|---|
| Default | `font-size` | `17px` |
| Default | `color` | `var(--sk-glyph-blue)` = `rgb(0, 102, 204)` |
| Default | `text-decoration` | `underline` |
| Default | `padding` | `8px` |
| Default | `letter-spacing` | `-0.374px` |
| Hover | `text-decoration` | `none` |
| Focus-visible | `outline-offset` | `1px` |
| Transition | `width` | `0.25s linear` |
---
### 6.7 Input / Search Field
**Anatomy:** `<input>` · search icon · reset button · submit button
> Only 1 input instance was extracted. Styles inferred from the global nav search behaviour.
| State | Property | Value |
|---|---|---|
| Default | `font-family` | SF Pro Text stack |
| Default | `font-size` | `17px` |
| Focus-visible | `outline` | `2px solid var(--sk-focus-color)` = `#0071e3` |
| Focus-visible | `outline-offset` | `var(--sk-focus-offset)` = `1px` |
| Transition | fade + slide | `opacity, transform 0.32s ease` (from `globalnav-search-fade-and-slide` keyframe) |
---
## 7. Elevation & Depth
Apple.com expresses depth through **background fill layering**, not box-shadows. The shadow system is nearly absent from the UI chrome.
```css
:root {
/* ─── SURFACE LAYER FILLS (depth via fill, not shadow) ─── */
/* Layer 0 — Base page */
--surface-base: var(--sk-body-background-color); /* rgb(255, 255, 255) */
/* Layer 1 — Elevated panels, nav opened */
--surface-elevated: var(--sk-fill-secondary); /* rgb(250, 250, 252) */
/* Layer 2 — Cards, dropdowns */
--surface-raised: var(--sk-fill-tertiary); /* rgb(245, 245, 247) */
/* Layer 3 — Overlays, modals (dark theme) */
--surface-overlay-dark: var(--r-globalnav-background-opened-dark); /* #161617 */
/* ─── BORDER TOKENS ─── */
--border-subtle: 1px solid rgba(0, 0, 0, 0.04); /* Button (primary variant) border */
--border-action: 1px solid var(--sk-glyph-blue); /* Pill CTA border */
--border-transparent: 1px solid rgba(0, 0, 0, 0); /* Dark nav CTA (invisible border) */
/* ─── Z-INDEX SCALE ─── */
--z-content: 1;
--z-sticky: 100; /* Local product nav */
--z-nav: 9999; /* Global nav — always topmost */
--z-flyout: 10000; /* Nav flyout panels */
--z-focus: 1; /* Focus-visible z-index bump on nav triggers */
}
```
**Box Shadow:** No `box-shadow` was extracted on any primary UI element. `box-shadow: none` is the baseline. NEVER add a drop shadow to nav, cards, or buttons — it conflicts with the design language.
**Backdrop filter** is the primary depth signal for the navigation bar:
```css
/* Required on global nav — not optional decoration */
backdrop-filter: saturate(1.8) blur(20px);
-webkit-backdrop-filter: saturate(1.8) blur(20px);
```
---
## 8. Motion
```css
:root {
/* ─── DURATION TOKENS ─── */
--duration-fast: 0.1s; /* Micro-interactions: button press response */
--duration-base: 0.24s; /* Standard: background-color, border-color on buttons */
--duration-slow: 0.32s; /* Standard: opacity, transform on nav items and cards */
--duration-media-copy: 600ms; /* --media-gallery-bottom-copy-duration: content reveal */
--duration-media-slide: 800ms; /* --media-gallery-slide-duration: gallery slide */
/* ─── EASING TOKENS ─── */
--ease-default: ease; /* 184 elements — general transitions */
--ease-button: cubic-bezier(0.4, 0, 0.6, 1); /* Button bg/border transitions */
--ease-linear: linear; /* Tab width animation */
}
```
### Keyframe Animations (extracted — preserve names)
| Animation Name | Behaviour | Used For |
|---|---|---|
| `globalnav-chevron-slide-in-hover` | Opacity 0→1, translateX(-4px→0) | Nav chevron hover entrance |
| `globalnav-chevron-hover-off` | Opacity 1→0, scale(1→0.8) | Nav chevron hover exit |
| `globalnav-flyout-slide-forward-next` | Opacity 0→1, translateX(8px→0) | Flyout panel forward navigation |
| `globalnav-flyout-slide-forward-previous` | Opacity 1→0, translateX(0→-8px) | Flyout panel exit |
| `globalnav-flyout-slide-back-next` | Opacity 0→1, translateX(-8px→0) | Flyout panel back navigation |
| `globalnav-flyout-slide-back-previous` | Opacity 1→0, translateX(0→8px) | Flyout panel back exit |
| `globalnav-scrim-height-change` | Height transition between flyout sizes | Nav scrim resize |
| `globalnav-fade-in` | Opacity 0→1 | Generic nav element appearance |
| `globalnav-search-fade-and-slide` | Opacity 0→1, translateY(shift→0) | Search panel entrance |
| `globalnav-search-input-intro` | Opacity 0→1, translateY(shift→0) | Search input appearance |
| `globalnav-search-input-outro` | Opacity 1→0, translateY(0→shift) | Search input disappearance |
| `progress-indicator-animating` | Multi-step opacity fade (spinner) | Loading state indicator |
| `dotnav-become-visible` | Opacity 0→1, scale(0→1) | Dot nav dot appearance |
| `dotnav-become-invisible` | Opacity 1→0 | Dot nav dot disappearance |
| `dotnav-timed-animation` | Width expansion | Active dot progress indicator |
| `inline-media-spin` | rotate(0→360deg) | Media loading spinner |
### Motion Principles
- **Translation distances are small:** 4–8px for flyout slides, 8px for dotnav shifts. Never use large translate values for UI chrome.
- **Fade + slide always together** for appearing elements — never fade-only on interactive panels.
- **`prefers-reduced-motion`** — all keyframe and transition animations must be disabled or replaced with instant cuts when this media query is active.
- **`cubic-bezier(0.4, 0, 0.6, 1)`** is Apple's button-specific easing — not a generic ease-in-out.
---
## 9. Anti-Patterns & Constraints
1. **NEVER use Inter, Roboto, or Arial as the primary font face.**
→ Why it fails: AI coding agents default to `font-family: 'Inter', sans-serif` because it's common in design systems. This produces a visually wrong result immediately — the letterforms, tracking, and optical sizing of SF Pro are distinct enough that any substitution is immediately identifiable. The entire typographic hierarchy collapses.
→ What to do instead: Always use `"SF Pro Display"` for sizes ≥ 28px and `"SF Pro Text"` for sizes ≤ 24px, with the full fallback stack as documented in Section 3.
2. **NEVER hardcode colour hex values (`#1d1d1f`, `#0066cc`, `#0071e3`) inline.**
→ Why it fails: AI agents copy hex values from screenshots or other sources, bypassing the token system. When light/dark mode or brand updates occur, hardcoded values create untraceable inconsistency. The semantic naming is also lost — `--sk-glyph-blue` communicates intent; `#0066cc` does not.
→ What to do instead: Always reference `var(--sk-body-text-color)`, `var(--sk-glyph-blue)`, `var(--sk-focus-color)`, etc. from the token system.
3. **NEVER add `box-shadow` to card or button elements.**
→ Why it fails: AI agents trained on generic Material Design or Bootstrap conventions attempt to add depth via `box-shadow`, because that's the most common elevation pattern. Apple expresses elevation through fill colour shifts (`--sk-fill` → `--sk-fill-secondary` → `--sk-fill-tertiary`), not shadows. Adding shadows makes components look like they belong to a different design system.
→ What to do instead: Use background fill changes for depth. If elevation must be signalled, use `--sk-fill-secondary` on the raised element.
4. **NEVER apply `border-radius` greater than `11px` to any card, modal, or content container.**
→ Why it fails: AI agents commonly apply `border-radius: 16px` or `24px` to cards and panels (a common Tailwind/shadcn default). Apple cards have `border-radius: 0px`. Only interactive controls carry radius, and the maximum for a non-pill control is `11px`. Rounding cards destroys the product-photography-first layout where images must bleed edge-to-edge.
→ What to do instead: Apply `border-radius: 0` to all card and content containers. Apply `var(--radius-pill)` = `980px` only to pill CTA buttons, `var(--radius-sm)` = `8px` to chip/chip-style nav buttons, and `var(--radius-md)` = `11px` to dropdown selects.
5. **NEVER construct dynamic Tailwind class names (e.g. `bg-${color}` or `text-${size}`).**
→ Why it fails: Tailwind's JIT compiler only includes classes that exist as complete strings in source code at build time. Dynamic class construction means the class is never generated, the style silently disappears, and the component renders with no background or wrong text size. This fails even more severely with CSS custom property values (`bg-[var(--sk-fill-blue)]` works; `bg-[var(--sk-fill-${variant})]` does not).
→ What to do instead: Write complete, static class strings. For dynamic values, use inline styles with `var(--token-name)` or a lookup object mapping variant names to complete class strings.
6. **NEVER omit `backdrop-filter: saturate(1.8) blur(20px)` from the global navigation.**
→ Why it fails: AI agents frequently render the nav as a solid opaque bar (`background: #fafafc`) because the frosted glass effect seems "decorative". On apple.com, the translucent frosted nav is a structural identity element — without it the nav looks like a different product entirely. The rgba background only works visually when the backdrop-filter is applied.
→ What to do instead: Always apply `backdrop-filter: saturate(1.8) blur(20px)` AND `-webkit-backdrop-filter: saturate(1.8) blur(20px)` to the nav in its default (non-open) state, with `background: rgba(250, 250, 252, 0.8)`.
7. **NEVER use `font-weight: 700` or higher for button labels or body copy.**
→ Why it fails: AI agents trained on Bootstrap/Material defaults use `font-weight: bold` (700) for button text. Apple's button typography is `font-weight: 400` (regular). Using 700 on a button label makes it look harsh and conflicts with the restrained character of the design system.
→ What to do instead: Button labels use `font-weight: 400`. Headlines and product names use `font-weight: 600`. Reserve 700+ for exceptional display contexts confirmed by design.
8. **NEVER use `position: absolute` for layout-level positioning of section content.**
→ Why it fails: AI agents reach for `position: absolute` to place hero text over images, because it's the first "obvious" solution. This breaks responsive behaviour — the absolutely positioned element falls outside document flow, causing layout collapse on viewports where the image aspect ratio changes. Apple's hero sections use CSS grid or flexbox with `align-items: center` and `justify-content: center` to centre content over images.
→ What to do instead: Use `display: grid` with `place-items: center` or `display: flex` with `align-items: center; justify-content: center` for overlaid hero content. Use `object-fit: cover` on background images.
9. **NEVER suppress or override focus-visible outlines with `outline: none` or `outline: 0`.**
→ Why it fails: AI agents frequently add `outline: none` to interactive elements to "clean up" the default browser focus ring. Apple's design system has a precisely engineered focus system: `--sk-focus-color: #0071e3`, `--sk-focus-offset: 1px`, and `--sk-focus-offset-container: 3px`. Removing focus outlines makes all interactive elements keyboard-inaccessible and breaks WCAG 2.1 compliance.
→ What to do instead: Always use `:focus-visible` (not `:focus`) to apply custom outlines: `outline: 2px solid var(--sk-focus-color); outline-offset: var(--sk-focus-offset)`. Never remove the outline entirely.
10. **NEVER use inline `style` objects to mix layout and token concerns in the same declaration.**
→ Why it fails: When tokens, layout values, and magic numbers are all in one inline style object, AI agents in subsequent passes cannot distinguish which values are from the token system and which are hardcoded overrides. This creates token drift — future edits patch the hardcoded value and the token falls out of sync.
→ What to do instead: Reference CSS custom properties from a stylesheet or a dedicated `tokens.css`. Inline styles should only contain the minimum dynamic values (e.g. computed widths from JS). All colour, typography, and spacing values reference `var(--token-name)`.
---
## Appendix A: Complete Token Reference
Every token extracted from the source. §0 CORE TOKENS is the primary AI signal; this appendix is reference material an AI can cross-check against when a curated role is missing.
```css
/* Colours (47) */
--r-globalnav-background-opened: #fafafc;
--r-globalnav-background-opened-dark: #161617;
--sk-focus-color: #0071e3;
--sk-focus-color-alt: rgb(0, 0, 0);
--sk-body-text-color: rgb(29, 29, 31);
--sk-body-background-color: rgb(255, 255, 255);
--sk-glyph-blue: rgb(0, 102, 204);
--sk-glyph-gray-alpha: rgba(0, 0, 0, 0.88);
--sk-glyph-gray-secondary: rgb(110, 110, 115);
--sk-glyph-gray-secondary-alpha: rgba(0, 0, 0, 0.56);
--sk-glyph-gray-secondary-alt: rgb(66, 66, 69);
--sk-glyph-gray-secondary-alt-alpha: rgba(0, 0, 0, 0.72);
--sk-fill-gray-secondary: rgb(134, 134, 139);
--sk-fill-gray-secondary-alpha: rgba(0, 0, 0, 0.48);
--sk-glyph-orange: rgb(182, 68, 0);
--sk-glyph-green: rgb(0, 128, 9);
--sk-glyph-red: rgb(227, 0, 0);
--sk-fill-secondary: rgb(250, 250, 252);
--sk-fill-tertiary: rgb(245, 245, 247);
--sk-fill-gray-tertiary: rgb(210, 210, 215);
--sk-fill-gray-tertiary-alpha: rgba(0, 0, 0, 0.16);
--sk-enviro-neutral: rgb(232, 232, 237);
--sk-fill-gray-quaternary-alpha: rgba(0, 0, 0, 0.08);
--sk-fill-blue: rgb(0, 113, 227);
--sk-fill-orange: rgb(245, 99, 0);
--sk-fill-orange-secondary: rgb(255, 249, 244);
--sk-fill-green: rgb(3, 161, 14);
--sk-fill-green-secondary: rgb(245, 255, 246);
--sk-fill-red-secondary: rgb(255, 242, 244);
--sk-fill-yellow: rgb(255, 224, 69);
--sk-fill-yellow-secondary: rgb(255, 254, 242);
--sk-productred: rgb(175, 30, 45);
--sk-enviro-green: rgb(0, 217, 89);
--sk-headline-text-color: rgb(29, 29, 31);
--sk-body-link-color: rgb(0, 102, 204);
--sk-fill: rgb(255, 255, 255);
--sk-fill-gray: rgb(29, 29, 31);
--sk-fill-gray-alpha: rgba(0, 0, 0, 0.88);
--sk-fill-gray-quaternary: rgb(232, 232, 237);
--sk-glyph: rgb(0, 0, 0);
--sk-glyph-gray: rgb(29, 29, 31);
--sk-glyph-gray-tertiary: rgb(134, 134, 139);
--sk-glyph-gray-tertiary-alpha: rgba(0, 0, 0, 0.48);
--sk-fill-red: rgb(227, 0, 0);
--border-subtle: 1px solid rgba(0, 0, 0, 0.04);
--border-action: 1px solid var(--sk-glyph-blue);
--border-transparent: 1px solid rgba(0, 0, 0, 0);
/* Typography (15) */
--r-localnav-gn-height: calc(var(--r-globalnav-height, 48px) * var(--r-localnav-text-zoom-factor));
--r-localnav-text-zoom-factor: 1;
--sk-body-font-stack: text;
--sk-footnote-font-size: 0.6em;
--sk-footnote-reduced-font-size: 0.45em;
--font-size-xs: 12px; /* 118 elements — e.g. h2 "Shop", h2 "Quick Links", h2 "Shop Special Stores" /* mined from computed styles */ */
--font-size-sm: 17px; /* 7 elements — e.g. span "Deutschland", span "Deutschland", a "Apple" /* mined from computed styles */ */
--font-size-md: 21px; /* 6 elements — e.g. p "Now supercharged by ", p "The ultimate way to ", p "The world’s best in-" /* mined from computed styles */ */
--font-size-lg: 24px; /* 45 elements — e.g. a "Shop the Latest", a "Mac", a "iPad" /* mined from computed styles */ */
--font-size-xl: 28px; /* 3 elements — e.g. p "Find the perfect gif", p "Meet the latest iPho", p "Amazing Mac. Surpris" /* mined from computed styles */ */
--font-size-2xl: 40px; /* 6 elements — e.g. h3 "iPad Air<picture cla", h3 "Apple Watch Series 1", h3 "AirPods Pro 3" /* mined from computed styles */ */
--font-size-3xl: 56px; /* 4 elements — e.g. h2 "Mother’s Day", h2 "iPhone", h2 "MacBook Neo" /* mined from computed styles */ */
--font-weight-regular: 400; /* 74 elements — e.g. h2 "Shop", h2 "Quick Links", h2 "Shop Special Stores" /* mined from computed styles */ */
--font-weight-medium: 600; /* 117 elements — e.g. h2 "Mother’s Day", h2 "iPhone", h2 "MacBook Neo" /* mined from computed styles */ */
--line-height-normal: 16.0005px; /* 106 elements — e.g. h2 "Shop", h2 "Quick Links", h2 "Shop Special Stores" /* mined from computed styles */ */
/* Spacing (40) */
--sk-focus-offset: 1px;
--sk-focus-offset-container: 3px;
--r-globalnav-height: 48px;
--r-globalnav-segmentbar-height: 0px;
--r-localnav-viewport-large-min-width: 1024px;
--r-localnav-viewport-medium-min-width: 834px;
--r-localnav-viewport-medium-max-width: 1023px;
--r-localnav-viewport-small-min-width: 320px;
--r-localnav-viewport-small-max-width: 833px;
--sk-default-stacked-margin: 0.4em;
--sk-paragraph-plus-element-margin: 0.8em;
--sk-paragraph-plus-headline-margin: 1.6em;
--sk-footnote-offset-top: -0.5em;
--sk-footnote-reduced-offset-top: -.86em;
--hero-content-height: 650px;
--promo-content-height: 500px;
--media-gallery-section-padding-bottom: var(--media-gallery-dotnav-gap);
--media-gallery-button-margin-top: 13px;
--media-gallery-dotnav-gap: 10px;
--media-gallery-dotnav-iconcontrol-margin-top: unset;
--media-gallery-dotnav-iconcontrol-margin-right: calc(10px + env(safe-area-inset-right));
--media-gallery-genre-m-dot-padding: 0.25em;
--media-gallery-tile-width: 275px;
--media-gallery-tile-height: 496px;
--fam-gallery-tile-height: 254px;
--media-gallery-headline-margin-bottom: 17px;
--media-gallery-bottom-content-padding-left: 15px;
--media-gallery-bottom-content-padding-bottom: 30px;
--space-xs: 11px; /* 2 elements — e.g. section .ac-gf-sosumi, section .ac-gf-footer /* mined from computed styles */ */
--space-sm: 12px; /* 8 elements — e.g. section .section, section .section, section .section /* mined from computed styles */ */
--space-md: 20px; /* 2 elements — e.g. nav .ac-gf-directory, nav .ac-gf-directory /* mined from computed styles */ */
--space-lg: 53px; /* 6 elements — e.g. div .tile-wrapper, div .tile-wrapper, div .tile-wrapper /* mined from computed styles */ */
--space-xl: 56px; /* 6 elements — e.g. div .tile-wrapper, div .tile-wrapper, div .tile-wrapper /* mined from computed styles */ */
--space-2xl: 59px; /* 6 elements — e.g. div .tile-wrapper, div .tile-wrapper, div .tile-wrapper /* mined from computed styles */ */
--space-3xl: 114px; /* 1 element — e.g. main .main /* mined from computed styles */ */
--globalnav-height: 48px;
--sk-headline-plus-first-element-margin: 0.8em;
--sk-headline-plus-headline-margin: 0.4em;
--media-gallery-tile-gap: 13px;
--media-gallery-bottom-content-padding-right: 15px;
/* Radius (7) */
--radius-sm: 8px; /* 3 elements — e.g. a .ac-ls-button "Weiter", a .ac-ls-button "Weiter", a .ac-ls-button "Weiter" /* mined from computed styles */ */
--radius-md: 11px; /* 1 element — e.g. div .ac-ls-dropdown-select "Deutschland" /* mined from computed styles */ */
--radius-lg: 50%; /* 1 element — e.g. button .media-gallery-dotnav-iconcontrol /* mined from computed styles */ */
--radius-sm: 8px;
--radius-md: 11px;
--radius-pill: 980px;
--radius-circle: 50%;
/* Effects (11) */
--r-localnav-height: calc(48px * var(--r-localnav-text-zoom-factor));
--r-localnav-stacked-height: calc(63px * var(--r-localnav-text-zoom-factor));
--r-localnav-viewport-large-query: min-width(1024px);
--r-localnav-viewport-medium-query: min-width(834px);
--r-localnav-viewport-small-query: min-width(320px);
--sk-link-disabled-opacity: 0.42;
--globalnav-collective-height: var(--globalnav-height);
--media-gallery-bottom-copy-duration: 600ms;
--media-gallery-slide-duration: 800ms;
--media-gallery-longnote-position-left: 0;
----backdrop-filter-role_navigation: backdrop-filter: saturate(1.8) blur(20px); /* Backdrop filter from role_navigation /* reconstructed */ */
/* Motion (34) */
----motion-globalnav-chevron-slide-in-hover: @keyframes globalnav-chevron-slide-in-hover {
0% { opacity: 0; transform: translate(-4px); }
100% { opacity: 1; transform: translate(0px); }
}; /* @keyframes globalnav-chevron-slide-in-hover */
----motion-globalnav-chevron-hover-off: @keyframes globalnav-chevron-hover-off {
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0.8); }
}; /* @keyframes globalnav-chevron-hover-off */
----motion-globalnav-flyout-slide-forward-next: @keyframes globalnav-flyout-slide-forward-next {
0% { opacity: 0; transform: translate(8px); }
100% { opacity: 1; transform: translate(0px); }
}; /* @keyframes globalnav-flyout-slide-forward-next */
----motion-globalnav-flyout-slide-forward-previous: @keyframes globalnav-flyout-slide-forward-previous {
0% { opacity: 1; transform: translate(0px); }
100% { opacity: 0; transform: translate(-8px); }
}; /* @keyframes globalnav-flyout-slide-forward-previous */
----motion-globalnav-flyout-slide-back-previous: @keyframes globalnav-flyout-slide-back-previous {
0% { opacity: 1; transform: translate(0px); }
100% { opacity: 0; transform: translate(8px); }
}; /* @keyframes globalnav-flyout-slide-back-previous */
----motion-globalnav-flyout-slide-back-next: @keyframes globalnav-flyout-slide-back-next {
0% { opacity: 0; transform: translate(-8px); }
100% { opacity: 1; transform: translate(0px); }
}; /* @keyframes globalnav-flyout-slide-back-next */
----motion-globalnav-scrim-height-change: @keyframes globalnav-scrim-height-change {
0% { height: var(--r-globalnav-previous-flyout-height); }
100% { height: var(--r-globalnav-next-flyout-height); }
}; /* @keyframes globalnav-scrim-height-change */
----motion-globalnav-fade-in: @keyframes globalnav-fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes globalnav-fade-in */
----motion-globalnav-search-fade: @keyframes globalnav-search-fade {
0% { opacity: 0; transform: translateY(0px); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes globalnav-search-fade */
----motion-globalnav-search-fade-and-slide: @keyframes globalnav-search-fade-and-slide {
0% { opacity: 0; transform: translateY(calc(var(--r-globalnav-search-shift-vertical) * -1)); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes globalnav-search-fade-and-slide */
----motion-globalnav-search-fade-and-slide-to-close: @keyframes globalnav-search-fade-and-slide-to-close {
0% { opacity: 0; transf… <0.2KB elided>; /* @keyframes globalnav-search-fade-and-slide-to-close */
----motion-globalnav-search-slide-top-to-bottom: @keyframes globalnav-search-slide-top-to-bottom {
0% { transform: translateY(calc(var(--r-globalnav-suggested-links-height) * -1)); }
100% { transform: translateY(0px); }
}; /* @keyframes globalnav-search-slide-top-to-bottom */
----motion-globalnav-search-slide-bottom-to-top: @keyframes globalnav-search-slide-bottom-to-top {
0% { transform: translateY(var(--r-globalnav-suggested-links-height)); }
100% { transform: translateY(0px); }
}; /* @keyframes globalnav-search-slide-bottom-to-top */
----motion-globalnav-search-input-intro: @keyframes globalnav-search-input-intro {
0% { opacity: 0; transform: translateY(var(--r-globalnav-search-input-vertical-shift)); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes globalnav-search-input-intro */
----motion-globalnav-search-input-outro: @keyframes globalnav-search-input-outro {
0% { opacity: 1; transform: translateY(0px); }
100% { opacity: 0; transform: translateY(var(--r-globalnav-search-input-vertical-shift)); }
}; /* @keyframes globalnav-search-input-outro */
----motion-progress-indicator-animating: @keyframes progress-indicator-animating {
0% { opacity: 1; }
12.5% { opacit… <0.2KB elided>; /* @keyframes progress-indicator-animating */
----motion-dotnav-shift-start-1: @keyframes dotnav-shift-start-1 {
0% { translate: calc(8px*var(--sk-dotnav-logical-factor)); }
100% { translate: 0px; }
}; /* @keyframes dotnav-shift-start-1 */
----motion-dotnav-shift-end-1: @keyframes dotnav-shift-end-1 {
0% { translate: calc(-8px*var(--sk-dotnav-logical-factor)); }
100% { translate: 0px; }
}; /* @keyframes dotnav-shift-end-1 */
----motion-dotnav-shift-start-2: @keyframes dotnav-shift-start-2 {
0% { translate: calc(16px*var(--sk-dotnav-logical-factor)); }
100% { translate: 0px; }
}; /* @keyframes dotnav-shift-start-2 */
----motion-dotnav-shift-end-2: @keyframes dotnav-shift-end-2 {
0% { translate: calc(-16px*var(--sk-dotnav-logical-factor)); }
100% { translate: 0px; }
}; /* @keyframes dotnav-shift-end-2 */
----motion-dotnav-shift-start-3: @keyframes dotnav-shift-start-3 {
0% { translate: calc(24px*var(--sk-dotnav-logical-factor)); }
100% { translate: 0px; }
}; /* @keyframes dotnav-shift-start-3 */
----motion-dotnav-shift-end-3: @keyframes dotnav-shift-end-3 {
0% { translate: calc(-24px*var(--sk-dotnav-logical-factor)); }
100% { translate: 0px; }
}; /* @keyframes dotnav-shift-end-3 */
----motion-dotnav-shift-start-expand: @keyframes dotnav-shift-start-expand {
0% { translate: calc(-24px*var(--sk-dotnav-logical-factor)); }
19% { translate: calc(-24px*var(--sk-dotnav-logical-factor)); }
100% { translate: 0px; }
}; /* @keyframes dotnav-shift-start-expand */
----motion-dotnav-shift-end-expand: @keyframes dotnav-shift-end-expand {
0% { translate: calc(20px*var(--sk-dotnav-logical-factor)); }
19% { translate: calc(20px*var(--sk-dotnav-logical-factor)); }
100% { translate: 0px; }
}; /* @keyframes dotnav-shift-end-expand */
----motion-dotnav-become-visible: @keyframes dotnav-become-visible {
0% { opacity: 0; scale: 0; }
100% { opacity: 1; scale: 1; }
}; /* @keyframes dotnav-become-visible */
----motion-dotnav-become-invisible: @keyframes dotnav-become-invisible {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes dotnav-become-invisible */
----motion-dotnav-timed-animation: @keyframes dotnav-timed-animation {
0% { width: var(--sk-dotnav-size); }
100% { width: calc(100% - var(--sk-dotnav-margin-inline)*2); }
}; /* @keyframes dotnav-timed-animation */
----motion-dotnav-timed-dot-expand: @keyframes dotnav-timed-dot-expand {
0% { left: calc(50% - var(--sk-dotnav-size)/2); width: 8px; }
100% { left: calc(50% - 16px); width: 32px; }
}; /* @keyframes dotnav-timed-dot-expand */
----motion-dotnav-timed-dot-shrink: @keyframes dotnav-timed-dot-shrink {
0% { left: calc(50% - 16px); width: 32px; }
100% { left: calc(50% - var(--sk-dotnav-size)/2); width: 8px; }
}; /* @keyframes dotnav-timed-dot-shrink */
----motion-inline-media-spin: @keyframes inline-media-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}; /* @keyframes inline-media-spin */
--duration-fast: 0.1s; /* 1 element — e.g. button /* mined from computed styles */ */
--duration-base: 0.24s; /* 6 elements — e.g. div, div, span /* mined from computed styles */ */
--duration-slow: 0.32s; /* 61 elements — e.g. button, button, button /* mined from computed styles */ */
--ease-default: ease; /* 184 elements — e.g. button, button, button /* mined from computed styles */ */
```
More from the gallery
Browse all kits →You may also like
atlassian.com
MITEnterprise design system for Atlassian's marketing site, featuring bold brand colours, custom typography, and structured spacing tokens built for large-scale SaaS platforms
Layout06
boldsaaslanding-pagelight
github.com
MITGitHub's production design system with 568 CSS custom properties, featuring clean typography, accessible colour tokens, and motion primitives built for developer platforms and collaborative workflows
Layout04
darkdeveloper-toolsaas
Customer.io
MITDark SaaS design system with mint-green accents and clean typography, built for product dashboards and developer-focused platforms
Layout011
darksaasdeveloper-tooldashboard