--- version: alpha name: Meta website: "https://about.meta.com" 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. seo: title: "Meta Design System for React — Cobalt #0064e0, Optimistic VF, 33 components" metaDescription: "Meta's hardware commerce design system as a DESIGN.md file. Cobalt #0064e0, Optimistic VF, 24 colors, 33 components. For React, Next.js, and AI tools." highlights: - "Two-tier primary button system — black ink pills on marketing, cobalt #0064e0 pills exclusively inside buy-now flows" - "Optimistic VF anchors the entire scale — 64px hero down to 12px caption, with ss01 and ss02 stylistic sets always paired" - "Pill-shaped buttons at 100px radius and 32px card rounding form the dominant geometric signature across all surfaces" - "Photographic feature cards run zero chrome — no border, no shadow; the product imagery itself is the surface treatment" - "Editorial subheads at 28px / 300 create a three-tier rhythm against 500-weight displays and 400-weight body copy" tags: - "Consumer Electronics" - "E-commerce & Retail" lastUpdated: "2026-05-12" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Meta's design system reads like a hardware merchandiser that learned restraint. Across meta.com, the Quest 3S configurator, the Ray-Ban Meta product detail page, and the prescription-lens upsell, the same playbook holds: a stark white canvas, full-bleed product photography on 32px-rounded cards, and a confident Optimistic VF wordmark anchoring every heading. The brand voice is photography-first — large images take 50 to 70 percent of the viewport height above the fold, and the type tucks underneath at modest weights rather than fighting for attention. This DESIGN.md captures the spec across 24 color tokens, 16 typography styles, 10 corner radii, 13 spacing values, and 33 components — every primary surface from `button-buy-cta` to `tech-specs-table`. The most distinctive token is the dual-primary system: a black pill (`#000000`) for marketing CTAs that flips to saturated cobalt (`#0064e0`) the moment the user enters the buy-now flow. The file follows the Google Labs DESIGN.md format, so every value is machine-readable and references the same token names Meta's own engineering teams would use. Feed this file to Claude, Cursor, or GitHub Copilot and the agent produces React components that look like a Meta commerce surface rather than a generic e-commerce theme. The pill buttons stay at `rounded.full` (100px), the photographic feature cards skip the border-and-shadow chrome, and the 300-weight editorial subheads slot in between the 500-weight displays. The discipline worth studying here is the cobalt-versus-black split — Meta uses color scarcity as a navigational signal, telling the user exactly which surface they're standing on without saying a word. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://design.meta.com" title: "Meta Design" description: "Meta's official design portal, covering brand, product, and the Optimistic typeface." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Meta's primary brand color?" answer: "Meta runs a dual-primary system. Marketing surfaces use a black ink pill (#000000) for their primary CTA, while buy-now flows switch to a saturated cobalt (#0064e0) for actions like Add to cart, Configure, and Continue. Deep cobalt (#0457cb) is the pressed-state variant and active-link color. The cobalt only ever appears inside the commerce funnel — its visual weight is meaningful precisely because it doesn't compete on the homepage." - id: "typography" title: "What typography does Meta use?" answer: "Optimistic VF, Meta's proprietary variable display face, carries the entire scale from a 64px hero display down to a 12px caption. The variable axes range from weight 300 (used for editorial subheads like Look forward) through 500 (display, hero, heading-sm) to 700 (subtitle, body emphasis, button labels). OpenType stylistic sets ss01 and ss02 are switched on across every heading role together, never one without the other. The fallback chain runs Montserrat, Helvetica, Arial, Noto Sans." - id: "dark-mode" title: "Does Meta's design system have a dark mode?" answer: "Not on these commerce surfaces. The captured pages (homepage, Quest configurator, Ray-Ban PDP, prescription lens) all run on a stark white canvas (#ffffff) with deep ink text (#0a1317). Specific dark-mode token values for canvas, surface, ink, and hairline are not defined in the spec — they are flagged in the Known Gaps section. Dark contexts inside the system rely on photographic hero imagery with translucent overlays rather than a formal dark token set." - id: "shape-language" title: "What's the shape language for buttons and cards?" answer: "Buttons are always pills. Every button, category tab, badge, and chip uses rounded.full (100px) — squared buttons signal a third-party widget and should be filtered out. Cards follow a hierarchy: rounded.xl (16px) on icon-feature tiles and FAQ items, rounded.xxl (24px) on warranty cards, rounded.xxxl (32px) on photographic feature cards and promo strips, and rounded.feature (40px) on accessory hero panels. Color swatches and circular icon buttons use a perfect circle." - id: "use-in-project" title: "Can I use this DESIGN.md to build a React commerce surface?" answer: "Yes. The file is structured for AI tools that read design tokens — feed it to Claude or Cursor and the agent reproduces Meta's commerce patterns rather than a generic shadcn theme. Every color, typography, radius, and spacing value is a quoted token you can paste directly into Tailwind config or CSS variables. The 33 component entries (from button-buy-cta to product-gallery-pdp) give the agent a vocabulary that maps cleanly onto a Next.js commerce build." - id: "known-gaps" title: "What's missing from this DESIGN.md spec?" answer: "A handful of items, listed in the Known Gaps section: selected and checked states for non-button form controls like toggles and multi-selects, animation and transition timings (recommended 150 to 250ms ease-out for surface transitions), full dark-mode token values, and the pastel decorative tints (soft pink, ice blue, mint) that appear behind accessory cutouts but were not formalized as system tokens. The spec captures roughly 95% of the public commerce and marketing surfaces." 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}" --- ## 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 ("#0064e0") 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 ("#ffffff") carrying full-bleed product photography with 32px corner softening on showcase tiles - Two-tier primary button system: marketing CTAs use ink black ("#000000") pills; commerce CTAs use cobalt ("#0064e0") pills inside buy-now panels - Optimistic VF as the universal display + body face with consistent `ss01, ss02` OpenType features - Pill-shaped buttons (100px radius) and 32px / 40px cards as the dominant geometric signature - Saturated promotional banners (yellow "#f7b928", dark "#0a1317") 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 ## 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.