packages/shared-skills/skills/frontend/references/design/meta.md
The Meta Store is a product-forward retail experience built to sell hardware — Quest VR headsets, Ray-Ban Meta smart glasses, and accessories. The design walks a tightrope between consumer electronics showroom and lifestyle editorial, deploying cinematic product photography against expansive white canvas to create a gallery-like sense of aspiration. Every design decision serves the merchandise: generous negative space frames hero product shots like museum pieces, while alternating light and dark surface sections create a visual rhythm that mimics the experience of walking through a physical retail space.
The "Dolly" design system (Meta's internal name for the store layer) sits atop the broader FDS (Facebook Design System) foundation, inheriting its gray scale and semantic tokens while overlaying its own product-focused palette. The result is a system that feels distinctly Meta — the custom Optimistic typeface brings warmth and approachability to what could otherwise be cold tech retail — yet flexible enough to showcase wildly different product lines (from VR headsets to fashion eyewear) without feeling disjointed. The surface strategy is binary: pure white for browsing and information, rich dark for immersive product moments.
The store's visual hierarchy is ruthlessly simple. Photography does the heavy lifting, supported by short, punchy headlines in Optimistic Medium and body text that stays brief and scannable. Calls to action are pill-shaped, unmistakable, and always Meta Blue. There is no visual noise, no decoration for decoration's sake — every element either sells or navigates.
Key Characteristics:
#0064E0): Primary CTA background, interactive links, action-driving elements throughout the store#0143B5): Darkened blue for hover states on primary buttons#004BB9): Deepest blue for active/pressed button states#47A5FA): Lighter blue variant used on dark backgrounds for CTAs#1877F2): Legacy accent inherited from FDS, used for deemphasized button text and badges#D6311F): Product-specific accent for Ray-Ban Meta smart glasses sections#A121CE): Quest/Oculus product accent for VR content#6441D2): Accent for Meta for Work/enterprise content#1B365D): Deep navy accent for Portal product line#C8E4E8): Soft teal-blue for Portal hero backgrounds#ADD4E0): Secondary Portal surface tint#FFFFFF): Primary page canvas, nav bar background, card surfaces#F1F4F7): Secondary background for content sections (--dolly-bg-grey)#F7F8FA): Flat card background, subtle surface differentiation#F0F2F5): Deemphasized background areas, attachment footers#F2F0E6): Warm off-white for lifestyle-adjacent sections#E8F3FF): Highlight background, subtle blue tint for informational areas#1C1E21): Dark section backgrounds, immersive product showcase areas#181A1B): Slightly warm dark surface for Quest product sections#000000): Pure black for maximum contrast product displaysrgba(0, 0, 0, 0.6)): Modal/lightbox backdrop#050505): Main body and heading text on light surfaces#1C2B33): Dolly system primary text, slightly warmer than pure black (--dolly-text-primary)#465A69): Secondary icon fills, subdued UI elements#65676B): Supporting copy, labels, timestamps (--secondary-text)#5D6C7B): Meta Store secondary text, product descriptions (--dolly-text-secondary)#4B4C4F): Mid-gray for section titles#444950): FDS button text default (--fds-button-text)#BCC0C4): Inactive button labels, placeholder text#8595A4): Muted blue-gray for disabled interactive labels#CED0D4): Content separators, input borders#DEE3E9): Lighter divider for Dolly sections#CBD2D9): Outline button borders#909396): Stronger outline for emphasis#31A24C): Badge success background, positive indicators#007D1E): Darker success green for Dolly store confirmations#E41E3F): Critical badge background, notification badges#C80A28): Darker error red for Dolly store error states#F7B928): Attention badges, caution indicatorsrgba(36, 228, 0, 0.15)): Subtle success background tintrgba(255, 123, 145, 0.15)): Subtle error background tintrgba(255, 226, 0, 0.15)): Subtle warning background tintrgba(0, 145, 255, 0.15)): Subtle informational blue tint#F3425F): Expressive accent#9360F7): Purple accent#45BD62): Green accent#54C7EC): Cyan accent#2ABBA7): Teal accent#FB724B): Orange accent#FF66BF): Pink accentlinear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6)) — applied over dark product photography for text legibilityPrimary: Optimistic VF (variable font by Dalton Maag, commissioned by Meta)
"ss01", "ss02" — stylistic sets that activate Meta-specific alternate glyphsSecondary: Helvetica
| Role | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|
| Display 1 | 64px | 500 (Medium) | 1.16 | — | Hero headlines on desktop, ss01+ss02 |
| Display 2 | 48px | 500 (Medium) | 1.17 | — | Section heroes, product titles |
| Heading 1 | 36px | 500 (Medium) | 1.28 | — | Major section headings |
| Heading 2 | 28px | 300 (Light) | 1.21 | — | Subheadings, lighter feel |
| Heading 3 | 18px | 700 (Bold) | 1.44 | — | Card titles, bold callouts, ss01+ss02 |
| Body | 18px | 400 (Regular) | 1.44 | — | Product descriptions, body copy |
| Body Compact | 16px | 500 (Medium) | 1.50 | -0.16px | Navigation links, UI labels |
| Caption Bold | 14px | 700 (Bold) | 1.43 | — | Emphasized labels, price text |
| Caption | 14px | 400 (Regular) | 1.43 | -0.14px | Secondary labels, metadata |
| Small | 12px | 400 (Regular) | 1.33 | — | Footer links, legal text, timestamps |
| Button | 14px | 400 (Regular) | 1.43 | -0.14px | Button label text |
Optimistic VF is the cornerstone of Meta's typographic identity — a humanist sans-serif with geometric underpinnings that strikes a balance between Silicon Valley precision and consumer warmth. The "ss01" and "ss02" stylistic sets introduce alternate glyphs that give headlines a distinctive Meta character. Weight 500 (Medium) dominates headlines, creating a presence that commands without shouting, while the unexpected use of weight 300 (Light) at 28px adds an airy, editorial quality to subheadings. Negative letter-spacing at smaller sizes (-0.14px to -0.16px) tightens the optical rhythm for UI elements, keeping the reading experience crisp and efficient.
Primary (Pill)
#0064E0)#FFFFFF)#0143B5, scale(1.1) transform#004BB9, scale(0.9), opacity 0.5Secondary (Outlined Pill)
#1C2B33) at 50% opacityrgba(10, 19, 23, 0.12)rgba(70, 90, 105, 0.7), text to whiteGhost/Link Button
rgba(255, 255, 255, 0)#385898)Disabled
#DEE3E9 (--dolly-cta-disabled)#8595A4 (--dolly-cta-disabled-text)#FFFFFF) or Flat Gray (#F7F8FA)0 12px 28px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.1) (elevated cards)#FFFFFF)#CED0D4 (--input-border-color)hsl(214, 89%, 52%), 3px outer ringhsl(350, 87%, 55%)#65676B (--secondary-text)#FFFFFF), sticky at toprgba(241, 244, 247, 0.8) with backdrop-filter blur#1C2B33)rgba(0,0,0,0.1) separatorlinear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6))#181A1B or #000000), white/light text, purple accents (#A121CE)#D6311F), linen tones (#F2F0E6)#C8E4E8, #ADD4E0), navy accents (#1B365D)Base unit: 8px
| Token | Value | Use |
|---|---|---|
| space-1 | 1px | Hairline borders |
| space-2 | 4px | Tight internal padding |
| space-3 | 8px | Base unit, icon gaps |
| space-4 | 10px | Card horizontal padding |
| space-5 | 12px | Button icon spacing, tight margins |
| space-6 | 14px | Caption line height spacing |
| space-7 | 16px | Standard paragraph spacing, nav padding |
| space-8 | 18px | Body text vertical rhythm |
| space-9 | 24px | Card section spacing, grid gaps |
| space-10 | 32px | Section content padding |
| space-11 | 40px | Major content block spacing |
| space-12 | 48px | Section vertical padding (compact) |
| space-13 | 64px | Section vertical padding (standard) |
| space-14 | 80px | Hero section padding, large section gaps |
Whitespace is the store's primary luxury signifier. Sections breathe with 64-80px vertical padding, creating a sense of unhurried browsing. Product images float in generous negative space rather than being crammed edge-to-edge. This restrained spacing communicates premium positioning — the visual equivalent of wide aisles in a high-end retail store.
| Value | Context |
|---|---|
| 8px | Inputs, small UI elements, glimmer placeholders |
| 20px | Cards (--card-corner-radius) |
| 24px | Feature cards, product highlight areas, ghost buttons |
| 100px | Pill buttons, tags, badges (fully rounded) |
| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, background differentiation only | Default cards, sections |
| Level 1 | 0 2px 4px 0 rgba(0,0,0,0.1) | Subtle lift for interactive cards |
| Level 2 | 0 12px 28px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.1) | Elevated cards, dropdowns |
| Overlay | rgba(0,0,0,0.6) full-screen | Modal/lightbox backdrop |
| Inset | rgba(255,255,255,0.5) inset | Inner glow on glass-effect surfaces |
The Meta Store favors a primarily flat elevation model. Most surface differentiation comes from background color shifts (white → soft gray → dark) rather than shadows. When shadows appear, they are soft, diffused, and use the dual-shadow pattern (a large blurred shadow for ambient light + a small sharp shadow for direct light). This creates a physically plausible depth feel without heavy visual weight.
rgba(241, 244, 247, 0.8) background with backdrop-filter blur, creating a translucent navigation barlinear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6)) overlay on product photography for text legibility#979A9F base color with 8px radius, 1000ms steps timing — used for skeleton screens during product image loading#0064E0) exclusively for actionable elements#1877F2) as a primary CTA color — use Meta Blue (#0064E0) instead| Name | Width | Key Changes |
|---|---|---|
| Mobile | <768px | Single column, hamburger nav, hero text shrinks to 36px, full-width product cards, 48px section padding |
| Tablet | 768-1024px | 2-column product grid, compact nav, hero text at 48px |
| Desktop | 1024-1440px | 3-column product grid, full horizontal nav, hero text at 64px, 80px section padding |
| Large Desktop | >1440px | Max-width container (1440px) centered, increased horizontal margins |
#0064E0)#FFFFFF)#1C2B33)#5D6C7B)#DEE3E9)#F1F4F7)#1C1E21)linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6)) text overlay, Optimistic-style 64px/500 white headline, and a Meta Blue (#0064E0) pill button (100px radius, 10px 22px padding)"#5D6C7B), and 24px grid gap"rgba(241, 244, 247, 0.8) frosted glass effect, 16px/500 dark text links, and a right-aligned Meta Blue pill CTA"#1C1E21 background, white 48px/500 headline, #5D6C7B body text, and a secondary outlined pill button with rgba(10, 19, 23, 0.12) border"#F1F4F7) background, 24px rounded cards, Meta Blue checkmark icons, and 14px/700 bold labels"When refining existing screens generated with this design system:
#181A1B, pure black #000000, or standard dark #1C1E21)