---
name: About Meta
description: "The site is worth including for its sophisticated blend of corporate branding and expressive, human-centric photography with bold, clear typography."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1C1E21"
  secondary: "#1C2B33"
  tertiary: "#0064E0"
  neutral: "#385898"
  bg-soft: "#F8F9FB"
  line: "rgba(28,30,33,1.0)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-0.14px"
  headline:
    fontFamily: humanist-sans
    fontSize: 36px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-0.48px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.44
    fontWeight: 400
    letterSpacing: "0.08px"
  small:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.43
    fontWeight: 400
    letterSpacing: "0.08px"

rounded:
  sm: 4px
  md: 24px
  lg: 32px
  pill: 100px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A premium corporate identity showcasing human connection through immersive photography.

*A polished glass and steel campus where photography and technology meet.*

## Colors

High-contrast brand blue against neutral corporate grays and vibrant lifestyle photography.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1C1E21`)** — uses `ink` token
- **Secondary text (`#1C2B33`)** — uses `ink-soft` token
- **Accent (`#0064E0`)** — uses `accent` token
- **Muted (`#385898`)** — uses `muted` token
- **Borders (`rgba(28,30,33,1.0)`)** — uses `line` token

## Typography

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

- Use Optimistic Display for primary headlines.
- Use Optimistic Text for body copy and UI elements.

## Layout

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

*Rhythm:* Generous whitespace separating hero sections and card grids.

## Elevation & Depth

- Borders: 1px solid rgb(28, 30, 33) on UI elements, with frequent use of white space for separation.

## Shapes

- `sm`: 4px
- `md`: 24px
- `lg`: 32px
- `pill`: 100px

## Components

- **button:** Pill-shaped primary buttons with white text on brand blue, medium weight.
- **card:** Image-heavy cards with rounded corners (24px/32px) and text descriptions below.
- **chip:** Not prominently visible in this view.
- **input:** Not prominently visible in this view.
- **hero:** Full-width immersive section with large typography and overlapping photographic cards.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```