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

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

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

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.

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

15. Motion & Easing

Durations (named):

Easings:

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.