# Meta About — Design System
> The corporate identity and mission portal for Meta, focusing on social technology, AI, and mixed reality.
- **Canonical:** https://uiuxskills.com/library/meta-about
- **Source:** https://about.meta.com
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:15:15.440Z

---

---
version: alpha
name: Meta About
description: >-
  The corporate identity and mission portal for Meta, focusing on social technology, AI, and mixed
  reality.
tone: >-
  Professional, visionary, and human-centric. The tone is authoritative yet accessible, balancing
  complex technological advancements with clear, benefit-oriented communication.
color-scheme: light
colors:
  primary: "#000000"
  surface: "#FFFFFF"
  surface-dim: "#F8F9FB"
  neutral: "#1C2B33"
  on-surface: "#000000"
  on-primary: "#FFFFFF"
  outline: "#E5E7EB"
  error: "#D93025"
  success: "#1E8E3E"
  focus-ring: "#000000"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  label-md:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: sans-serif
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.neutral}"
  badge:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.10)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Meta's visual identity is defined by a clean, high-contrast aesthetic that prioritizes clarity and accessibility. The brand uses a sophisticated monochromatic palette to ground its futuristic, technology-forward messaging, ensuring that the focus remains on human connection and innovation.

## Colors

The color strategy relies on a strict monochromatic foundation to maintain a professional and authoritative tone, using high-contrast pairings to ensure readability and accessibility.

*   Primary (#000000): Core brand color for primary actions and high-impact typography.
*   Surface (#FFFFFF): Main background color for content sections.
*   Surface-dim (#F8F9FB): Subtle background for secondary sections and cards.
*   Neutral (#1C2B33): Dark neutral used for secondary text and structural elements.
*   On-surface (#000000): Primary text color on light surfaces.
*   On-primary (#FFFFFF): Text color for primary buttons.
*   Outline (inferred) (#E5E7EB): Border color for dividers and card outlines.
*   Error (inferred) (#D93025): Semantic color for error states.
*   Success (inferred) (#1E8E3E): Semantic color for success states.
*   Focus-ring (inferred) (#000000): High-contrast focus indicator for accessibility.

## Typography

Typography is set in a clean sans-serif family, utilizing a clear hierarchy to guide the user through complex technological information.

*   Display-lg (inferred): Used for hero headlines.
*   Display-md (inferred): Used for section titles.
*   Headline-lg (inferred): Used for sub-section headers.
*   Headline-md (inferred): Used for card titles.
*   Body-md (inferred): Standard paragraph text.
*   Label-md (inferred): Used for button labels and metadata.
*   Label-sm (inferred): Used for small captions.

## Layout

The site utilizes a responsive grid system with a generous max-width to ensure readability. Spacing follows a consistent 8px base rhythm, with larger sections separated by 48px or more to maintain visual breathing room. The page structure follows a logical flow: nav, hero, features, news, and footer. The hero section is consistently composed with a centered headline and subhead paired with a single primary CTA. The design is mobile-first, with navigation collapsing into a hamburger menu on smaller viewports.

## Elevation & Depth

Depth is used sparingly to differentiate interactive cards from the background, relying on subtle single-layer shadows. Elevation values are inferred to match the brand's clean, modern aesthetic.

*   elevation.sm — card lift.
*   elevation.md — dropdown/popover.
*   elevation.lg — modal/drawer overlay.

## Shapes

The brand employs a moderate corner radius, balancing a friendly, approachable feel with structural integrity. Interactive elements and cards utilize the `rounded.md` (8px) token for a consistent, modern finish, while smaller UI elements like input fields use `rounded.sm` (4px).

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use `{colors.primary}` for high-impact actions, transitioning to `{colors.neutral}` on hover. Use these for primary calls to action to maintain the brand's authoritative tone.

### Card
Cards utilize `{colors.surface}` with a `{rounded.md}` radius and `{colors.outline}` borders. Use these to group related content, ensuring consistent `{spacing.md}` padding is maintained internally.

### Badge
Badges provide semantic context using `{colors.surface-dim}` for standard labels or `{colors.error}`/`{colors.success}` for status indicators. Use these to highlight metadata or short status updates.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Do not use `{colors.error}` for non-critical UI elements. |
| Apply `{typography.display-lg}` for main hero headers only. | Avoid mixing `{typography.headline-lg}` and `{typography.headline-md}` in the same section. |
| Use `{colors.surface-dim}` to create visual separation between content blocks. | Never apply `{typography.body-md}` on `{colors.surface-dim}` without sufficient contrast. |
| Maintain consistent `{spacing.md}` padding within cards. | Do not use sharp corners (0px) on interactive components. |
| Use `{colors.neutral}` for secondary text to reduce visual noise. | Avoid excessive use of `{elevation.lg}` which can clutter the layout. |
| Ensure all interactive elements have a `{rounded.md}` radius. | Do not use more than two font weights on a single page. |
| Use `{colors.outline}` for subtle dividers. | Do not use `{colors.primary}` for background fills in cards. |
| Apply `{typography.label-sm}` for badge metadata. | Do not use `{typography.display-lg}` for body copy. |

## Content Style

CTA labels should use imperative verbs in sentence case, keeping them concise (e.g., "Learn more"). This ensures clarity and encourages user interaction.

Headings should be visionary and benefit-focused, emphasizing human connection. They should be phrased to sound authoritative yet accessible, balancing complex technological advancements with clear, human-centric language.

Maintain a high level of copy density, utilizing short, scannable paragraphs and clear headings. Use whitespace effectively to separate ideas and prevent visual clutter.

## Imagery & Icons

Imagery combines high-quality photography of people and technology with clean, modern product shots. Icons are minimalist and stroke-based, adhering to the brand's minimal and accessible design style. The treatment is mixed, balancing human-centric photography with abstract or product-focused visuals.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Meta About, a minimal, accessible corporate identity portal. Match its professional, visionary, human-centric tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its YAML token name — `{colors.primary}`, `{spacing.lg}`, `{rounded.md}` — never hardcode hex values, pixel sizes, or font sizes.
2. Use only the component variants defined under `components:`. Do not invent additional variants (e.g., button-tertiary, card-dark) that the spec does not list.
3. Follow the Layout narrative for page structure: nav → hero → features → news → footer. Apply the 8px base rhythm using `{spacing.xs}` through `{spacing.2xl}`. Use mobile-first with one breakpoint at 768px unless the spec states otherwise.
4. Apply elevation tokens sparingly per the Elevation & Depth section: `{elevation.sm}` for cards, `{elevation.md}` for dropdowns, `{elevation.lg}` for modals only.
5. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict explicitly before proceeding.

## Output contract

**Must:**
- Use token names for all colors, typography, spacing, and radii.
- Render all interactive components (buttons, inputs, links) with hover, focus, and disabled states as defined in `components:`.
- Apply a visible `{colors.focus-ring}` outline on all focusable elements for accessibility.
- Use `{rounded.md}` on cards and buttons; `{rounded.sm}` on inputs and badges.
- Keep CTA copy in sentence case using imperative verbs, per the Content Style section.

**Must NOT:**
- Invent colors, radii, font sizes, or elevation values absent from the spec.
- Use generic utility defaults when a named token exists.
- Use `{colors.primary}` as a card background fill.
- Mix `{typography.headline-lg}` and `{typography.headline-md}` within the same section.
- Apply `{typography.display-lg}` anywhere except the hero headline.
- Add emoji, filler text, or marketing copy.
- Rewrite existing page copy, button labels, or headings, or alter navigation structure.

## When in doubt
- If a value is not defined in the spec, ask the user before inventing one.
- For background fills, default to `{colors.surface}` or `{colors.surface-dim}` for separation; never create a new surface token.
- For text on any surface, default to `{colors.on-surface}`; use `{colors.neutral}` for secondary or supporting text.
- Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook, component metadata) is available, it overrides the spec.
- Prefer composing existing components over introducing new patterns.