Meta Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

24tokens

9type steps

9radius steps

4pxspacing base

Meta, in one page

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

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.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Meta design language. Follow the measured tokens below — do not substitute your own palette.

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

Type:
- families: Optimistic VF
- scale: 12, 14, 16, 18, 24, 28, 36, 48, 64
- weights: 300, 400, 500, 700

Shape:
- radius: 2, 4, 6, 8, 16, 24, 32, 40, 100
- elevation: "rgba(20, 22, 26, 0.3) 0px 1px 4px 0px"

Spacing: 4, 8, 10, 12, 14, 16, 20, 24, 32, 40

Rules:
- 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.

Avoid:
- 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 ma…
- 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 legibili…
- Don't apply heavy shadows to marketing cards. Elevation is a commerce-flow signal, not a marketing flourish.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

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.

Type scaleRead the full spec

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

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

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.

Components and layoutRead the full spec

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.

Responsive behaviourRead the full spec

Breakpoints

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.

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

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-meta {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #1c1e21;
  --heading-color: #1c1e21;
  --link-color: #0064e0;
  --link-hover-color: #004dad;
  --border-color: #d6d7d7;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(28,30,33,0.06);
  --card-hover-shadow: 0 6px 18px rgba(28,30,33,0.12);
  --header-bg: #1c1e21;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #6b6d6f;
  --button-bg: #0064e0;
  --button-text-color: #ffffff;
  --button-hover-bg: #004dad;
  --button-border: none;
  --button-border-radius: 16px;
  --button-secondary-bg: #f1f2f2;
  --button-secondary-text-color: #1c1e21;
  --button-secondary-hover-bg: #e4e4e4;
  --button-secondary-border: 1px solid #d6d7d7;
  --prompt-bg: #f4f4f4;
  --prompt-text-color: #1c1e21;
  --base-font: var(--font-sans);
  --heading-font: var(--font-sans);
  --card-border-radius: 16px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

expo 78.8%
coinbase 75.9%
bmw 75.3%
ibm 74.8%
binance 74.2%

Where this came from

Source document: volt/design-md/meta/DESIGN.md · 36.9 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.