--- version: alpha name: Apple description: "Near-white rooms, black-ink type, and one blue that only ever means go." colors: on-surface-variant: "#6E6E73" on-surface: "#1D1D1F" surface: "#F5F5F7" outline: "rgba(0, 0, 0, 0.16)" primary: "#01DDFF" card: "#FFFFFF" ink-eyebrow: "#424245" ink-tertiary: "#86868B" link-blue: "#0066CC" action-blue: "#0071E3" bright-blue: "#2997FF" black: "#000000" eyebrow-orange: "#B64400" intelligence-gradient: "#0079D0" control-fill: "rgba(210, 210, 215, 0.64)" alpha-ink-ramp: "rgba(0, 0, 0, 0.88)" typography: footnote: fontFamily: SF Pro Text fontSize: 8.4px fontWeight: 400 lineHeight: 10.8005px letterSpacing: -0.224px nav-label: fontFamily: SF Pro Text fontSize: 12px fontWeight: 400 lineHeight: 12px letterSpacing: -0.12px caption-footer-link: fontFamily: SF Pro Text fontSize: 12px fontWeight: 400 lineHeight: 16.0005px letterSpacing: -0.12px eyebrow: fontFamily: SF Pro Text fontSize: 12px fontWeight: 400 lineHeight: 16.0005px letterSpacing: -0.12px body: fontFamily: SF Pro Text fontSize: 14px fontWeight: 400 lineHeight: 18.0008px letterSpacing: -0.224px body-loose: fontFamily: SF Pro Text fontSize: 14px fontWeight: 400 lineHeight: 20.0003px letterSpacing: -0.224px product-name: fontFamily: SF Pro Text fontSize: 17px fontWeight: 400 lineHeight: 21.0012px letterSpacing: -0.374px link-local-nav: fontFamily: SF Pro Text fontSize: 17px fontWeight: 400 lineHeight: 25px letterSpacing: -0.374px card-title: fontFamily: SF Pro Text fontSize: 19.89px fontWeight: 400 lineHeight: 29.25px letterSpacing: -0.374px card-header: fontFamily: SF Pro Text fontSize: 24px fontWeight: 400 lineHeight: 28px letterSpacing: 0.216px shelf-header: fontFamily: SF Pro Text fontSize: 28px fontWeight: 400 lineHeight: 32px letterSpacing: 0.196px tile-headline: fontFamily: SF Pro Text fontSize: 40px fontWeight: 400 lineHeight: 44px letterSpacing: 0em section-headline: fontFamily: SF Pro Text fontSize: 56px fontWeight: 400 lineHeight: 60px letterSpacing: -0.28px page-title: fontFamily: SF Pro Text fontSize: 80px fontWeight: 400 lineHeight: 84px letterSpacing: -1.2px rounded: home-tiles-gallery-grounds-footer: 0px locale-continue-gallery-artwork: 8px locale-dropdown: 11px cards-product-nav-cards: 18px card-scrims-bottom-corners: 0px paddle-nav-shop-shelves: 36px paddle-nav-card-shelves: 56px dot-nav-track: 999px pill-buttons: 980px spacing: control-pad-y-small: 8px control-pad-y-large: 11px section-gap: 12px cta-gap-tight: 14px control-pad-x-small: 15px ribbon-pad: 16px cta-gap-legal-pad: 17px product-nav-pad: 18px control-pad-x-large: 21px card-padding: 28px tile-band-short: 53px tile-band-tall: 56px shop-header-band: 80px chat-band: 90px main-top-pad: 114px --- # Apple — Style Reference > Near-white rooms, black-ink type, and one blue that only ever means go. **Theme:** light Two systems share one canvas here. The home page is a full-bleed tile grid — square-cornered colour bands butted edge to edge with white gutters, no shadow anywhere; the Store, Shop Mac and Shop iPad pages are a card system on the identical near-white ground, every card an 18px-rounded white plane under one soft, right-leaning shadow. The palette is three neutrals and a blue: almost-black ink, near-white canvas, white cards, and two blues that split the work — one for links, one for filled actions. The signature move is the two-tone headline: one string, one size, one weight, first clause in ink and second in grey, so a sentence carries its own hierarchy. Type is SF Pro in two cuts on a single heavy weight for anything that counts as a heading — the trust is in size and tracking, never in going bolder. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink | `#1D1D1F` | `--color-ink` | Default text everywhere. Also one control fill (the locale switcher's Continue) and the quicklink outline. Never a page background. | | Canvas | `#F5F5F7` | `--color-canvas` | The ground: home tile wrappers, footer, neutral pill. Also the ink for headlines on black tiles — the value inverts rather than adding a second near-white. | | Card | `#FFFFFF` | `--color-surface` | Card fill, ribbon fill, and the ink on every blue-filled button. The one raised surface. | | Ink Secondary | `#6E6E73` | `--color-ink-secondary` | Text only: the second clause of a two-tone headline, sub-copy, footnotes. The grey the two-tone move depends on. | | Ink Eyebrow | `#424245` | `--color-ink-eyebrow` | Text only, almost entirely on `h3` — the neutral eyebrow above Shop card titles. Sits between Ink and Ink Secondary; substitute neither. | | Ink Tertiary | `#86868B` | `--color-ink-tertiary` | Text only: paddle chevrons and their hidden labels. The quietest ink, for controls, not copy. | | Link Blue | `#0066CC` | `--color-link` | Inline links, and the ink-plus-border of the secondary pill. The site's `--sk-body-link-color`. Never a fill. | | Action Blue | `#0071E3` | `--color-action` | Fill only, under white text, in a 980px pill. The colour that means a committed action — its restriction is the signal. | | Bright Blue | `#2997FF` | `--color-link-dark` | The home link blue lifted for dark and photographic tiles, and the secondary pill's ink and border on black. Never on canvas. | | Black | `#000000` | `--color-black` | Inverted tiles, the entertainment gallery, one dark product card. Also neutral-pill ink and the base of every translucent ink. | | Highlight Cyan | `#01DDFF` | `--color-highlight` | Fill behind two words of one shelf headline — a marker stripe, not a surface. Once per page or not at all. | | Eyebrow Orange | `#B64400` | `--color-eyebrow-orange` | Text only, at eyebrow size: PRE-ORDER NOW, NEW. Editorial urgency, never a button. | | Intelligence Gradient | `#0079D0 → #9E52D8 → #DA365C → #D04901` | `--gradient-intelligence` | The four-stop wash on the words "Apple Intelligence." — a proper noun's treatment, not a brand gradient. Never behind a panel. | | Control Fill | `rgba(210, 210, 215, 0.64)` | `--color-control-fill` | The translucent puck under carousel paddles, so an arrow floats over card and canvas alike. | | Hairline | `rgba(0, 0, 0, 0.16)` | `--color-hairline` | The footer's legal rule and mini-shop divider. Borders are near-absent; this is where they live. | | Alpha Ink Ramp | `rgba(0, 0, 0, 0.88)` / `0.8` / `0.72` / `0.56` | `--color-ink-alpha-*` | Chrome ink, descending: section titles, nav labels, directory links, legal copy. Four opacities of black, not four greys. | ## Tokens — Typography ### SF Pro Display — the headline register, 24px to 80px, every measured heading at 600, tracking flipping sign as size drops · `--font-display` - **Substitute:** SF Pro, -apple-system / BlinkMacSystemFont, Inter - **Weights:** 400, 600, 700 - **Sizes:** 16.8px, 24px, 28px, 40px, 56px, 80px - **Line height:** 19.2px–84px (1.05 at 80px, 1.14 at 28px — tighter as it grows) - **Letter spacing:** −1.2px at 80px, −0.28px at 56px, normal at 40px, +0.196px at 28px, +0.216px at 24px - **Role:** Page titles, section headlines, tile headlines, shelf headers. ### SF Pro Text — body, labels, nav, product names, prices, footnotes; tracking negative at every size · `--font-text` - **Substitute:** SF Pro, -apple-system / BlinkMacSystemFont, Helvetica Neue - **Weights:** 300, 400, 600 - **Sizes:** 8.4px, 12px, 12.6px, 14px, 14.04px, 17px, 19.89px, 34px, 37px - **Line height:** 10.8px–54.4px (12px/12px flat in the nav, 17px/25px at its loosest) - **Letter spacing:** −0.374px at 17px, −0.224px at 14px, −0.12px at 12px - **Role:** Everything read rather than announced, plus the caps eyebrows at 12px/600. ### Type Scale | Role | Size | Line Height | Letter Spacing | Token | |------|------|-------------|----------------|-------| | Footnote | 8.4px / 400 | 10.8005px | −0.224px | `--text-footnote` | | Nav label | 12px / 400 | 12px | −0.12px | `--text-nav` | | Caption, footer link | 12px / 400 | 16.0005px | −0.12px | `--text-caption` | | Eyebrow (caps) | 12px / 600 | 16.0005px | −0.12px | `--text-eyebrow` | | Body | 14px / 400 | 18.0008px | −0.224px | `--text-body` | | Body loose | 14px / 400 | 20.0003px | −0.224px | `--text-body-loose` | | Product name | 17px / 600 | 21.0012px | −0.374px | `--text-product` | | Link, local nav | 17px / 400 | 25px | −0.374px | `--text-link` | | Card title | 19.89px / 600 | 29.25px | −0.374px | `--text-card-title` | | Card header | 24px / 600 | 28px | +0.216px | `--text-card-header` | | Shelf header | 28px / 600 | 32px | +0.196px | `--text-shelf` | | Tile headline | 40px / 600 | 44px | normal | `--text-tile` | | Section headline | 56px / 600 | 60px | −0.28px | `--text-headline` | | Page title | 80px / 600 | 84px | −1.2px | `--text-display` | ## Tokens — Spacing & Shapes **Base unit:** 4px in the block scale (8, 12, 16, 28, 56, 80) — the pill controls sit deliberately off it at 15px and 21px **Density:** comfortable ### Spacing Scale | Name | Value | Token | |------|-------|-------| | Control pad Y, small | 8px | `--spacing-1` | | Control pad Y, large | 11px | `--spacing-2` | | Section gap | 12px | `--spacing-3` | | CTA gap, tight | 14px | `--spacing-4` | | Control pad X, small | 15px | `--spacing-5` | | Ribbon pad | 16px | `--spacing-6` | | CTA gap, legal pad | 17px | `--spacing-7` | | Product-nav pad | 18px | `--spacing-8` | | Control pad X, large | 21px | `--spacing-9` | | Card padding | 28px | `--spacing-10` | | Tile band, short | 53px | `--spacing-11` | | Tile band, tall | 56px | `--spacing-12` | | Shop header band | 80px | `--spacing-13` | | Chat band | 90px | `--spacing-14` | | Main top pad | 114px | `--spacing-15` | ### Border Radius | Element | Value | |---------|-------| | Home tiles, gallery grounds, footer | 0px | | Locale Continue, gallery artwork | 8px | | Locale dropdown | 11px | | Cards, product-nav cards | 18px | | Card scrims, bottom corners | 0px 0px 18px 18px | | Paddle nav, Shop shelves | 36px | | Play CTA, dot-nav control | 50% | | Paddle nav, card shelves | 56px | | Chat icon | 100% | | Dot-nav track | 999px | | Pill buttons | 980px | ### Shadows | Name | Value | Token | |------|-------|-------| | Card | `rgba(0, 0, 0, 0.08) 2px 4px 12px 0px` | `--shadow-card` | | Gallery art | `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px` | `--shadow-art` | ### Layout - **Page max-width:** `not measured` — no width row in the census; in the captures the Shop pages hold a centred column, home tiles run edge to edge - **Section gap:** 12px (`.section.section-hero`, `.section.section-promo`) - **Card padding:** 28px (`.rf-recommcard-content.tile.as-util-relatedlink`) - **Element gap:** 14px and 17px between stacked CTAs (`.tile-ctas`) ## Components ### Global Nav Bar **Role:** The one persistent element on every page — a band of product names that never announces where you are. `.globalnav.js` paints one `rgba(255, 255, 255, 0.8)` fill on the home page; `.globalnav-link-text` sets its 44 spans across all pages at 12px/400 SF Pro Text, −0.12px, `rgba(0, 0, 0, 0.8)`, on a 12px line-height — leading equal to size, so the labels read as a flat rule rather than a row of blocks. The site declares `--globalnav-height: 44px` *(declared, not painted)*. No fill, border or radius on the links. ### Primary Pill Button **Role:** The committed action — Buy, Shop, Learn more. `.button` as an `` paints `#0071E3` under `#FFFFFF` ink at radius 980px, no border, no shadow, in two sizes: 14px/400 with 18.0008px line-height and 8px 15px padding (6 on the home page, "Learn more"), and 17px/400 with 20.0002px line-height and 11px 21px padding (2, "Shop"). Its 22 filled instances across home, Shop Mac and Shop iPad make it the most-repeated control in the capture. Padding runs roughly 1:1.9 vertical to horizontal — that ratio gives the pill its stretched proportion. ### Secondary Pill Button **Role:** The alternative route, paired to the right of a primary. `.button.button-secondary` carries no fill: 1px border and matching ink in `#0066CC`, radius 980px, shadow none. It paints at 17px/400/20.0002px with 11px 21px padding (1, "Shop iPhone") and 14px/400/18.0008px with 8px 15px padding (4, "Pre-order") — the primary's two sizes exactly, so a pair sits on one baseline. On dark ground it swaps border and ink to `#2997FF` (1, "Buy"). Its neutral twin `.rs-quicklinks-button.button.button-secondary-neutral` (5, Store page) takes a 1px `#1D1D1F` border and `#1D1D1F` ink at 14px/400/20.0003px, 8px 15px padding — the outline that is not blue, for utilities. ### Neutral Pill Button **Role:** The action on photography, where blue would fight the artwork. `.button.button-neutral.media-gallery-button` fills `#F5F5F7` with `#000000` ink at radius 980px, shadow none, in two sizes mirroring the blue pills: 17px/400/20.0002px at 11px 21px padding (9) and 14px/400/18.0008px at 8px 15px padding (9), both on the home page. Its sibling `.button.button-neutral` paints once as "Add to calendar" — same fill, ink, radius, 11px 21px padding. Note the ink: pure `#000000`, not the `#1D1D1F` used elsewhere, because this pill sits on imagery. ### Product Card **Role:** The unit of the Shop pages — one product, one price, one image, lifted off the canvas. `.rf-ccard-content.rf-ccard-content-withfullimg` measures two ways: light (94 across the Shop pages) fills `#FFFFFF`, dark (16) fills `#000000` for hero products. Both share radius 18px, `padding 0px 0px`, no border, card shadow `rgba(0, 0, 0, 0.08) 2px 4px 12px 0px`. Zero padding is the point — imagery runs to the corner, and copy is inset by a companion scrim, `.rf-ccard-scrim`, filling `#FFFFFF` at 28px 28px padding with radius `0px 0px 18px 18px` so its rounding matches only the corners it touches. ### Recommendation Card **Role:** The copy-first card — a title, a line of sub-copy, a plus to expand. `.rf-recommcard-content.tile.as-util-relatedlink` (41 across the Shop pages) fills `#FFFFFF` at radius 18px, 28px 28px padding, no border, same `rgba(0, 0, 0, 0.08) 2px 4px 12px 0px` shadow. Its title is the card-title style — 19.89px/600, 29.25px, −0.374px in `#1D1D1F` (41 `h3`) — and its expand affordance a "+" at 12px/400 in `#6E6E73` (`.rf-recommcard-content-moretext`). 28px on four sides is the card padding. ### Hero Card **Role:** The image-led card at the head of a shelf, with the CTA inside the card. `.rf-hcard-content.tile.as-util-relatedlink` (16 on Shop Mac and Shop iPad) fills `#FFFFFF` at radius 18px, `padding 0px 0px`, card shadow. Its copy well `.rf-hcard-scrim` (16) paints no fill — `padding 0px 28px`, radius `0px 0px 18px 18px` — inheriting the card beneath, only the horizontal inset its own. The button, `.rf-hcard-cta.button` (16, "Buy - MacBook Neo"), is the small primary: `#0071E3` fill, `#FFFFFF` ink, 14px/400/18.0008px, 8px 15px padding, radius 980px. Its eyebrow can run `#B64400` (`.rf-hcard-eyebrow-content`). ### Eyebrow Label **Role:** The category stamp above a card title — APPLE SPECIALIST, PRE-ORDER NOW, LIMITED TIME. `.rf-ccard-content-header-eyebrow` sets 12px/600 SF Pro Text, 16.0005px, −0.12px, in caps, and colour carries the status: `#424245` for a neutral category (61), `#B64400` for urgency (21, shared with the `.badge` violator), `#FF791B` for LIMITED TIME (3), `#F5F5F7` when the card beneath is dark (6). Tracking stays negative even in caps — never letterspaced open. No fill, no border, no radius. ### Home Tile **Role:** The home page's structural unit — a full-width band holding a headline, a subhead and a CTA pair. `.tile-wrapper` fills `#F5F5F7` at radius 0, `padding 53px 0px` (6) or `56px 0px` (2), no border, no shadow; `.tile-wrapper.theme-dark` swaps the fill to `#000000` at 53px (1) or `#5E7EAF` at 56px (1), square corners intact. Zero horizontal padding lets a tile run edge to edge; the white gutter between tiles is the body ground showing through, declared `--sk-body-background-color: #FFFFFF` *(declared, not painted)*. Headlines are `.tile-headline.typography-tile-headline` at 56px/600/60px/−0.28px, or 40px/600/44px at normal tracking on half-width tiles, in `#1D1D1F` — `#F5F5F7` when the tile is dark. CTAs sit in `.tile-ctas` at a 14px or 17px gap. ### Media Gallery Card **Role:** The entertainment shelf — poster artwork scrolled sideways, each panel its own room. `.media-gallery-wrapper-link.fam-media-gallery-wrapper-link` (18 on the home page) fills `#000000` with `#2997FF` link ink at 17px/400/25px/−0.374px, radius 0, no border, no shadow. The artwork behind it, `.media-gallery-bg.media-gallery-bg-music`, carries the capture's second shadow — `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px` at radius 8px — wider and heavier than the card shadow, tuned for album art. Backgrounds are painted per panel: `#F4F8FB`, `#9FC6F4`, `#2D2A45`, `#002C66`, `#524617`, `#56412B`, and `#7424B5` or `#EA33C0` on music. A `rgba(29, 29, 31, 0.4)` scrim over `.media-gallery-contents` (18) keeps text legible on the brightest. ### Carousel Paddle Nav **Role:** The chevron at the edge of a horizontal shelf. `.paddlenav-arrow.paddlenav-arrow-next` (20 across the Shop pages) is a `