Meta (Store)

Identity

E-Commerce & Retail

Bundled OpenDesign package for Meta (Store), derived from curated DESIGN.md, tokens.css, and components.html fixtures.

Typography

Optimistic VFDisplay

Optimistic VFBody

Ag

ui-monospaceMono

--text-4xl · 64pxThe quick brown fox

--text-3xl · 48pxThe quick brown fox

--text-2xl · 36pxThe quick brown fox

--text-xl · 28pxThe quick brown fox

--text-lg · 18pxThe quick brown fox

--text-base · 16pxThe quick brown fox

--text-sm · 14pxThe quick brown fox

--text-xs · 12pxThe quick brown fox

Palette

--bg#ffffffPage background — defines the brand canvas.

--surface#f7f8faCard / lifted container background.

--surface-warm#f2f0e6Tertiary surface tier (kami warm-sand).

--fg#1c2b33Primary text color.

--fg-2#5d6c7bSecondary text tier (kami dark-warm).

--muted#65676bSubtext / captions.

--meta#8595a4Tertiary FG / metadata tier (kami stone).

--border#ced0d4Default border / card edge.

--border-soft#dee3e9Inner row separator that should not visually compete.

--accent#0064e0Brand accent. ≤2 visible uses per screen (lint enforced).

--accent-on#ffffffFG when --accent is the bg.

--success#31a24cSuccess state.

--warn#f7b928Warning state.

--danger#e41e3fDanger state.

Also named in DESIGN.md

Meta Blue Hover#0143b5Darkened blue for hover states on primary buttons

Meta Blue Pressed#004bb9Deepest blue for active/pressed button states

Meta Blue Light#47a5faLighter blue variant used on dark backgrounds for CTAs

Facebook Blue#1877f2Legacy accent inherited from FDS, used for deemphasized button text and badges

Ray Ban Red#d6311fProduct-specific accent for Ray-Ban Meta smart glasses sections

Oculus Purple#a121ceQuest/Oculus product accent for VR content

Work Purple#6441d2Accent for Meta for Work/enterprise content

Portal Blue#1b365dDeep navy accent for Portal product line

Portal Hero Blue#c8e4e8Soft teal-blue for Portal hero backgrounds

Portal Light Blue#add4e0Secondary Portal surface tint

Imagery & layout

Radius

--radius-sm8px

--radius-md20px

--radius-lg24px

--radius-pill100px

Spacing

--space-1 · 4px

--space-2 · 8px

--space-3 · 12px

--space-4 · 16px

--space-5 · 20px

--space-6 · 24px

--space-8 · 32px

--space-12 · 48px

Elevation

--elev-raised

Layout

Layout rules

Max container width: ~1440px, centered with auto margins
Product grid: 3-column on desktop, 2-column on tablet, 1-column on mobile
Feature grid: 2-column split (image + content), stacks on mobile
Grid gap: 24px between cards, 16px on mobile
Page horizontal padding: 24-40px depending on breakpoint

Component kit

Light Dark