Design System Inspiration of Meta

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: full-bleed product imagery, tight typographic hierarchy, and a recognizable dual-CTA pattern — black pill primaries on marketing, cobalt pill primaries inside the buy-now flow.

Color Palette

A two-tier primary system: cobalt blue for commerce CTAs, black for marketing CTAs. Saturated semantic colors are reserved for status badges and promo banners.

Brand & Accent

Cobalt Primary

#0064e0

Buy-now CTA color

Deep Cobalt

#0457cb

Pressed-state, dark surfaces

Soft Cobalt 15%

#0091ff @ 15%

Informational tints

Facebook Blue

#1876f2

Form-control activation

Meta Link Blue

#385898

Legacy nav, footer links

Oculus Purple

#a121ce

VR product accent

Surface

Canvas White

#ffffff

Page + card background

Soft Cloud

#f1f4f7

Thumbnails, search-pill

Hairline Gray

#ced0d4

Input borders

Hairline Soft

#dee3e9

Card dividers

Text

Deep Ink

#0a1317

Primary headlines

Ink

#1c1e21

Body text

Charcoal

#444950

Tertiary text

Steel

#5d6c7b

Caption text

Stone

#8595a4

Disabled labels

Semantic

Success

#31a24c

In-stock, free returns

Attention

#f2a918

Mid-priority alerts

Warning

#f7b928

Promo banners, limited-time

Critical

#e41e3f

Error states

Critical Strong

#f0284a

Form input error border

Typography Scale

Optimistic VF anchors the system from 64px hero displays to 12px captions. Stylistic sets ss01 + ss02 are switched on across every heading role; negative letter-spacing tightens body copy.

hero-display64px / 500 / 1.16 / ss01,ss02

The quick brown fox

display-lg48px / 500 / 1.17

The quick brown fox

heading-lg36px / 500 / 1.28

Why buy from Meta

heading-md28px / 300 / 1.21

Look forward — editorial subhead

heading-sm24px / 500 / 1.25

Card title

subtitle-lg18px / 700 / 1.44

Bold callout for FAQ questions

subtitle-md18px / 400 / 1.44

Regular subtitle for body lead

body-md16px / 400 / 1.50 / -0.16px

Primary body text. The system uses negative letter-spacing to tighten Optimistic VF's metrics for refined feel.

body-md-bold16px / 700 / 1.50 / -0.16px

Bold body emphasis and link-md token

body-sm14px / 400 / 1.43 / -0.14px

Secondary body and helper text used in captions and form labels

body-sm-bold14px / 700 / 1.43 / -0.14px

Pill tab labels, footer headings, button base

caption12px / 400 / 1.33

Footer fine print, legal microcopy, timestamps

button-md14px / 700 / 1.43 / -0.14px

PILL BUTTON LABEL

Button Variants

Pill-shaped buttons everywhere. The system has TWO primary CTAs: black for marketing, cobalt for buy-now.

button-primaryBlack pill — marketing CTA

button-buy-ctaCobalt pill — commerce CTA

button-secondaryOutlined ghost

button-ghostQuiet outline

button-pill-tabInactive nav tab

button-pill-tab-activeActive nav tab

button-icon-circular40×40 utility

button-primary-disabledDisabled state

Badges & Status

Pill-shaped status indicators reuse the brand's full-radius geometry. Backgrounds carry the saturated semantic colors directly.

Limited time Almost gone In stock Out of stock

promo-banner — full-width strip above the top nav

Cards & Containers

Photographic feature cards (32px rounded), icon-feature tiles (16px rounded), and a sticky checkout summary with subtle elevation.

Designed for sport

Rugged, water-resistant frames for everyday adventure.

Built for prescriptions

Customized for your fit, vision, and style.

Icon Feature Tiles (Why buy from Meta)

⚡

Free 2-day delivery

Get it tomorrow on orders over $50

↺

Free 30-day returns

Risk-free returns on every order

🛡

Worry-free warranty

Full 1-year coverage included

Buy now, pay later

Flexible financing available at checkout

Checkout Summary (PDP right rail)

Skyler (Gen 2)

$379$429

Limited timeIn stock

Color

Signature Components

Components unique to Meta's commerce surfaces — radio-option configurators, color/SKU picker grids, FAQ accordion, tech-specs table, customer testimonial cards.

Radio Option (Configurator)

128 GB

Standard storage — $299

256 GB

Recommended — $379

512 GB

For extensive libraries — $499

Color & SKU Picker Row

Skyler — Black$379

Skyler — Tortoise$379

Skyler — Slate$379

Skyler — Sand$379

Skyler — Teal$379

Skyler — Wine$379

Color Swatch Circles

Product Thumbnails (PDP gallery)

FAQ Accordion

What is the battery life of Meta Quest 3S? ⌃

Approximately 2.5 hours of mixed-use video and gaming on a single charge. Charging time from 0 to 100 percent is approximately 2.3 hours.

What is the warranty period on Meta Quest 3S? ⌄

Standard 1-year manufacturer warranty included.

Can I use prescription lenses with my glasses? ⌄

Yes — prescription lenses can be ordered through the Meta prescription program.

Tech Specs Table

Display

Resolution2064 × 2208 pixels per eye

Refresh Rate90 Hz / 120 Hz (experimental)

Storage & Battery

Internal Storage128 GB / 256 GB

Battery Life~2.5 hours mixed use

Customer Testimonial Cards

The form-factor finally caught up with the dream. Wearing them daily — they vanish on my face.

Verified buyer

Skyler — Gen 2 owner

Setup was effortless. My kids were inside Beat Saber within five minutes.

Verified buyer

Quest 3S owner

Elevation & Depth

Three layers — flat default, subtle indicator, sticky panel. Photography carries depth on marketing surfaces.

Level 0 — Flatborder + hairline-soft

Default product cards, why-buy tiles

Level 1 — Subtlergba(0,0,0,0.2) 1px 1px

Pill tab activation indicator

Level 2 — Sticky panelrgba(20,22,26,0.3) 0 1px 4px

PDP purchase rail, mobile checkout bar

Responsive Behavior

Mobile-first reflow: hero stacks, pill nav becomes hamburger, three-up grids flatten, PDP rail becomes sticky bottom bar.

Breakpoint	Width	Key Changes
Mobile (small)	< 480px	Single column. Hero drops to display-lg. Pill tabs collapse to hamburger. PDP rail → 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 at compressed 60/40.
Desktop	1024 – 1359px	Three- and four-up feature grids; full pill-tab nav; PDP at 58/42.
Wide Desktop	≥ 1360px	Wider hero gutters, larger product photography.

Device Ladder

375px

480px

768px

1024px

1360+

Touch Targets

Pill buttons render at 40–44px effective height — at WCAG AAA floor.
Circular icon buttons: 40×40px desktop, 44×44px on mobile.
Color swatch circles 32×32px with 12px clear hit zone (effective ~56px).
Form inputs render at 44px height to align with primary button height.

Collapsing Strategy

Promo banner stays full-width; truncates with ellipsis on small mobile.
Pill-tab nav below 768px collapses into hamburger drawer.
PDP layout: gallery stacks above purchase summary at < 1024px; sticky bottom bar at < 768px.
Feature grids (3-up, 4-up) → 2-up at tablet → 1-up at mobile.
Hero typography: hero-display (64px) → heading-lg (36px) at < 768px → heading-sm (24px) at < 480px.
Footer: 6-column desktop → 2-column tablet → accordion-collapsed mobile.

Design System Inspiration of Meta

Color Palette

Brand & Accent

Surface

Text

Semantic

Typography Scale

Button Variants

Badges & Status

Cards & Containers

Designed for sport

Built for prescriptions

Icon Feature Tiles (Why buy from Meta)

Free 2-day delivery

Free 30-day returns

Worry-free warranty

Buy now, pay later

Checkout Summary (PDP right rail)

Forms & Inputs

Signature Components

Radio Option (Configurator)

Color & SKU Picker Row

Color Swatch Circles

Product Thumbnails (PDP gallery)

FAQ Accordion

Tech Specs Table

Customer Testimonial Cards

Spacing Scale

Border Radius Scale

Elevation & Depth

Responsive Behavior

Device Ladder

Touch Targets

Collapsing Strategy

Design System Inspiration of Meta

Color Palette

Brand & Accent

Surface

Text

Semantic

Typography Scale

Button Variants

Badges & Status

Cards & Containers

Designed for sport

Built for prescriptions

Meta Quest brings the magic of virtual reality.

Icon Feature Tiles (Why buy from Meta)

Free 2-day delivery

Free 30-day returns

Worry-free warranty

Buy now, pay later

Checkout Summary (PDP right rail)

Forms & Inputs

Signature Components

Radio Option (Configurator)

Color & SKU Picker Row

Color Swatch Circles

Product Thumbnails (PDP gallery)

FAQ Accordion

Tech Specs Table

Customer Testimonial Cards

Spacing Scale

Border Radius Scale

Elevation & Depth

Responsive Behavior

Device Ladder

Touch Targets

Collapsing Strategy