---
id: meta
name: Meta
country: US
category: consumer-tech
homepage: "https://about.meta.com"
primary_color: "#0064E0"
logo:
  type: simpleicons
  slug: "meta"
verified: "2026-06-06"
added: "2026-06-06"
omd: "0.1"
tokens:
  source: prose-derived
  extracted: "2026-06-09"
  colors:
    primary: "#0064e0"
    primary-light: "#0082fb"
    primary-bright: "#0080fb"
    primary-pressed: "#0058c4"
    canvas: "#ffffff"
    ink: "#1c2b33"
    ink-800: "#2d3a42"
    gray-700: "#465a69"
    gray-600: "#65676b"
    gray-500: "#8a8d91"
    gray-400: "#bcc0c4"
    border: "#e4e6eb"
    border-strong: "#ced0d4"
    canvas-gray: "#f0f2f5"
    surface-tint: "#f7f8fa"
    success: "#42b72a"
    success-text: "#2e8b1e"
    error: "#fa383e"
    warning: "#f5a623"
  typography:
    family: { sans: "Optimistic Text", mono: "SF Mono" }
    display-hero: { size: 56, weight: 700, lineHeight: 1.07, tracking: -0.02, use: "Marketing hero, Optimistic Display" }
    display-lg:   { size: 40, weight: 700, lineHeight: 1.20, tracking: -0.01, use: "Section headers" }
    display:      { size: 32, weight: 600, lineHeight: 1.25, tracking: -0.01, use: "Feature titles" }
    heading:      { size: 24, weight: 600, lineHeight: 1.33, use: "Card headings, modal titles" }
    subtitle:     { size: 20, weight: 600, lineHeight: 1.40, use: "Sub-section, list headers" }
    body-lg:      { size: 17, weight: 400, lineHeight: 1.53, use: "Lead paragraphs" }
    body:         { size: 15, weight: 400, lineHeight: 1.47, use: "Standard reading text" }
    body-sm:      { size: 13, weight: 400, lineHeight: 1.38, use: "Secondary info" }
    caption:      { size: 12, weight: 400, lineHeight: 1.33, use: "Timestamps, fine print" }
    button:       { size: 15, weight: 600, lineHeight: 1.33, use: "CTA labels" }
  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 28, xxl: 32, section: 48 }
  rounded: { sm: 6, md: 8, lg: 16, full: 9999 }
  shadow:
    standard: "0 1px 2px rgba(28,43,51,0.10)"
    featured: "0 4px 16px rgba(28,43,51,0.12)"
    gradient: "0 8px 32px rgba(0,100,224,0.30)"
    dialog: "0 12px 28px rgba(28,43,51,0.20)"
  components:
    button-primary: { type: button, bg: "#0064e0", fg: "#ffffff", radius: 8, padding: "12px 20px", font: "15px/600", use: "Product-surface primary action" }
    button-secondary: { type: button, bg: "#e4e6eb", fg: "#1c2b33", radius: 8, padding: "12px 20px", font: "15px/600", use: "Neutral secondary" }
    button-outline: { type: button, bg: "transparent", fg: "#0064e0", radius: 8, padding: "12px 24px", font: "15px/600", use: "Tertiary CTA Sign up" }
    input: { type: input, bg: "#ffffff", fg: "#1c2b33", radius: 8, padding: "12px 14px", font: "15px/400", use: "Standard form input" }
    input-filled: { type: input, bg: "#f0f2f5", fg: "#1c2b33", radius: 8, padding: "12px 14px", font: "15px/400", use: "Search bars, dense forms" }
    card: { type: card, bg: "#ffffff", radius: 12, padding: "16px", use: "Feed cards, content panels" }
    badge-notif: { type: badge, bg: "#fa383e", fg: "#ffffff", radius: 9999, padding: "2px 6px", font: "12px/700", use: "Unread count red dot" }
    badge-status: { type: badge, fg: "#0064e0", radius: 9999, padding: "4px 10px", font: "12px/600", use: "Soft informational label New" }
    tab: { type: tab, bg: "transparent", fg: "#65676b", active: "3px bottom border #0064e0 with #0064e0 text", font: "15px/600", use: "In-page section nav" }
    segmented: { type: tab, bg: "#f0f2f5", fg: "#65676b", radius: 8, padding: "8px 16px", active: "#ffffff bg with #1c2b33 text", font: "14px/600", use: "Mode switching" }
    toast: { type: toast, bg: "#1c2b33", fg: "#ffffff", radius: 8, padding: "12px 16px", font: "14px/500", use: "Transient confirmation Link copied" }
    dialog: { type: dialog, bg: "#ffffff", fg: "#1c2b33", radius: 12, padding: "24px", use: "Confirmations, composer dialogs" }
    toggle: { type: toggle, bg: "#0064e0", radius: 9999, use: "Boolean settings, on=blue off=#bcc0c4" }
  components_harvested: true
---

# Design System Inspiration of Meta

## 1. Visual Theme & Atmosphere

Meta is the rebrand of Facebook, Inc. into a company organized around connection across the social graph, devices, and the immersive web. Where the old Facebook interface was a wall of utilitarian `#1877F2` blue, the Meta brand is built around motion, depth, and an optimistic gradient that flows from a deep, trustworthy blue (`#0064E0`) into a brighter, almost luminescent cerulean (`#0082FB`). The infinity mark — a continuous 3D loop that reads equally well in 2D and in spatial/AR contexts — is the visual anchor: it signals "unlimited" without shouting.

The atmosphere is **big-tech confident but human**. Pages open on generous white (`#FFFFFF`) or a near-black ink (`#1C2B33`) depending on surface, with the blue gradient reserved for moments of brand energy: hero washes, CTA fills, focus rings, and the logo itself. This is not the flat, single-blue Facebook of 2012; it's a layered system where the gradient implies a third dimension, echoing the company's bet on immersive computing.

The custom **Optimistic** type superfamily (Optimistic Display for headlines, Optimistic Text for body) is the quiet workhorse. Purpose-built for Meta's surfaces, it carries warm, slightly humanist letterforms that keep a trillion-impression interface from feeling robotic. The system leans on large, friendly display sizing, roomy line-height, and a restrained neutral palette so the blue gradient always wins the eye.

**Key Characteristics:**
- Meta Blue gradient (`#0064E0` → `#0082FB`) as the signature brand energy — depth, trust, optimism
- Optimistic Display / Optimistic Text custom superfamily, warm humanist sans
- Near-black ink `#1C2B33` (not pure black) for text and dark surfaces
- Generous whitespace, large friendly display type, single-column hero rhythm
- Gradient and motion imply a third dimension — a nod to immersive computing
- Pill and large-radius buttons (28px+), soft elevation, minimal hard borders
- Accessibility-first contrast; blue reserved for interaction and brand moments

## 2. Color Palette & Roles

### Primary
- **Meta Blue** (`#0064E0`): Primary brand blue. The trustworthy anchor of the gradient — CTA fills, links, focus, active states. The workhorse interactive color.
- **Meta Light Blue** (`#0082FB`): The bright terminus of the brand gradient. Used as the top/right stop in gradient fills, hover lift, and luminous accents.
- **Meta Blue Bright** (`#0080FB`): Near-twin bright blue used in lighter UI accents and link hover on dark surfaces.
- **Pure White** (`#FFFFFF`): Page background, card surfaces, button text on blue.
- **Meta Ink** (`#1C2B33`): Primary heading and body ink. A blue-gray near-black, not `#000000` — softer, warmer, on-brand.

### Brand Gradient
- **Brand Gradient**: `linear-gradient(120deg, #0064E0 0%, #0082FB 100%)`. The infinity-mark gradient. Hero washes, primary CTA fills, brand splash, focus glows. Always blue-to-blue, never blended with off-brand hues.
- **Gradient Deep Stop** (`#0064E0`): bottom-left anchor.
- **Gradient Light Stop** (`#0082FB`): top-right luminance.

### Semantic
- **Success Green** (`#42B72A`): Positive confirmations, online presence, completed states. (Legacy Facebook green, retained for system semantics.)
- **Error Red** (`#FA383E`): Errors, destructive actions, validation failures.
- **Warning Amber** (`#F5A623`): Caution, pending, attention-needed.
- **Info Blue** (`#0064E0`): Informational accents reuse the primary blue.

### Neutral Scale
- **Ink 900** (`#1C2B33`): Primary text, dark surfaces. The brand near-black.
- **Ink 800** (`#2D3A42`): Strong labels, dark-surface elevation.
- **Gray 700** (`#465A69`): Emphasized body, sub-headings.
- **Gray 600** (`#65676B`): Body text, descriptions (Facebook system secondary text).
- **Gray 500** (`#8A8D91`): Caption text, secondary labels, metadata.
- **Gray 400** (`#BCC0C4`): Placeholder text, disabled icon fills, dividers.
- **Gray 200** (`#E4E6EB`): Default border, divider, input fill on light.
- **Gray 100** (`#F0F2F5`): Secondary background, card fills, the classic Facebook canvas gray.
- **Gray 50** (`#F7F8FA`): Lightest surface tint.

### Surface & Borders
- **Border Default**: `#E4E6EB`. Standard card borders, dividers, input outlines.
- **Border Strong**: `#CED0D4`. Emphasized borders, active input outline base.
- **Surface Raised**: `#FFFFFF` on a `#F0F2F5` canvas — the core Facebook layering pattern.
- **Overlay Scrim**: `rgba(28,43,51,0.6)`. Modal backdrops, ink-tinted dimming.

## 3. Typography Rules

### Font Family
- **Display**: `"Optimistic Display", "Helvetica Neue", Helvetica, Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`
- **Text**: `"Optimistic Text", "Helvetica Neue", Helvetica, Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`
- **System fallback** (Facebook product surfaces): `system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`
- **Monospace**: `"SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace`

Optimistic Display is tuned for large headline sizes; Optimistic Text is tuned for legibility at reading sizes. Use Display ≥ 24px, Text < 24px.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Optimistic Display | 56px | 700 | 60px (1.07) | -0.02em | Marketing hero headlines |
| Display Large | Optimistic Display | 40px | 700 | 48px (1.20) | -0.01em | Section headers |
| Display | Optimistic Display | 32px | 600 | 40px (1.25) | -0.01em | Feature titles |
| Heading | Optimistic Display | 24px | 600 | 32px (1.33) | normal | Card headings, modal titles |
| Subtitle | Optimistic Text | 20px | 600 | 28px (1.40) | normal | Sub-section, list headers |
| Body Large | Optimistic Text | 17px | 400 | 26px (1.53) | normal | Lead paragraphs |
| Body | Optimistic Text | 15px | 400 | 22px (1.47) | normal | Standard reading text (FB body size) |
| Body Small | Optimistic Text | 13px | 400 | 18px (1.38) | normal | Secondary info |
| Caption | Optimistic Text | 12px | 400 | 16px (1.33) | normal | Timestamps, fine print |
| Button Label | Optimistic Text | 15px | 600 | 20px (1.33) | normal | CTA labels |

### Principles
- **Display vs Text split**: Optimistic Display for ≥24px headlines (tight tracking, optical display weighting), Optimistic Text for body (looser tracking, larger x-height).
- **Three core weights**: 400 (body), 600 (emphasis/buttons), 700 (display headlines). Restraint over variety.
- **Negative tracking at scale**: Large display sizes tighten to `-0.01em`/`-0.02em`; body stays at normal tracking.
- **Roomy line-height for reading**: Body at ~1.47 keeps the dense social feed scannable.

## 4. Component Stylings

### Buttons

Meta/Facebook buttons favor large radii (often full pill on marketing surfaces, ~8px on product) and the blue gradient or solid Meta Blue for primary.

**Primary (Gradient)**
- Background: `linear-gradient(120deg, #0064E0 0%, #0082FB 100%)`
- Text: `#FFFFFF`
- Border: none
- Radius: 28px (pill on marketing) / 8px (product)
- Padding: 14px 28px
- Font: 15px / 600 / Optimistic Text
- Hover: brightness lift, light stop pushed to `#0A8CFF`
- Pressed: `#0058C4` solid overlay
- Disabled: opacity 0.4
- Use: Primary CTA on light surfaces ("Get started", "Learn more") — ~48px tall

**Primary (Solid)**
- Background: `#0064E0`
- Text: `#FFFFFF`
- Border: none
- Radius: 8px
- Padding: 12px 20px
- Font: 15px / 600 / Optimistic Text
- Hover: `#0058C4`
- Use: Product-surface primary action (Facebook/Instagram web parity)

**Secondary**
- Background: `#E4E6EB` (Gray 200)
- Text: `#1C2B33`
- Border: none
- Radius: 8px
- Padding: 12px 20px
- Font: 15px / 600 / Optimistic Text
- Hover: `#D8DADF`
- Use: Neutral secondary action paired with a primary

**Outline**
- Background: transparent
- Text: `#0064E0`
- Border: 1.5px solid `#0064E0`
- Radius: 28px / 8px
- Padding: 12px 24px
- Font: 15px / 600 / Optimistic Text
- Hover: `rgba(0,100,224,0.06)` fill
- Use: Tertiary CTA, "Sign up" alongside a gradient primary

**Ghost / Text**
- Background: transparent
- Text: `#0064E0`
- Border: none
- Radius: 6px
- Padding: 8px 12px
- Font: 15px / 600 / Optimistic Text
- Hover: `rgba(0,100,224,0.06)` fill
- Use: Inline links-as-buttons, low-emphasis actions

### Inputs

**Default (Box)**
- Background: `#FFFFFF`
- Text: `#1C2B33`
- Border: 1px solid `#CED0D4`
- Radius: 8px
- Padding: 12px 14px
- Font: 15px / 400 / Optimistic Text
- Placeholder: `#8A8D91`
- Focus: border `#0064E0` + `0 0 0 3px rgba(0,100,224,0.18)` ring
- Use: Standard form input

**Filled**
- Background: `#F0F2F5`
- Text: `#1C2B33`
- Border: 1px solid transparent
- Radius: 8px
- Padding: 12px 14px
- Font: 15px / 400 / Optimistic Text
- Focus: bg `#FFFFFF`, border `#0064E0`
- Use: Search bars, dense forms (classic FB search-field look)

**Error**
- Background: `#FFFFFF`
- Text: `#1C2B33`
- Border: 1px solid `#FA383E`
- Radius: 8px
- Padding: 12px 14px
- Font: 15px / 400 / Optimistic Text
- Focus: `0 0 0 3px rgba(250,56,62,0.18)` ring
- Use: Validation failure — paired with red helper text below

### Cards

**Standard**
- Background: `#FFFFFF`
- Border: none
- Radius: 12px
- Padding: 16px
- Shadow: `0 1px 2px rgba(28,43,51,0.10)`
- Use: Feed cards, content panels — the workhorse surface on `#F0F2F5` canvas

**Featured**
- Background: `#FFFFFF`
- Border: none
- Radius: 16px
- Padding: 24px
- Shadow: `0 4px 16px rgba(28,43,51,0.12)`
- Use: Marketing promo cards, hero modules

**Gradient Hero**
- Background: `linear-gradient(120deg, #0064E0 0%, #0082FB 100%)`
- Text: `#FFFFFF`
- Border: none
- Radius: 20px
- Padding: 32px
- Shadow: `0 8px 32px rgba(0,100,224,0.30)`
- Use: Brand hero blocks — the one place a colored shadow is licensed

**Compact (Bordered)**
- Background: `#FFFFFF`
- Border: 1px solid `#E4E6EB`
- Radius: 8px
- Padding: 12px
- Shadow: none
- Use: Inline list items where a 1px edge replaces shadow

### Badges

**Notification (count)**
- Background: `#FA383E`
- Text: `#FFFFFF`
- Border: 2px solid `#FFFFFF`
- Radius: 9999px
- Padding: 2px 6px
- Font: 12px / 700 / Optimistic Text
- Use: Unread counts on nav icons (the iconic FB red dot)

**Status / Pill**
- Background: `rgba(0,100,224,0.12)`
- Text: `#0064E0`
- Border: none
- Radius: 9999px
- Padding: 4px 10px
- Font: 12px / 600 / Optimistic Text
- Use: "New", category tags, soft informational labels

**Success Pill**
- Background: `rgba(66,183,42,0.14)`
- Text: `#2E8B1E`
- Border: none
- Radius: 9999px
- Padding: 4px 10px
- Font: 12px / 600 / Optimistic Text
- Use: Active / online / completed status

### Tabs

**Top Tab (Active)**
- Background: transparent
- Text: `#0064E0`
- Indicator: 3px bottom border `#0064E0`
- Inactive text: `#65676B`
- Font: 15px / 600 / Optimistic Text
- Use: In-page section navigation (FB profile tabs pattern)

**Segmented**
- Background: `#F0F2F5`
- Text: `#65676B`
- Border: none
- Radius: 8px
- Padding: 8px 16px
- Active: `#FFFFFF` bg + `#1C2B33` text + `0 1px 2px rgba(28,43,51,0.10)` shadow
- Font: 14px / 600 / Optimistic Text
- Use: Mode switching within a panel

### Toasts

**Default**
- Background: `#1C2B33`
- Text: `#FFFFFF`
- Border: none
- Radius: 8px
- Padding: 12px 16px
- Shadow: `0 4px 12px rgba(28,43,51,0.24)`
- Font: 14px / 500 / Optimistic Text
- Use: Transient confirmation ("Link copied"), bottom-anchored, 3s auto-dismiss

### Dialogs

**Centered Modal**
- Background: `#FFFFFF`
- Text: `#1C2B33`
- Border: none
- Radius: 12px
- Padding: 24px
- Shadow: `0 12px 28px rgba(28,43,51,0.20)`
- Backdrop: `rgba(28,43,51,0.6)`
- Use: Confirmations, composer dialogs, settings prompts

### Toggles

**Default**
- Background: `#0064E0` (on) / `#BCC0C4` (off)
- Border: none
- Radius: 9999px
- Thumb: `#FFFFFF` 20px circle with `0 1px 3px rgba(28,43,51,0.20)` shadow
- Use: Boolean settings, notification preferences

---

**Verified:** 2026-06-06
**Tier 1 sources:** about.meta.com / meta.com (live brand surface — blue gradient, Optimistic type, infinity mark); design.facebook.com/stories/designing-our-new-company-brand-meta (official rebrand story — gradient, infinity, Optimistic typeface) · https://about.meta.com (live production site)
**Tier 2 sources:** brandpalettes.com/meta-color-codes, brandcolorcode.com/meta-platforms (corroborate `#0082FB`, `#0064E0`, `#1C2B33`). Product-surface neutrals (`#F0F2F5`, `#65676B`, `#E4E6EB`, `#42B72A`) are documented Facebook system tokens.
**Surface split:** §4 documents both the **Meta marketing brand** (gradient CTAs, pill radii, Optimistic Display) and the **Facebook/Instagram product** lineage (solid `#0064E0`, 8px radii, `#F0F2F5` canvas). Both retained as parallel systems.

## 5. Layout Principles

### Spacing System
- Base unit: 4px
- Common values: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 48px, 64px, 96px
- Horizontal page gutter: 16px mobile, 24px tablet, growing to centered max-width on desktop
- Card internal padding: 16px (standard), 24px (featured)

### Grid & Container
- Marketing: 12-column grid, max content width ~1200px, centered
- Product (Facebook web): three-column shell — left rail, center feed (~600px), right rail
- Center feed column is the canonical content measure: ~500–600px for readability
- Mobile-first collapse to a single column under 768px

### Whitespace Philosophy
- **Room to breathe at brand moments**: hero sections use 96px+ vertical rhythm so the gradient and headline dominate.
- **Dense but layered in product**: the feed packs cards tightly on a `#F0F2F5` canvas, each card lifted on white — density without clutter.
- **Grouped by relationship**: related actions cluster at 8–12px gaps; distinct sections separate by 32–48px.

### Border Radius Scale
- Compact (6px): ghost buttons, small chips
- Standard (8px): inputs, product buttons, compact cards
- Comfortable (12px): standard cards, dialogs
- Large (16–20px): featured cards, gradient heroes
- Pill (28px / 9999px): marketing CTAs, badges, toggles

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page canvas, inline elements |
| Subtle (Level 1) | `0 1px 2px rgba(28,43,51,0.10)` | Feed cards, list separation |
| Standard (Level 2) | `0 4px 16px rgba(28,43,51,0.12)` | Featured cards, raised panels |
| Elevated (Level 3) | `0 8px 24px rgba(28,43,51,0.16)` | Dropdowns, popovers, menus |
| Modal (Level 4) | `0 12px 28px rgba(28,43,51,0.20)` | Dialogs, composer modals |
| Brand Glow | `0 8px 32px rgba(0,100,224,0.30)` | Gradient hero only — licensed colored shadow |

**Shadow Philosophy**: Meta uses ink-tinted (`#1C2B33`-based) neutral shadows for the product layering that defines Facebook's white-on-gray feel — elevation is communicated by lifting white cards off the `#F0F2F5` canvas. The *only* place a colored shadow appears is the brand gradient hero, where a blue glow reinforces the gradient's energy. Depth implies the company's third-dimension (immersive) ambition without literal skeuomorphism.

### Blur Effects
- Sticky headers apply subtle backdrop blur on scroll
- Overlay menus and the gradient hero may use a soft `backdrop-filter: blur(8px)` over imagery

## 7. Do's and Don'ts

### Do
- Use the Meta Blue gradient (`#0064E0` → `#0082FB`) for brand hero moments and primary marketing CTAs
- Use solid `#0064E0` for product-surface interactive elements (links, buttons, focus)
- Use Optimistic Display for headlines ≥24px, Optimistic Text for body
- Lift white cards off the `#F0F2F5` canvas with subtle ink-tinted shadows
- Use `#1C2B33` for text, never pure `#000000`
- Reserve the blue gradient for brand energy — it should feel special
- Use pill radii (28px+) on marketing CTAs, 8px on product surfaces

### Don't
- Don't blend the gradient with off-brand hues — it is always blue-to-blue
- Don't use the legacy flat Facebook `#1877F2` as the Meta brand color
- Don't apply colored shadows anywhere except the gradient hero
- Don't use pure black text or pure black backgrounds — use `#1C2B33`
- Don't mix Optimistic Display tracking onto small body text
- Don't overuse the gradient — once per view at most; it loses meaning if everywhere
- Don't set body weight above 400 except for emphasis (600) and headlines (700)

## 8. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <768px | Single column, 16px gutter, bottom nav, stacked hero |
| Tablet | 768–1024px | Two columns, 24px gutter, side margins appear |
| Desktop | 1024–1440px | Three-column product shell / 12-col marketing grid |
| Wide | >1440px | Centered max-width ~1200px, larger hero type |

### Touch Targets
- Buttons: minimum 44px height (48px for primary CTA)
- Icon buttons: 40px tap target minimum
- List rows: 48px+ minimum height

### Collapsing Strategy
- Three-column product shell collapses: right rail drops first, then left rail becomes a drawer
- Marketing hero stacks media below headline on mobile
- Sticky top nav becomes a bottom tab bar on mobile product surfaces
- Horizontal card carousels for discovery sections

### Image Behavior
- Hero imagery: full-bleed, gradient overlay for text legibility
- Avatars: circular, 40px standard, 24px compact, 56px+ profile
- Media in cards: full-width, rounded to card radius, aspect-ratio preserved

## 9. Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Meta Blue (`#0064E0`)
- Brand Gradient: `linear-gradient(120deg, #0064E0, #0082FB)`
- CTA Hover: `#0058C4`
- Background (product): Light Gray (`#F0F2F5`)
- Background (marketing): White (`#FFFFFF`)
- Heading text: Meta Ink (`#1C2B33`)
- Body text: Gray (`#65676B`)
- Caption text: Gray (`#8A8D91`)
- Placeholder: Gray (`#8A8D91`)
- Border: Gray 200 (`#E4E6EB`)
- Success: Green (`#42B72A`)
- Error: Red (`#FA383E`)
- Warning: Amber (`#F5A623`)

### Example Component Prompts
- "Create a gradient hero CTA: `linear-gradient(120deg,#0064E0,#0082FB)` bg, white text 15px weight 600, 28px radius, 14px 28px padding, brand glow shadow `0 8px 32px rgba(0,100,224,0.30)`."
- "Build a feed card: white bg, 12px radius, 16px padding, shadow `0 1px 2px rgba(28,43,51,0.10)` on a `#F0F2F5` canvas. Header avatar 40px circle + name 15px weight 600 #1C2B33 + timestamp 12px #8A8D91."
- "Design a search field: `#F0F2F5` filled bg, 8px radius, 12px 14px padding, 15px text #1C2B33, placeholder #8A8D91. Focus: white bg, 1px #0064E0 border, 3px rgba(0,100,224,0.18) ring."
- "Create a notification badge: #FA383E bg, white 12px weight 700 text, 9999px radius, 2px white border, 2px 6px padding, anchored top-right of a nav icon."
- "Design a primary product button: #0064E0 bg, white 15px weight 600, 8px radius, 12px 20px padding. Hover #0058C4. Disabled opacity 0.4."

### Iteration Guide
1. Use Optimistic Display for headlines (≥24px), Optimistic Text for body, with Helvetica/system fallbacks
2. Primary interactive color is `#0064E0`; brand gradient `#0064E0→#0082FB` is for hero/brand moments only
3. Text ink is `#1C2B33`, body gray `#65676B`, never pure black
4. Product surfaces: lift white cards off `#F0F2F5` canvas with subtle ink shadows
5. Radii: 8px product, 28px+ pill on marketing, 12px cards, 16–20px featured
6. Colored shadow only on the gradient hero; everywhere else ink-tinted neutral
7. Mobile-first; three-column product shell collapses right→left

---

## 10. Voice & Tone

Meta speaks with the optimism of a company betting on connection and the next computing platform — confident, forward-looking, plainspoken, and warm. It avoids hype-jargon where it can, favoring clear human sentences over technobabble. Copy is inclusive and second-person ("Build the future with us", "Connect with the people and things you love"). The tone is aspirational at the brand layer and utilitarian-friendly at the product layer.

| Context | Tone |
|---|---|
| CTAs | Imperative, short, optimistic (`Get started`, `Learn more`, `Build with Meta`) |
| Success toasts | Plain past-tense single line (`Link copied`, `Changes saved`). No exclamation spam. |
| Error messages | Specific, blameless, actionable. `Something went wrong. Try again.` only as last resort. |
| Onboarding | Second-person, one idea per step, warm and encouraging |
| Brand / mission | Aspirational, future-tense, connection-centered (`Bringing the metaverse to life`) |
| Empty states | Explain why it's empty + one action. Friendly, never cold. |
| Legal / privacy | Clear, direct, no dark patterns in copy — plainspoken consent language |

**Forbidden patterns.** Over-hyped superlatives ("revolutionary", "game-changing"), fear-based urgency, pure-black `#000000` text, the legacy flat `#1877F2` as a brand mark, gradient blends with non-blue hues.

## 11. Brand Narrative

In **October 2021**, Facebook, Inc. rebranded its parent company to **Meta**, signaling a strategic pivot from a single social network to a company organized around connection across social, devices, and the immersive web. The name derives from the Greek "beyond"; the **infinity mark** — a continuous 3D loop — was designed to live natively in both 2D screens and 3D/AR space, embodying "unlimited potential" and the company's bet on spatial computing.

The brand deliberately moved past Facebook's flat, utilitarian `#1877F2` blue. Meta's blue **gradient** (`#0064E0` deep, trustworthy; `#0082FB` bright, intelligent) carries forward the heritage blue while adding depth and motion — a literal third dimension that mirrors the immersive-computing thesis. A near-black `#1C2B33` (blue-gray, not pure black) signals stability and grounds the energetic blue. The custom **Optimistic** typeface superfamily was built to keep a planet-scale interface feeling human and warm rather than corporate and cold.

Meta operates a family of products — Facebook, Instagram, WhatsApp, Messenger, Threads — alongside Reality Labs hardware (Quest, Ray-Ban Meta glasses) and large-scale AI. The design system must therefore flex from dense, utilitarian product surfaces (the Facebook feed on its `#F0F2F5` canvas, packed with white cards) to expansive, gradient-washed brand and hardware marketing. The connective tissue is the blue gradient, the infinity mark, the Optimistic type, and a discipline of reserving brand energy for moments that earn it.

What Meta refuses: the cold institutional seriousness of legacy enterprise tech, the flat single-blue of old Facebook, and hype-driven copy that overpromises. It occupies a confident middle — big-tech scale with a human, optimistic surface.

## 12. Principles

1. **The gradient is brand energy — spend it carefully.** `#0064E0→#0082FB` appears at hero and primary-CTA moments, not as wallpaper. Used everywhere, it means nothing; used once per view, it sings.
2. **Depth implies the third dimension.** Shadows, the gradient, and the infinity loop all hint at spatial computing. Elevation is intentional, not decorative.
3. **Lift white off gray.** The core product pattern is white cards on a `#F0F2F5` canvas. Hierarchy comes from layering, not borders.
4. **Ink, not black.** `#1C2B33` everywhere a designer would reach for `#000000`. The warmth keeps a trillion impressions human.
5. **Display for headlines, Text for reading.** Optimistic Display ≥24px with tight tracking; Optimistic Text below, looser, larger x-height.
6. **Human optimism over hype.** Copy is confident and plainspoken. No fear-urgency, no empty superlatives.
7. **One blue, two roles.** Solid `#0064E0` is interaction (product); the gradient is brand (marketing). Don't confuse the two on a single surface.
8. **Scale demands restraint.** With billions of users, every ornamental choice multiplies. Default to the minimal, accessible option.

## 13. Personas

*Personas below are fictional archetypes informed by publicly described Meta product user segments, not individual people.*

**Maya, 24, Austin TX.** Creator and student. Lives in Instagram and Threads, posts daily, runs a small shop. Expects the interface to disappear behind her content — fast composer, frictionless upload, vivid media. The blue gradient reads to her as "the brand"; she notices when a CTA feels on-brand versus off. Mobile-first to the point that desktop is an afterthought.

**David, 41, Chicago.** Marketing manager who runs ad campaigns through Meta Business tools. Power user of dense, utilitarian product surfaces — tables, filters, dashboards on the `#F0F2F5` canvas. Values clarity and information density over polish. Trusts the blue for primary actions; wants secondary actions clearly de-emphasized in gray. Switches between desktop dashboards and mobile checks.

**Priya, 33, London.** Reality Labs early adopter — owns a Quest and Ray-Ban Meta glasses. Encounters the brand across hardware marketing, in-headset UI, and companion apps. Sensitive to the gradient and infinity mark as signals of the immersive-future story. Expects depth, motion, and a premium-but-optimistic tone. The consistency of Meta Blue across 2D and spatial surfaces is what makes the ecosystem feel coherent to her.

## 14. States

| State | Treatment |
|---|---|
| **Empty (first use)** | Friendly single-line explainer in `#65676B` body text + one primary action (`#0064E0` button). Light illustration acceptable on marketing, omitted on dense product. |
| **Empty (no results)** | Single `#8A8D91` caption line (`No results found`). Optional "Clear filters" ghost button. |
| **Loading (first paint)** | Skeleton blocks at `#E4E6EB` matching final layout, 1.2s shimmer with white highlight. Rounded at component radius. |
| **Loading (refresh)** | Top pull-down spinner in `#0064E0`. Content stays visible with previous values; no blocking overlay. |
| **Error (inline field)** | `#FA383E` 1px border + `0 0 0 3px rgba(250,56,62,0.18)` ring, red helper text 13px below. One actionable sentence. |
| **Error (toast)** | `#1C2B33` bg, white 14px text, 3s auto-dismiss, bottom-anchored. One sentence. |
| **Error (screen-blocking)** | Reserved for outage. Centered `#1C2B33` 17px weight 600 message, `#0064E0` retry button below. |
| **Success (toast)** | `#1C2B33` bg, white text, optional `#42B72A` check icon. `Saved`, `Posted`. 3s dismiss. |
| **Success (inline)** | Brief `rgba(66,183,42,0.14)` flash behind the updated element, 300ms fade. |
| **Disabled** | Opacity 0.4 on the element. Inputs keep their `#CED0D4` border so geometry is stable when re-enabled. |
| **Focus** | `#0064E0` border + `0 0 0 3px rgba(0,100,224,0.18)` ring on all interactive elements. Always visible for accessibility. |
| **Hover (button)** | Solid blue darkens to `#0058C4`; gradient brightens its light stop. 150ms ease. |

## 15. Motion & Easing

**Durations** (named):

| Token | Value | Use |
|---|---|---|
| `motion-instant` | 0ms | State flips when reduced-motion is set |
| `motion-fast` | 150ms | Hover, focus, button press, small reveals |
| `motion-standard` | 250ms | Default — menus, card expand, tab switch |
| `motion-slow` | 400ms | Emphasized — modal entrance, success confirmation |
| `motion-page` | 350ms | Route transitions, full-screen pushes |
| `motion-brand` | 600ms | Gradient hero reveal, infinity-mark animation |

**Easings:**

| Token | Curve | Use |
|---|---|---|
| `ease-enter` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Things appearing — menus, sheets, toasts |
| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Things leaving — dismissals |
| `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Two-way — collapsibles, tab content |
| `ease-brand` | `cubic-bezier(0.22, 1, 0.36, 1)` | Gradient reveals, infinity loop — smooth, premium overshoot-free glide |

**Signature motions.**

1. **Gradient reveal.** Hero gradients animate their angle/position subtly over `motion-brand` with `ease-brand`, giving the brand surface a living, three-dimensional shimmer without distracting from content.
2. **Infinity-mark loop.** The brand mark traces its continuous 3D loop on `ease-brand` — fluid, seamless, never snapping. It loops slowly to imply "unlimited" rather than spin frantically.
3. **Card lift.** On hover, feed/marketing cards lift via shadow deepening (`Level 1 → Level 2`) over `motion-fast` with `ease-standard`. A subtle 1–2px translateY reinforces the rise off the gray canvas.
4. **Reduce motion.** Under `prefers-reduced-motion: reduce`, all `motion-*` tokens collapse to `motion-instant`; gradient/infinity animations freeze to a static frame; slides become crossfades. The product stays fully usable.

<!--
OmD v0.1 Sources

WebSearch (2026-06-06): Meta brand color codes corroborated across
brandpalettes.com/meta-color-codes, brandcolorcode.com/meta-platforms,
designpieces.com — confirming #0082FB (light blue), #0064E0 (blue),
#1C2B33 (gray/ink). Typography: Optimistic Display + Optimistic Text
(custom superfamily). Logo: infinity mark, blue gradient, per
design.facebook.com/stories/designing-our-new-company-brand-meta.

WebFetch (2026-06-06): about.meta.com 301-redirects to www.meta.com/about.
Brand-surface reading of gradient + Optimistic type is consistent with the
official rebrand story.

Facebook product-surface neutrals (#F0F2F5 canvas, #65676B secondary text,
#E4E6EB border, #42B72A green, #FA383E red, #1877F2 legacy blue) are
widely documented Facebook design-system tokens used here as the product
lineage that Meta's marketing brand sits atop.

Personas (§13) are fictional archetypes informed by publicly described
Meta product user segments. Interpretive claims (gradient = third dimension /
immersive thesis) are editorial readings of the published rebrand, not
verbatim Meta statements.
-->


---
Source: https://oh-my-design.kr/design-systems/meta · Raw twin of references/meta/DESIGN.md
Install 221 verified references for your AI coding agent: npx oh-my-design-cli install-skills