Color Palette

Every color from the Meta Store design system with semantic roles.

Primary

Meta Blue
#0064E0
Primary CTA
Meta Blue Hover
#0143B5
Hover state
Meta Blue Pressed
#004BB9
Active state
Meta Blue Light
#47A5FA
CTA on dark bg
Facebook Blue
#1877F2
Legacy accent

Secondary & Accent

Ray-Ban Red
#D6311F
Ray-Ban sections
Oculus Purple
#A121CE
Quest/VR accent
Work Purple
#6441D2
Enterprise accent
Portal Blue
#1B365D
Portal product
Portal Hero Blue
#C8E4E8
Portal hero bg
Portal Light Blue
#ADD4E0
Portal surface

Surface & Background

White
#FFFFFF
Primary canvas
Soft Gray
#F1F4F7
Secondary bg
Warm Gray
#F7F8FA
Flat card bg
Web Wash
#F0F2F5
Deemphasized bg
Linen
#F2F0E6
Lifestyle sections
Baby Blue
#E8F3FF
Highlight bg
Near Black
#1C1E21
Dark sections
Oculus Light
#181A1B
Quest dark

Neutrals & Text

Primary Text
#050505
Main body text
Dark Charcoal
#1C2B33
Dolly primary text
Icon Secondary
#465A69
Secondary icons
Secondary Text
#65676B
Labels, timestamps
Slate Gray
#5D6C7B
Product descriptions
Disabled Text
#BCC0C4
Inactive labels
Divider
#CED0D4
Content separators
Divider Gray
#DEE3E9
Light dividers

Semantic

Success Green
#31A24C
Positive indicator
Store Success
#007D1E
Store confirmations
Error Red
#E41E3F
Critical badge
Store Error
#C80A28
Store error states
Warning Amber
#F7B928
Attention badge

Base Spectrum (FDS)

Cherry
#F3425F
Expressive accent
Grape
#9360F7
Purple accent
Lime
#45BD62
Green accent
Seafoam
#54C7EC
Cyan accent
Teal
#2ABBA7
Teal accent
Tomato
#FB724B
Orange accent
Pink
#FF66BF
Pink accent

Typography Scale

Optimistic VF hierarchy — Montserrat as Google Font substitute.

Display 1
Display 1 — 64px / 500 / 1.16 / — / Hero headlines
Display 2
Display 2 — 48px / 500 / 1.17 / — / Section heroes
Heading 1
Heading 1 — 36px / 500 / 1.28 / — / Major section headings
Heading 2
Heading 2 — 28px / 300 / 1.21 / — / Subheadings, airy feel
Heading 3
Heading 3 — 18px / 700 / 1.44 / — / Card titles, bold callouts
Body text renders at 18px regular weight with comfortable line height.
Body — 18px / 400 / 1.44 / — / Product descriptions
Body Compact
Body Compact — 16px / 500 / 1.50 / -0.16px / Nav links, UI labels
Caption Bold
Caption Bold — 14px / 700 / 1.43 / — / Price text, emphasis
Caption text for secondary labels and metadata
Caption — 14px / 400 / 1.43 / -0.14px / Secondary labels
Small text for footers, legal copy, and timestamps
Small — 12px / 400 / 1.33 / — / Footer links, legal text

Button Variants

All pill-shaped — the Meta Store signature shape.

Meta Blue #0064E0
100px radius, 10px 22px
Outlined pill
2px border rgba(10,19,23,0.12)
Link Blue #385898
24px radius, 4px 12px
BG #DEE3E9
Text #8595A4

Card Examples

20px rounded corners with flat and elevated variants.

Default Card

White background with subtle border. Lifts on hover with dual-shadow pattern — ambient + direct light.

Flat Card

Warm Gray (#F7F8FA) background, no border. Surface differentiation through color only.

Elevated Card

Pre-elevated with dual shadow: 12px/28px ambient + 2px/4px direct. No border needed.

Form Elements

8px radius inputs with blue focus ring and red error states.

This field is required

Spacing Scale

8px base unit system from 1px to 80px.

1px
4px
8
8px
12
12px
16
16px
24
24px
32
32px
40
40px
48
48px
64
64px
80
80px

Border Radius Scale

From sharp inputs to fully rounded pills.

8px
Inputs, small UI
20px
Cards
24px
Feature cards
100px
Pill buttons, badges

Elevation & Depth

Primarily flat with soft dual-shadow when elevated.

Flat

No shadow. Background differentiation only. Default state for cards and sections.

Level 1

0 2px 4px rgba(0,0,0,0.1). Subtle lift for interactive cards on hover.

Level 2

Dual shadow: 12px/28px ambient + 2px/4px direct. Elevated cards, dropdowns.

Overlay

rgba(0,0,0,0.6) full-screen backdrop for modals and lightboxes.

Inset

rgba(255,255,255,0.5) inset glow. Used on frosted glass-effect surfaces.