Meta Design System

---

version: alpha

name: Meta-design-analysis

description: Meta's design system spans hardware commerce (Quest VR, Ray-Ban Meta AI glasses) and brand surfaces with a confident product-merchandising voice. The system pairs a stark white canvas with full-bleed photographic product cards, a confident Optimistic VF wordmark/headline face, dual-CTA hero patterns (black primary + outlined secondary), and a saturated cobalt blue (#0064E0) for in-product purchase actions. Pill-shaped 100px-radius buttons, generous 24-32px card rounding, and tight three-tier text hierarchy carry across homepage, product detail (PDP), buy-now configurator, and accessory subpages.

colors:

primary: "#0064e0"

primary-deep: "#0457cb"

primary-soft: "#0091ff"

on-primary: "#ffffff"

ink-button: "#000000"

on-ink-button: "#ffffff"

fb-blue: "#1876f2"

meta-link: "#385898"

oculus-purple: "#a121ce"

success: "#31a24c"

success-bg: "#24e400"

attention: "#f2a918"

warning: "#f7b928"

warning-bg: "#ffe200"

critical: "#e41e3f"

critical-strong: "#f0284a"

canvas: "#ffffff"

surface-soft: "#f1f4f7"

ink-deep: "#0a1317"

ink: "#1c1e21"

charcoal: "#444950"

slate: "#4b4c4f"

steel: "#5d6c7b"

stone: "#8595a4"

hairline: "#ced0d4"

hairline-soft: "#dee3e9"

disabled-text: "#bcc0c4"

typography:

hero-display:

fontFamily: Optimistic VF

fontSize: 64px

fontWeight: 500

lineHeight: 1.16

fontFeature: "ss01, ss02"

display-lg:

fontFamily: Optimistic VF

fontSize: 48px

fontWeight: 500

lineHeight: 1.17

fontFeature: "ss01, ss02"

heading-lg:

fontFamily: Optimistic VF

fontSize: 36px

fontWeight: 500

lineHeight: 1.28

fontFeature: "ss01, ss02"

heading-md:

fontFamily: Optimistic VF

fontSize: 28px

fontWeight: 300

lineHeight: 1.21

fontFeature: "ss01, ss02"

heading-sm:

fontFamily: Optimistic VF

fontSize: 24px

fontWeight: 500

lineHeight: 1.25

fontFeature: "ss01, ss02"

subtitle-lg:

fontFamily: Optimistic VF

fontSize: 18px

fontWeight: 700

lineHeight: 1.44

subtitle-md:

fontFamily: Optimistic VF

fontSize: 18px

fontWeight: 400

lineHeight: 1.44

body-md-bold:

fontFamily: Optimistic VF

fontSize: 16px

fontWeight: 700

lineHeight: 1.50

letterSpacing: -0.16px

body-md:

fontFamily: Optimistic VF

fontSize: 16px

fontWeight: 400

lineHeight: 1.50

letterSpacing: -0.16px

body-sm-bold:

fontFamily: Optimistic VF

fontSize: 14px

fontWeight: 700

lineHeight: 1.43

letterSpacing: -0.14px

body-sm:

fontFamily: Optimistic VF

fontSize: 14px

fontWeight: 400

lineHeight: 1.43

letterSpacing: -0.14px

caption-bold:

fontFamily: Optimistic VF

fontSize: 12px

fontWeight: 700

lineHeight: 1.33

caption:

fontFamily: Optimistic VF

fontSize: 12px

fontWeight: 400

lineHeight: 1.33

button-md:

fontFamily: Optimistic VF

fontSize: 14px

fontWeight: 700

lineHeight: 1.43

letterSpacing: -0.14px

link-md:

fontFamily: Optimistic VF

fontSize: 16px

fontWeight: 700

lineHeight: 1.50

letterSpacing: -0.16px

rounded:

xs: 2px

sm: 4px

md: 6px

lg: 8px

xl: 16px

xxl: 24px

xxxl: 32px

feature: 40px

full: 100px

circle: 9999px

spacing:

xxs: 4px

xs: 8px

sm: 10px

md: 12px

base: 16px

lg: 20px

xl: 24px

xxl: 32px

xxxl: 40px

section-sm: 48px

section: 64px

section-lg: 80px

hero: 120px

components:

button-primary:

backgroundColor: "{colors.ink-button}"

textColor: "{colors.on-ink-button}"

typography: "{typography.button-md}"

rounded: "{rounded.full}"

padding: "14px 30px"

button-primary-pressed:

backgroundColor: "{colors.charcoal}"

textColor: "{colors.on-ink-button}"

button-primary-disabled:

backgroundColor: "{colors.disabled-text}"

textColor: "{colors.canvas}"

button-buy-cta:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.button-md}"

rounded: "{rounded.full}"

padding: "14px 30px"

button-buy-cta-pressed:

backgroundColor: "{colors.primary-deep}"

textColor: "{colors.on-primary}"

button-secondary:

backgroundColor: "transparent"

textColor: "{colors.ink-deep}"

typography: "{typography.button-md}"

rounded: "{rounded.full}"

padding: "12px 28px"

border: "2px solid {colors.ink-deep}"

button-ghost:

backgroundColor: "transparent"

textColor: "{colors.ink-deep}"

typography: "{typography.button-md}"

rounded: "{rounded.full}"

padding: "10px 22px"

border: "2px solid rgba(10, 19, 23, 0.12)"

button-pill-tab:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-sm-bold}"

rounded: "{rounded.full}"

padding: "8px 16px"

border: "1px solid {colors.hairline}"

button-pill-tab-active:

backgroundColor: "{colors.ink-deep}"

textColor: "{colors.canvas}"

button-icon-circular:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

rounded: "{rounded.circle}"

size: 40px

card-product-feature:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.xxxl}"

padding: "{spacing.xxl}"

border: "1px solid {colors.hairline-soft}"

card-feature-photo:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.xxxl}"

padding: "0"

border: "none"

card-promo-strip:

backgroundColor: "{colors.ink-deep}"

textColor: "{colors.canvas}"

rounded: "{rounded.xxxl}"

padding: "{spacing.section}"

card-icon-feature:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.xl}"

padding: "{spacing.xl}"

card-checkout-summary:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.xl}"

padding: "{spacing.xl}"

border: "1px solid {colors.hairline-soft}"

shadow: "rgba(20, 22, 26, 0.3) 0px 1px 4px 0px"

product-thumbnail:

backgroundColor: "{colors.surface-soft}"

rounded: "{rounded.xl}"

padding: "{spacing.base}"

aspect-ratio: "1 / 1"

text-input:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.lg}"

padding: "{spacing.md}"

border: "1px solid {colors.hairline}"

height: 44px

text-input-focused:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

border: "2px solid {colors.fb-blue}"

text-input-error:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

border: "1px solid {colors.critical-strong}"

search-pill:

backgroundColor: "{colors.surface-soft}"

textColor: "{colors.steel}"

typography: "{typography.body-sm}"

rounded: "{rounded.full}"

padding: "{spacing.md} {spacing.lg}"

height: 40px

radio-option:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.lg}"

padding: "{spacing.lg}"

border: "1px solid rgba(10, 19, 23, 0.12)"

radio-option-selected:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.lg}"

border: "2px solid #0143b5"

color-swatch-circle:

rounded: "{rounded.circle}"

size: 32px

border: "2px solid {colors.canvas}"

badge-promo-yellow:

backgroundColor: "{colors.warning}"

textColor: "{colors.ink-deep}"

typography: "{typography.caption-bold}"

rounded: "{rounded.full}"

padding: "4px 10px"

badge-attention:

backgroundColor: "{colors.attention}"

textColor: "{colors.canvas}"

typography: "{typography.caption-bold}"

rounded: "{rounded.full}"

padding: "4px 10px"

badge-success:

backgroundColor: "{colors.success}"

textColor: "{colors.canvas}"

typography: "{typography.caption-bold}"

rounded: "{rounded.full}"

padding: "4px 10px"

badge-critical:

backgroundColor: "{colors.critical}"

textColor: "{colors.canvas}"

typography: "{typography.caption-bold}"

rounded: "{rounded.full}"

padding: "4px 10px"

promo-banner:

backgroundColor: "{colors.ink-deep}"

textColor: "{colors.canvas}"

typography: "{typography.body-sm-bold}"

padding: "{spacing.md} {spacing.xl}"

faq-accordion-item:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.xl}"

padding: "{spacing.xl}"

border: "1px solid {colors.hairline-soft}"

why-buy-tile:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.xl}"

padding: "{spacing.xxl} {spacing.xl}"

border: "1px solid {colors.hairline-soft}"

warranty-card:

backgroundColor: "{colors.surface-soft}"

rounded: "{rounded.xxl}"

padding: "{spacing.xxl}"

footer-region:

backgroundColor: "{colors.canvas}"

textColor: "{colors.steel}"

typography: "{typography.body-sm}"

padding: "{spacing.section} {spacing.xxl}"

border: "1px solid {colors.hairline-soft}"

hero-band-marketing:

backgroundColor: "{colors.canvas}"

textColor: "{colors.canvas}"

typography: "{typography.hero-display}"

rounded: "{rounded.xxxl}"

padding: "{spacing.section-lg}"

product-gallery-pdp:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.xxxl}"

padding: "{spacing.base}"

color-sku-picker-row:

backgroundColor: "{colors.surface-soft}"

rounded: "{rounded.lg}"

padding: "{spacing.base}"

feature-icon-row:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.xl}"

padding: "{spacing.xl}"

border: "1px solid {colors.hairline-soft}"

tech-specs-table:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-sm}"

rounded: "{rounded.lg}"

padding: "{spacing.lg}"

border: "1px solid {colors.hairline-soft}"

testimonial-customer-card:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.xl}"

padding: "{spacing.xxl}"

border: "1px solid {colors.hairline-soft}"

---

Meta's commerce surfaces (homepage, Quest configurator, Ray-Ban product detail, prescription page) read as a confident hardware merchandiser. The brand voice is photography-first: large, full-bleed product imagery dominates above-the-fold real estate, with white space and tight typographic hierarchy carrying the rest. The system has a recognizable dual-CTA pattern — a black pill-shaped primary on marketing surfaces shifting to a saturated cobalt blue ({colors.primary}) inside the buy-now flows, paired with an outlined ghost button for secondary navigation.

Optimistic VF — Meta's variable display face — anchors the entire system, ranging from a 64px hero display down to a 12px caption. The face's `ss01` and `ss02` stylistic sets are switched on across every heading role, contributing to the brand's slightly humanist, friendly geometric character. Below 768px the system collapses cleanly: hero stacks, pill nav becomes a hamburger, three-up feature grids flatten to a single column, and product configurators drop their right-rail summary into a sticky bottom bar.

**Key Characteristics:**

> Source pages: meta.com/ (homepage), /ai-glasses/ray-ban-meta-skyler-gen-2/ (PDP), /quest/quest-3s/buy-now/ (configurator), /ai-glasses/prescription/ (lens upsell). Token coverage was identical across all four pages — the design system is genuinely unified.

**Optimistic VF** is Meta's proprietary variable display face. Fallbacks: Montserrat, Helvetica, Arial, Noto Sans. The variable axes carry from 300 (light heading-md, used for editorial intro headlines like "Look forward") through 500 (display, hero, heading-sm) up to 700 (subtitle, body emphasis, button labels). Stylistic sets `ss01` and `ss02` are switched on across every heading role — they soften the geometry and give the type a slightly humanist breathing.

A secondary Helvetica fallback chain is used for technical microcopy (12px) inside spec sheets and footer fine print.

| Token | Size | Weight | Line Height | Letter Spacing | OpenType | Use |

|---|---|---|---|---|---|---|

| `{typography.hero-display}` | 64px | 500 | 1.16 | 0 | ss01, ss02 | Homepage hero ("Get 25% off…", category opener) |

| `{typography.display-lg}` | 48px | 500 | 1.17 | 0 | ss01, ss02 | Section-opener display ("Made for prescriptions. Built for comfort.") |

| `{typography.heading-lg}` | 36px | 500 | 1.28 | 0 | ss01, ss02 | Subsection headlines ("Why buy from Meta", "Tech specs") |

| `{typography.heading-md}` | 28px | 300 | 1.21 | 0 | ss01, ss02 | Editorial subheads in lighter weight ("Look forward", "Built for prescriptions") |

| `{typography.heading-sm}` | 24px | 500 | 1.25 | 0 | ss01, ss02 | Card titles, feature-tile headers |

| `{typography.subtitle-lg}` | 18px | 700 | 1.44 | 0 | — | Bold callouts, FAQ question titles |

| `{typography.subtitle-md}` | 18px | 400 | 1.44 | 0 | — | Body lead and longer-line subtitles |

| `{typography.body-md}` | 16px | 400 | 1.50 | -0.16px | — | Primary body text |

| `{typography.body-md-bold}` | 16px | 700 | 1.50 | -0.16px | — | Body emphasis and link-md |

| `{typography.body-sm}` | 14px | 400 | 1.43 | -0.14px | — | Secondary body, helper text |

| `{typography.body-sm-bold}` | 14px | 700 | 1.43 | -0.14px | — | Pill tab labels, footer headings |

| `{typography.caption-bold}` | 12px | 700 | 1.33 | 0 | — | Badge labels, timestamps |

| `{typography.caption}` | 12px | 400 | 1.33 | 0 | — | Footer fine print, legal microcopy |

| `{typography.button-md}` | 14px | 700 | 1.43 | -0.14px | — | Pill button labels |

| `{typography.link-md}` | 16px | 700 | 1.50 | -0.16px | — | Inline navigation links |

Whitespace is product-photography-first. Hero sections give product imagery 50–70% of the viewport height; copy is given oxygen to breathe in `{spacing.xxl}` to `{spacing.xxxl}` blocks above and below. Inside the configurator, whitespace tightens — the buy-now panel is information-dense, with `{spacing.base}` to `{spacing.lg}` rhythm between option groups.

The system runs predominantly flat. Elevation is reserved for two interaction layers:

| Level | Treatment | Use |

|---|---|---|

| 0 (flat) | No shadow; `{rounded.xxxl}` rounding + `{colors.hairline-soft}` border | Default product cards, why-buy tiles |

| 1 (subtle) | `rgba(0, 0, 0, 0.2) 1px 1px 0px 0px` | Pill-tab activation indicator |

| 2 (sticky panel) | `rgba(20, 22, 26, 0.3) 0px 1px 4px 0px` | PDP right-rail purchase summary, sticky mobile checkout bar |

| Token | Value | Use |

|---|---|---|

| `{rounded.xs}` | 2px | Inline checkbox marks, fine UI corners |

| `{rounded.sm}` | 4px | Tags, micro-controls |

| `{rounded.md}` | 6px | Square thumbnail rounding |

| `{rounded.lg}` | 8px | Form inputs, radio-option containers |

| `{rounded.xl}` | 16px | Standard feature cards, FAQ accordion items |

| `{rounded.xxl}` | 24px | Warranty / accessory tiles, ghost-style action cards |

| `{rounded.xxxl}` | 32px | Photographic feature cards, big promo strips |

| `{rounded.feature}` | 40px | Accessory hero panels, "Built for prescriptions" cards |

| `{rounded.full}` | 100px | Pill buttons, tab chips, badges |

| `{rounded.circle}` | 50% | Color swatches, circular icon buttons |

> Per the no-hover policy, hover states are NOT documented for any component below. Default and pressed/active states only.

**`button-primary`** — Black pill primary CTA for marketing surfaces ("Shop", "Pre-order").

**`button-buy-cta`** — Cobalt pill primary CTA for commerce flows ("Add to cart", "Configure", "Continue").

**`button-secondary`** — Outlined ghost CTA, often paired with primary in dual-CTA hero patterns.

**`button-ghost`** — Quieter outlined variant used for tertiary CTAs.

**`button-pill-tab`** + **`button-pill-tab-active`** — Top-of-page category navigation pills ("Glasses / Quest / Apps").

**`button-icon-circular`** — 40×40px circular utility buttons (carousel arrows, share, favorite).

**`card-product-feature`** — White feature card with product photography and copy (homepage "Designed for sport", "Advanced. Inside and out.").

**`card-feature-photo`** — Edge-to-edge photographic showcase tile with NO chrome (homepage "Built for prescriptions" full-bleed glasses card).

**`card-promo-strip`** — Dark full-width promo card with embedded copy + CTAs (homepage "Meta Quest brings the magic of virtual reality" wide strip).

**`card-icon-feature`** — Three-up feature tile with line icon, headline, and short copy ("Free 2-day delivery", "Free 30-day returns", "Worry-free warranty", "Buy now, pay later").

**`card-checkout-summary`** — PDP right-rail sticky summary with title, price, color picker, "Add to cart" button.

**`product-thumbnail`** — Square product image cell used in color/SKU pickers and "People also bought" rows.

**`warranty-card`** — Promo callout for warranty + finance offers ("1y Warranty", "Meta Horizon+").

**`why-buy-tile`** — 4-up reassurance tile row in the lower marketing zone.

**`text-input`** — Standard form field (footer email subscribe, support form).

**`text-input-focused`** — Activated state.

**`text-input-error`** — Validation error state.

**`search-pill`** — Top-nav search field.

**`radio-option`** + **`radio-option-selected`** — Configurator option cards (storage, color variant, shipping option).

**`color-swatch-circle`** — Round color/material picker (Ray-Ban frame finishes, glass colors).

**`badge-promo-yellow`** — Limited-time offer chip ("Limited time", "Sale").

**`badge-attention`** — Mid-priority status indicator ("Almost gone", "Selling fast").

**`badge-success`** — Affirmative status ("In stock", "Verified", "Free shipping").

**`badge-critical`** — Urgent/destructive label ("Out of stock", "Discontinued", error chips).

**`promo-banner`** — Sticky full-width promotional strip ABOVE the top nav ("Get 25% off the #1 selling AI glasses").

**Top Navigation (Desktop)** — Sticky white bar with category pill tabs, search, account, cart.

**Top Navigation (Mobile)** — Compressed to logo + hamburger + cart icon. Pill-tab nav slides into a full-screen drawer below 768px.

**Promo Banner** — Full-width strip ABOVE the nav for time-bound offers.

**Breadcrumb (PDP)** — Inline path above the product hero ("Glasses › Ray-Ban Meta › Skyler (Gen 2)").

**`hero-band-marketing`** — Full-bleed photographic hero with overlaid copy + dual-CTA pair.

**`product-gallery-pdp`** — Product detail page main hero: 4-up vertical thumbnail strip on the left, large product image center, sticky purchase rail right.

**`color-sku-picker-row`** — Six-up grid of square product variants with name + price below each.

**`feature-icon-row`** — Four reassurance benefits ("Free 2-day delivery", "Free 30-day returns", "Worry-free warranty", "Buy now, pay later").

**`faq-accordion`** — Vertical stack of expandable Q&A items.

**`tech-specs-table`** — Two-column key/value table for product specifications.

**`testimonial-customer-card`** — Small editorial card with author + quote + photo.

**`footer-region`** — Dense multi-column site footer.

| Name | Width | Key Changes |

|---|---|---|

| Mobile (small) | < 480px | Single column. Hero text drops to `{typography.display-lg}` or smaller. Pill tabs collapse into hamburger drawer. PDP gallery stacks above purchase rail; rail becomes sticky bottom bar. |

| Mobile (large) | 480 – 767px | Same as small but feature tiles render two-up. |

| Tablet | 768 – 1023px | Two-column feature grids. Pill-tab nav returns. PDP gallery + purchase rail render side-by-side at compressed proportions (~60/40). |

| Desktop | 1024 – 1359px | Full three- and four-up feature grids; full pill-tab category nav; PDP at standard 58/42 split. |

| Wide Desktop | ≥ 1360px | Same as desktop with wider hero gutters and larger product photography. |

1. Focus on ONE component at a time. The system has high internal consistency — small precision wins compound.

2. Reference component names and tokens directly (`{colors.primary}`, `{component-name}-pressed`, `{rounded.full}`) — do not paraphrase.

3. Run `npx @google/design.md lint DESIGN.md` after edits to catch broken refs, contrast issues, orphaned tokens.

4. Add new variants as separate `components:` entries (`-pressed`, `-disabled`, `-focused`) — do not bury them inside prose.

5. Default to `{typography.body-md}` for body and `{typography.subtitle-lg}` for emphasis. Headlines step down through `hero-display → display-lg → heading-lg → heading-md → heading-sm`.

6. Keep `{colors.primary}` (cobalt) scarce. If it appears outside the buy-now flow on a viewport, ask whether the surface really needs to look like a checkout panel.

7. Pill-shaped buttons (`{rounded.full}`) always; squared buttons signal "third-party widget" in this design language and should be filtered out of any work surface.