Design System Inspired by Meta

A visual token catalog generated from DESIGN.md — every color, type scale, and component in one page.

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
rgba(255,255,255,0.15) border
Meta Blue Light #47A5FA
24px radius
BG #3A3B3C
Text #606770

Card Examples

20px rounded corners with dark surface variants.

Default Card

Dark surface (#242526) with subtle border. Border brightens on hover for depth cue.

Flat Card

Slightly lighter surface (#2D2F31). Color differentiation only, no border.

Elevated Card

Deeper shadows on dark backgrounds. Border provides the primary depth separation.

Form Elements

Dark surface inputs with blue focus ring.

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

Dark mode relies on borders and surface shifts over shadows.

Flat

Subtle border only. Default card state on dark surfaces.

Level 1

0 2px 4px rgba(0,0,0,0.3). Deeper shadow needed on dark backgrounds.

Level 2

Dual shadow intensified for dark mode. Border provides the primary depth cue.

Overlay

Translucent white surface. Used for modal-like elements on dark backgrounds.

Inset

Subtle inner glow on slightly lighter surface. Frosted glass effect.