Components

Every Apple UI component, visualized and documented. All 7 button variants, navigation patterns, form elements, cards, and tiles.

Buttons — 7 Variants

All Button Variants

1 radius family · 1 accent color
button-primary — Blue pill, 17px/400, 11px×22px, Action Blue #0066cc
button-secondary-pill — Ghost pill, 1px border, same cadence
button-dark-utility — Ink bg, 14px, sm radius (8px), nav actions
button-pearl-capsule — Pearl bg, 14px, md radius (11px), product cards
button-store-hero — Large, 18px/300 weight, 14px×28px, store landing
button-icon-circular — 44px circle, translucent chip bg, overflow
🎯 transform: scale(0.95) on press — Apple micro-interaction🎯 Focus ring: 2px solid #0071e3🎯 Single blue accent — no secondary brand color
Navigation Components

global-nav

Fixed top bar
StoreMaciPadiPhoneWatch🔍
Surface: #000000 · Height: 44px · Type: nav-link (12px/400) · Opacity: 0.7

sub-nav-frosted

Product-specific nav
iPhoneOverviewTech SpecsBuy
Height: 52px · Backdrop blur: 20px · Surface: Parchment @ 80% opacity
Surfaces & Inputs

product-tile-dark

Full-bleed · 80px padding

MacBook Pro

M4 chip. Built for Apple Intelligence.

Product shadow: rgba(0,0,0,0.22) 3px 5px 30px — only on imagery, never on UI

search-input + configurator chips

Pill-shaped inputs
🔍
Configurator option chips:
Black$999
White$999
Purple$1,099
Green$999
Search: pill radius · 44px height · 17px body. Chips: pill radius, selected = 2px primary-focus border
Store Patterns

floating-sticky-bar

iPhone buy page floating bar
iPhone 17 Pro$1,199
Height: 64px · Parchment @85% · backdrop-filter · fixed bottom on scroll

store-utility-card

Accessories grid · 18px radius
🎧
AirPods Pro
$249
Buy →
⌚
Apple Watch
$399
Buy →
📱
MagSafe Case
$49
Buy →
1px hairline · lg radius (18px) · 24px padding · image at sm radius (8px)
Footer — Dense Link Columns

dense-link footer pattern

2.41 line-height
The 2.41 line-height makes dense columns scannable — Apple's signature footer pattern
All components documented in the Apple DESIGN.md spec