Meta

Overview

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:

• Stark white canvas ({colors.canvas}) carrying full-bleed product photography with {rounded.xxxl} (32px) corner softening on showcase tiles
• Two-tier primary button system: marketing CTAs use {colors.ink-button} pills; commerce CTAs use {colors.primary} cobalt pills inside buy-now panels
• Optimistic VF as the universal display + body face with consistent ss01, ss02 OpenType features
• Pill-shaped buttons ({rounded.full}) and {rounded.xxxl}/{rounded.feature} cards as the dominant geometric signature
• Saturated promotional banners (yellow {colors.warning}, dark {colors.ink-deep}) used sparingly above the nav for time-bound offers
• Photographic feature cards with no card chrome (no border, no shadow) — the product imagery IS the surface treatment

Colors

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.

Brand & Accent

• Cobalt Primary ({colors.primary}): The buy-now CTA color. Used on every "Add to cart", "Configure", "Pre-order" button inside the commerce flow and the right-rail purchase panel.
• Deep Cobalt ({colors.primary-deep}): Pressed-state and dark-surface variant of the cobalt primary; also the active link color.
• Soft Cobalt ({colors.primary-soft}): Translucent background tint for informational callouts ({colors.primary-soft} at 15% alpha).
• Facebook Blue ({colors.fb-blue}): Selected radio/checkbox state and inline form-control activation color.
• Meta Link Blue ({colors.meta-link}): Reserved for legacy navigation and footer link affordances.
• Oculus Purple ({colors.oculus-purple}): VR product accent — used inside Quest-branded surfaces for category emphasis.

Surface

• Canvas White ({colors.canvas}): Page background and primary card surface.
• Soft Cloud ({colors.surface-soft}): Subtle product-thumbnail and warranty-card background; also the search-pill rest state.
• Hairline Gray ({colors.hairline}): 1px input border and form-control divider.
• Hairline Soft ({colors.hairline-soft}): Quieter divider used on cards, footer separators, and section breaks.

Text

• Deep Ink ({colors.ink-deep}): Primary headline and body text on light surfaces.
• Ink ({colors.ink}): Standard body and secondary headline text.
• Charcoal ({colors.charcoal}): Tertiary body text and form-button labels.
• Slate ({colors.slate}): Section-header copy and supporting microcopy.
• Steel ({colors.steel}): Quieter caption text and footer link hierarchy.
• Stone ({colors.stone}): Disabled or de-emphasized labels.

Semantic

• Success ({colors.success}): "In stock", "Free returns" affirmations.
• Attention ({colors.attention}): Mid-priority alerts and timed callouts.
• Warning ({colors.warning}): Promotional banners ("Get 25% off…") and limited-time tags.
• Critical ({colors.critical}): Validation errors, destructive feedback.
• Critical Strong ({colors.critical-strong}): Form-input error border and inline error labels.

Typography

Font Family

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.

Hierarchy

Principles

• Negative letter-spacing on body roles (-0.14px to -0.16px) tightens the type fractionally — Optimistic VF was designed for this snug-but-not-condensed setting.
• Editorial subheads use the 300 weight to introduce visual rest between the 500-weight display headlines and the 400-weight body, creating a three-tier visual rhythm.
• All headings carry ss01, ss02 stylistic sets together — the design treats them as a paired alternates package, never one without the other.
• Buttons, pill tabs, and footer headings share {typography.body-sm-bold} (14px / 700 / -0.14px), creating a tight visual relationship between interactive elements.

Layout

Spacing System

• Base unit: 4px increment with 8px as the dominant primary step.
• Tokens: {spacing.xxs} (4px) · {spacing.xs} (8px) · {spacing.sm} (10px) · {spacing.md} (12px) · {spacing.base} (16px) · {spacing.lg} (20px) · {spacing.xl} (24px) · {spacing.xxl} (32px) · {spacing.xxxl} (40px) · {spacing.section-sm} (48px) · {spacing.section} (64px) · {spacing.section-lg} (80px) · {spacing.hero} (120px).
• Section rhythm: Marketing sections separate at {spacing.section-lg} (80px); product detail sections compress to {spacing.section} (64px); FAQ stacks tighten further to {spacing.xxl} (32px).
• Card internal padding: Standard {spacing.xxl} (32px); icon-feature tiles compress to {spacing.xl} (24px); promo-strip cards expand to {spacing.section} (64px) for hero presence.

Grid & Container

• Marketing page max-width sits around 1280px with 32–48px gutters.
• The PDP layout uses a 2-column split: hero gallery (~58% width) + sticky purchase rail (~42%, with max-width: 380px on the rail).
• Three-up feature grids ("Why buy from Meta") use a 24px column gap; six-up product thumbnail rows (color/SKU pickers) use a 12px gap.

Whitespace Philosophy

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.

Elevation & Depth

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

Decorative Depth

• Photography-as-depth: full-bleed product imagery on {rounded.xxxl} cards creates atmospheric layering without shadows.
• Translucent overlays (rgba(255, 255, 255, 0.1) to rgba(10, 19, 23, 0.12)) cover dark hero photography to lift legibility of overlaid text.
• Decorative pastel tints inside accessory cards — soft pink, ice-blue, mint — appear briefly behind product cutouts but are NOT formalized as system tokens (treated as photographic content).

Shapes

Border Radius Scale

Photography Geometry

• Product hero photography sits in {rounded.xxxl} (32px) frames more often than rectangles.
• Color/material swatches are perfect circles ({rounded.circle}, 32px diameter, 2px white border ring when selected).
• Square product thumbnails (aspect-ratio: 1/1) use {rounded.xl} rounding.
• Six-up "color & SKU" picker rows use 1:1 aspect tiles with {rounded.lg} (8px) corners — tighter than the hero photography frames to differentiate selection-grid context from showcase context.

Components

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

Buttons

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

• Background {colors.ink-button}, text {colors.on-ink-button}, typography {typography.button-md}, padding 14px 30px, rounded {rounded.full}.
• Pressed state button-primary-pressed flips background to {colors.charcoal}.
• Disabled state button-primary-disabled uses {colors.disabled-text} background.

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

• Background {colors.primary}, text {colors.on-primary}, typography {typography.button-md}, padding 14px 30px, rounded {rounded.full}.
• Pressed state button-buy-cta-pressed deepens background to {colors.primary-deep}.
• This variant ONLY appears inside the buy-now configurator and PDP purchase rail. Marketing surfaces use button-primary instead.

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

• Background transparent, text {colors.ink-deep}, border 2px solid {colors.ink-deep}, typography {typography.button-md}, padding 12px 28px, rounded {rounded.full}.

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

• Background transparent, text {colors.ink-deep}, border 2px solid rgba(10, 19, 23, 0.12), typography {typography.button-md}, padding 10px 22px, rounded {rounded.full}.

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

• Inactive: background {colors.canvas}, text {colors.ink}, border 1px solid {colors.hairline}, padding 8px 16px, rounded {rounded.full}.
• Active: background {colors.ink-deep}, text {colors.canvas}. No border in active state — the dark fill replaces it.

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

• Background {colors.canvas}, icon color {colors.ink}, rounded {rounded.circle}.

Cards & Containers

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

• Background {colors.canvas}, rounded {rounded.xxxl}, padding {spacing.xxl}, border 1px solid {colors.hairline-soft}.

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

• Background {colors.canvas} (visible only at the corners), rounded {rounded.xxxl}, no padding, no border. The image fills the card; copy is overlaid bottom-left in white.

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

• Background {colors.ink-deep}, text {colors.canvas}, rounded {rounded.xxxl}, padding {spacing.section}.

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").

• Background {colors.canvas}, rounded {rounded.xl}, padding {spacing.xl}, border 1px solid {colors.hairline-soft}.

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

• Background {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 — Square product image cell used in color/SKU pickers and "People also bought" rows.

• Background {colors.surface-soft}, rounded {rounded.xl}, padding {spacing.base}, aspect-ratio 1 / 1.

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

• Background {colors.surface-soft}, rounded {rounded.xxl}, padding {spacing.xxl}. Uses pastel-tinted variants for additional perks.

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

• Background {colors.canvas}, rounded {rounded.xl}, padding {spacing.xxl} {spacing.xl}, border 1px solid {colors.hairline-soft}. Heading in {typography.subtitle-lg}, body in {typography.body-sm}.

Inputs & Forms

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

• Background {colors.canvas}, text {colors.ink}, border 1px solid {colors.hairline}, rounded {rounded.lg}, padding {spacing.md}, height 44px.

text-input-focused — Activated state.

• Border switches to 2px solid {colors.fb-blue}.

text-input-error — Validation error state.

• Border switches to 1px solid {colors.critical-strong}; error label below in {colors.critical-strong} {typography.body-sm}.

search-pill — Top-nav search field.

• Background {colors.surface-soft}, text {colors.steel}, typography {typography.body-sm}, rounded {rounded.full}, height 40px.

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

• Inactive: background {colors.canvas}, rounded {rounded.lg}, padding {spacing.lg}, border 1px solid rgba(10, 19, 23, 0.12).
• Selected: border switches to 2px solid #0143b5 (deep cobalt) — the cobalt theme persists into form-control selection signaling.

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

• 32px diameter, {rounded.circle}, 2px solid {colors.canvas} ring on selection over the swatch's own fill color.

Badges & Status

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

• Background {colors.warning}, text {colors.ink-deep}, typography {typography.caption-bold}, rounded {rounded.full}, padding 4px 10px.

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

• Background {colors.attention}, text {colors.canvas}, typography {typography.caption-bold}, rounded {rounded.full}, padding 4px 10px.

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

• Background {colors.success}, text {colors.canvas}, typography {typography.caption-bold}, rounded {rounded.full}, padding 4px 10px.

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

• Background {colors.critical}, text {colors.canvas}, typography {typography.caption-bold}, rounded {rounded.full}, padding 4px 10px.

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

• Background {colors.ink-deep} (or {colors.warning} for yellow promo variants), text {colors.canvas} (or {colors.ink-deep} on yellow), typography {typography.body-sm-bold}, padding {spacing.md} {spacing.xl}. Carries one-line offer copy plus an inline CTA link.

Navigation

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

• Background {colors.canvas}, height ~64px with bottom 1px solid {colors.hairline-soft}.
• Left: Meta wordmark logo (61×14px). Center: pill-tab category nav. Right: search-pill + circular icon buttons (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.

• Background {colors.ink-deep} or {colors.warning} (yellow), text {colors.canvas} or {colors.ink-deep}, typography {typography.body-sm-bold}, padding {spacing.md} {spacing.xl}. Carries one-line offer copy + inline link.

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

• Typography {typography.body-sm}, separator dot in {colors.stone}, active leaf in {colors.ink}, parent links in {colors.steel}.

Signature Components

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

• Edge-to-edge product photography on a dark or photographic background. Overlay copy in {typography.hero-display} white. Below the title: 1-line subtitle in {typography.subtitle-md} then button-primary + button-secondary 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.

• Thumbnails: 80×80px, {rounded.lg}, {colors.surface-soft} background, 1px {colors.hairline-soft} border (active border switches to {colors.ink-deep}).
• Main image area: ~720×720px on desktop, {rounded.xxxl} rounding, photographic surface.
• Sticky rail uses card-checkout-summary.

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

• Tile background {colors.surface-soft}, rounded {rounded.lg}, image padded {spacing.base}. Active tile border switches to 2px solid {colors.ink-deep}. Below the tile: variant name in {typography.body-sm-bold} and price in {typography.body-sm}.

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

• 4-column grid, each cell uses card-icon-feature chrome with a 32px line icon at top, headline {typography.subtitle-lg}, body {typography.body-sm}.

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

• Each item uses faq-accordion-item chrome. Question in {typography.subtitle-lg} left, chevron icon ({colors.steel}, 20px) right. Expanded answer drops in {typography.body-md} text below with {spacing.base} top padding.

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

• Row layout: spec label ({typography.body-sm-bold} {colors.ink}) left, spec value ({typography.body-sm} {colors.charcoal}) right. Row separator 1px solid {colors.hairline-soft}. Section headers in {typography.heading-sm} above each spec group.

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

• Background {colors.canvas}, rounded {rounded.xl}, padding {spacing.xxl}, border 1px solid {colors.hairline-soft}. Avatar circle 40px, byline in {typography.body-sm-bold}, quote in {typography.body-md}.

footer-region — Dense multi-column site footer.

• Background {colors.canvas}, top border 1px solid {colors.hairline-soft}, padding {spacing.section} {spacing.xxl}. Six column groups with section headings in {typography.body-sm-bold} {colors.ink} and link lists in {typography.body-sm} {colors.steel}. Bottom row contains language picker, region selector, legal links in {typography.caption} {colors.stone}.

Do's and Don'ts

Do

• Reserve {colors.primary} (cobalt) for buy-now CTAs only — its visual weight is meaningful precisely because it doesn't appear on marketing pages.
• Use {colors.ink-button} (black) for marketing-surface primary CTAs. Pair with {colors.button-secondary} ghost outline for the secondary action.
• Apply {rounded.full} to every button, every category pill, every badge, every chip — buttons are NEVER squared in Meta's system.
• Apply {rounded.xxxl} to photographic product cards and {rounded.xl} to icon-feature tiles to maintain the visible card-hierarchy contrast.
• Switch on ss01, ss02 together for any Optimistic VF heading. Never one stylistic set without the other.
• Use the 300-weight {typography.heading-md} for editorial subheads — it creates the brand's signature visual rhythm against the 500-weight displays.

Don't

• Don't use {colors.primary} (cobalt) for marketing-surface primary buttons — it conflicts with Meta's brand-history positioning of black-CTA-on-white-canvas marketing.
• Don't introduce additional accent colors beyond cobalt + Oculus purple. The hardware brand is deliberately monochromatic outside its product photography.
• Don't soften the corners of pill buttons below {rounded.full}. The pill is a brand signature.
• Don't run feature cards without rounding — {rounded.xxxl} is the minimum for any photographic surface.
• Don't reduce {typography.body-md} line-height below 1.50 — the negative letter-spacing already tightens the metric and any further compression breaks legibility.
• Don't apply heavy shadows to marketing cards. Elevation is a commerce-flow signal, not a marketing flourish.

Responsive Behavior

Breakpoints

Touch Targets

• Pill buttons render at 40–44px effective height (with the 14px button text + 14px 30px padding). Above the WCAG AAA 44px floor.
• Circular icon buttons are 40×40px — at the AA floor; bumps to 44×44px on mobile via override.
• Color swatch circles are 32×32px. To hit AAA, the swatch carries a 12px clear hit zone around it (effective hit target ~56px).
• Form inputs render at 44px height to align with primary button height.

Collapsing Strategy

• Promo banner stays full-width on all breakpoints; truncates with ellipsis on small mobile, retains the inline link affordance.
• Pill-tab nav below 768px collapses into a hamburger drawer; the active tab is rendered as a label inside the closed nav.
• PDP layout: gallery stacks above the purchase summary at < 1024px; the summary becomes a sticky bottom bar with price + "Add to cart" button at < 768px. The full summary remains scrollable above the sticky bar.
• Feature grids (3-up, 4-up) collapse to 2-up at 768–1023px and 1-up at < 768px. Card padding compresses from {spacing.xxl} to {spacing.xl} at the 1-up breakpoint.
• Hero typography: {typography.hero-display} (64px) drops to {typography.heading-lg} (36px) at < 768px and {typography.heading-sm} (24px) at < 480px.
• Footer: 6-column desktop layout reflows to 2-column at tablet and accordion-collapsed groups at mobile.

Image Behavior

• Product photography uses 1:1 (thumbnails, color pickers), 4:3 (PDP gallery), and 16:9 (homepage promo strips) ratios.
• Hero photography is full-bleed with {rounded.xxxl} corners; lazy-loaded below the fold.
• Product variant images preserve their {rounded.lg} thumbnails across all breakpoints — they never go full-width on mobile.

Iteration Guide

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.

Known Gaps

• Selected/checked states for non-button form controls (toggle, multi-select) were not visible on the captured surfaces — implement following the cobalt-on-white pattern from radio-option-selected.
• Animation/transition timings are not extracted; recommend 150–250ms ease-out for primary surface transitions and 300ms ease-in-out for accordion expand/collapse.
• Specific dark-mode token values for canvas, surface, ink, and hairline are not defined; the brand has not surfaced a published dark-mode token set on these commerce pages.
• Pastel decorative tints inside accessory cards (soft pink, ice blue, mint) appear visually but are not formalized — treat them as photographic content, not as system colors.