# About Meta · Design system migration spec

> Source: https://about.meta.com  ·  Curated by OpenDesign  ·  en

> The site is worth including for its sophisticated blend of corporate branding and expressive, human-centric photography with bold, clear typography.

## 1. Identity DNA

Meta's design system operates like the architecture of a modern tech campus: a deliberate, expansive structure built to frame human connection at a planetary scale. Its identity is defined by vast, gradient-driven surfaces and a confident typographic voice that together construct a sense of optimistic, corporate futurism.

**One-liner:** A premium corporate identity showcasing human connection through immersive photography.
**Keywords:** connectivity · future · human · innovation · social
**Analogy:** A polished glass and steel campus where photography and technology meet.

## 2. Color

The color system is built on the principle of atmospheric depth, using soft pastel gradients as a primary environment rather than a simple backdrop. This creates a luminous, expansive field that supports content without competing for attention.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F8F9FB` | card background |
| `--ink` | `#1C1E21` | body text |
| `--ink-soft` | `#1C2B33` | secondary text |
| `--muted` | `#385898` | placeholder |
| `--accent` | `#0064E0` | single accent |
| `--line` | `rgba(28,30,33,1.0)` | divider |

**Color principle:** High-contrast brand blue against neutral corporate grays and vibrant lifestyle photography.

The singular vibrant blue accent is a strategic tool, reserved for primary interaction and focal points within the soft landscape.

## 3. Typography

Typography here is clean, geometric, and unapologetically bold, serving as the clear, human voice within the vast digital space. The sans-serif selections provide a sturdy, modern framework for visionary statements.

- **Display:** geometric-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.2 | 500 | -0.14px | Hero headlines |
| headline | 36px | 1.2 | 500 | -0.48px | Section headers |
| body | 18px | 1.44 | 400 | 0.08px | Paragraphs and descriptions |
| small | 14px | 1.43 | 400 | 0.08px | Captions and metadata |

**Type rules:**
- Use Optimistic Display for primary headlines.
- Use Optimistic Text for body copy and UI elements.

## 4. Spacing

Spacing follows a rhythm of generous whitespace, treating emptiness as a structural element that emphasizes scale and allows content to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 72 / 96 / 160 px
- **Rhythm:** Generous whitespace separating hero sections and card grids.

## 5. Surfaces

Surface treatment avoids hard boundaries, favoring depth through soft gradients and the implied layering of floating elements. The absence of visible borders reinforces the system's open, fluid atmosphere.

- **Radius:** sm 4px · md 24px · lg 32px · pill 100px
- **Borders:** 1px solid rgb(28, 30, 33) on UI elements, with frequent use of white space for separation.

## 6. Layout

The layout skeleton is immersive and full-viewport, centered around a dominant hero that establishes scale and focus. Content blocks and interactive elements are positioned with deliberate asymmetry, floating within the expansive field to create dynamic balance.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width hero with floating imagery followed by a 3-column card grid.

## 7. Motion & Interaction

Motion is atmospheric and purposeful, primarily reinforcing the system's sense of depth and fluidity. Backgrounds shift subtly and UI elements animate with smooth, natural transitions that feel integral to the environment, not decorative.

- **Durations:** micro 200ms · small 333ms · medium 800ms
- **Easing:** `cubic-bezier(0.53, 0, 0.28, 1)`
- **Patterns:**
  - Subtle opacity and background color transitions on interactive elements.

- **Hover:** Background color changes on buttons and links with 0.2s ease-out transition.
- **Click:** Subtle opacity reduction (0.3s) on clickable areas.
- **Transition:** Transform and visibility transitions for modal or menu overlays.
- **Keyboard:** Standard focusable elements with cursor pointer.

## 8. Voice & Don'ts

The editorial voice is visionary and direct, crafting bold, optimistic statements about the future with corporate clarity. It avoids clutter and dense argument, instead using spacious layouts and clear calls to action to communicate with confidence.

- **Tone:** Optimistic, visionary, and human-centric.
- **Headline style:** Large, bold, and concise statements about the future of connection.
- **CTA style:** Simple, direct commands like 'Our mission' or 'Read more'.
- **Avoid:** Avoid overly technical jargon. / Avoid aggressive sales language.

### Don'ts
- ❌ don't use sharp, square corners — screenshot shows generous 24px and 32px radii on images and cards.
- ❌ don't use a dark mode aesthetic — screenshot shows predominantly white backgrounds with vibrant photographic accents.
- ❌ don't use a rigid, grid-heavy layout — screenshot shows overlapping, floating image cards in the hero section.
- ❌ don't use thin, elegant serifs — screenshot shows robust, medium-weight geometric sans-serif headlines.
- ❌ don't use muted, low-contrast text — screenshot shows deep charcoal text for maximum readability.
- ❌ don't use small, cramped buttons — screenshot shows large, pill-shaped primary action buttons.

This system deliberately forgoes visual density, aggressive persuasion, and decorative complexity in favor of spacious clarity.

## System Prompt (paste into AI tool)

```
This site is a premium corporate portfolio showcasing Meta's technology and vision through high-quality photography and bold typography. The primary accent is brand blue (#0064E0) against a clean white and light gray (#F8F9FB) background. The typography uses a custom geometric sans-serif (Optimistic Display) for headlines and a humanist sans-serif (Optimistic Text) for body copy. Critical donts include: avoid sharp corners as cards use 24px-32px radii; avoid dark mode as the site is predominantly light; avoid rigid grids as the hero features overlapping floating images. The design prioritizes human connection and optimistic futurism.
```
