meta.com

DESIGN.md

Narrative design system document — paste directly into Claude Code, Cursor, or Bolt.

---
version: alpha
name: meta.com
description: "Light product system built on #ffffff with #00987c as the primary CTA accent. Type anchored in Optimistic Display at 36px / weight 500. Extracted automatically from https://meta.com/ — every value from getComputedStyle(), no approximation."
narrative: |
  meta.com is built on a pure-white canvas (rgb(255, 255, 255)).
  The system uses rgb(0,152,124) as the high-saturation accent for primary actions.
  Generously rounded CTAs (24px) suggest approachable, content-first design alongside Helvetica as the primary typeface.

colors:
  background: "#ffffff"
  surface-1: "rgba(255, 255, 255, 0)"
  surface-2: "rgba(241, 244, 247, 0.698)"
  ink: "#1c1e21"
  ink-muted: "rgba(28, 30, 33, 0.65)"
  ink-subtle: "#65676b"
  primary: "#00987c"
  on-primary: "#111111"
  primary-hover: "#1b74e4"
  hairline: "rgba(43, 61, 70, 0.68)"
  accent-glow: "#65676b"
  semantic-error: "#c80a28"
  semantic-success: "#31a24c"
  semantic-warning: "rgba(255, 226, 0, 0.15)"

typography:
  display-xl:
    fontFamily: "Optimistic VF"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.16
    letterSpacing: 0
  display-md:
    fontFamily: "Optimistic VF"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.44
    letterSpacing: 0
  body:
    fontFamily: "Optimistic Display"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.34
    letterSpacing: 0
  button:
    fontFamily: "Optimistic VF"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: -0.14px
  mono:
    fontFamily: "Optimistic VF"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.16px

rounded:
  none: 0px
  xs: 12px
  sm: 12px
  md: 12px
  lg: 24px
  xl: 24px
  pill: 999px

spacing:
  xxs: 2px
  xs: 4px
  sm: 10px
  md: 16px
  lg: 80px
  xl: 32px
  xxl: 64px
  section: 80px

components:
  button-ghost:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 4px
  button-pill:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 4px 12px 4px 4px
  button-icon-button:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
  input-text-input:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.surface-1}"
    typography: "{typography.mono}"
    rounded: "{rounded.none}"
  navigation-main-nav:
    backgroundColor: "{colors.surface-1}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"

extracted_at: "2026-05-30T20:39:19.125Z"
completeness: 82
scoreVersion: "v2"

---

# Design System — meta.com
> Extracted automatically by Clone Architect from https://meta.com
> Date: 2026-05-30
> Viewport: Desktop 1440x900 + Mobile 390x844
> Every value in this file comes from real getComputedStyle() — no approximation.

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(255, 255, 255)` is the page background. Every component composits against this.
> - **Accent**: `rgb(0,152,124)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 12px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 48px between major bands. Card padding: 80px.
> - **Default radius**: 12px on buttons/inputs. Pills (`9999px`) only for icon-buttons or status chips.
> - **Forbidden**: Do NOT introduce heavy box-shadows — this system relies on borders for separation
>
> **Before generating UI**: import this DESIGN.md, scan §2 (Color Palette) + §4 (Components) + §10 (Agent Guide). Skip §11–12 unless extending.

## 1. Visual Theme & Atmosphere

meta.com adopts the classic pure-white canvas (`#ffffff`) — a deliberate choice that recedes into transparency, letting typography, color and product imagery carry the entire visual weight. 

Typography is anchored in **Optimistic Display**, deployed with OpenType features enabled globally (`"ss01", "ss02"`). These aren't decorative — they're load-bearing: without them, the typeface reverts to its generic state and the design loses its specific texture. 

Body text reads in Near Black (`#1c1e21`) — softened from pure black, a small but deliberate detail that lowers reading friction. **#00987c** (`#00987c`) is the single high-saturation color in the system — it earns its presence only on interactive elements, making CTAs and links the unmistakable focal points against the otherwise neutral palette. Shadow is absent by design — depth is conveyed through translucent borders and luminance steps rather than light simulation. 
Border radius varies from pill-shaped (fully rounded) to moderately rounded elements, creating visual rhythm. Motion design uses smooth easing curves for polished state transitions. The site uses a variable font with WDTH axes, enabling precise weight/width control across the type hierarchy. 

**Key Characteristics:**
- Background: Pure White (`#ffffff`)
- Primary typeface: Optimistic Display
- Primary text: Near Black (`#1c1e21`)
- Accent: #00987c (`#00987c`)
- Display: 36px weight 500
- Custom fonts loaded: Optimistic Display, Optimistic Text, Optimistic Text Light, Optimistic Text Light Swap, Optimistic Text Normal, Optimistic Text Normal Swap, Optimistic Text Medium, Optimistic Text Medium Swap, Optimistic Text Bold, Optimistic Text Bold Swap, Optimistic Text ExtraBold, Optimistic Text ExtraBold Swap, Optimistic Text Viet Light, Optimistic Text Viet Light Swap, Optimistic Text Viet Normal, Optimistic Text Viet Normal Swap, Optimistic Text Viet Bold, Optimistic Text Viet Bold Swap, Optimistic Text Arbc Light, Optimistic Text Arbc Light Swap, Optimistic Text Arbc Normal, Optimistic Text Arbc Normal Swap, Optimistic Text Arbc Bold, Optimistic Text Arbc Bold Swap, Optimistic Display Light, Optimistic Display Light Swap, Optimistic Display Medium, Optimistic Display Medium Swap, Optimistic Display Semibold, Optimistic Display Semibold Swap, Optimistic Display Bold, Optimistic Display Bold Swap, Optimistic Display Viet Light, Optimistic Display Viet Light Swap, Optimistic Display Viet Medium, Optimistic Display Viet Medium Swap, Optimistic Display Viet Bold, Optimistic Display Viet Bold Swap, Optimistic Display Arbc Light, Optimistic Display Arbc Light Swap, Optimistic Display Arbc Medium, Optimistic Display Arbc Medium Swap, Optimistic Display Arbc Bold, Optimistic Display Arbc Bold Swap, Optimistic VF, Segoe UI Historic, Fix for Mac Chrome 80, Optimistic, Optimistic DM

## 2. Color Palette & Roles

### Background & Surface
- **Pure White** (`#ffffff`): Page background (primary)
- **Transparent** (`transparent`): Surface / elevated background
- **Translucent Light Gray (70%)** (`rgba(241, 244, 247, 0.698)`): Surface / elevated background
- **Light Gray** (`#dadde1`): Surface / elevated background
- **Light Gray** (`#efefef`): Surface / elevated background

### Text & Content
- **Near Black** (`#1c1e21`): Primary body text
- **Text Badge Success Background** (`#31a24c`): Text (CSS var)
- **Text Input Outside Label** (`#000000`): Text (CSS var)
- **Text Highlight** (`rgba(24, 119, 242, 0.2)`): Text (CSS var)
- **Text Badge Critical Background** (`#e41e3f`): Text (CSS var)

### Accent & Interactive
- **Primary Button Background** (`#1b74e4`): Accent / interactive (CSS var)
- **Primary Web Focus Indicator** (`#d24294`): Accent / interactive (CSS var)
- **Primary Deemphasized Button Background** (`#e7f3ff`): Accent / interactive (CSS var)
- **Primary Icon** (`#050505`): Accent / interactive (CSS var)
- **Primary Deemphasized Button Pressed Overlay** (`rgba(25, 110, 255, 0.15)`): Accent / interactive (CSS var)
- **Primary Button Pressed** (`#77a7ff`): Accent / interactive (CSS var)
- **M Tricolor Blue** (`#0457cb`): Interactive / accent

### Border & Divider
- **Border Focused** (`#65676b`): Border (CSS var)
- **Divider On Color** (`#ced0d4`): Border (CSS var)

### Full Extracted Palette
277 distinct colors detected on the live page (19 categorized above + 258 additional below). Every value is a real `getComputedStyle()` color — no approximation.

- `#385898` — #385898
- `#0a1317` — Jet Black
- `rgba(43, 61, 70, 0.68)` — Translucent Dark Gray (68%)
- `#5d6c7b` — Slate Gray
- `#606770` — Dim Gray
- `#647685` — Slate Gray
- `#767676` — Stone
- `rgba(68, 86, 100, 0.5)` — Translucent Slate (50%)
- `#f0f0f0` — Light Gray
- `#67788a` — Slate Gray
- `#a4a7ab` — Cool Gray
- `#b0b3b8` — Silver
- `#483b0c` — #483b0c
- `rgba(68, 73, 80, 0.15)` — Translucent Dark Gray (15%)
- `#fff6a1` — Vibrant Yellow
- `#f0f2f5` — Light Gray
- `#2851a3` — #2851a3
- `#8a8d91` — Medium Gray
- `#5e310e` — Chocolate
- `#8595a4` — Cool Gray
- `#0866ff` — #0866ff
- `#1a441b` — #1a441b
- `#00987c` — #00987c
- `#080809` — Pure Black
- `#ff66bf` — Hot Pink
- `#147b29` — Forest Green
- `rgba(45, 136, 255, 0.1)` — Translucent Ring Blue (10%)
- `#007d1e` — Forest Green
- `rgba(190, 195, 201, 0.2)` — Translucent Silver (20%)
- `#2c2d2e` — Charcoal
- `#cbd2d9` — Light Blue
- `#e4e6ea` — Light Gray
- *…+226 more in `raw-css.json` (`desktop.allColors`).*

### Gradients & Decorative Fills

- `linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6))` — (--always-dark-gradient)
- `linear-gradient(to top, #FFFFFF, rgba(255,255,255.9), rgba(255,255,255,.7), rgba(255,255,255,.4), rg…` — (--nav-bar-background-gradient)
- `linear-gradient(to top, #F0F2F5, rgba(240,242,245.9), rgba(240,242,245,.7), rgba(240,242,245,.4), rg…` — (--nav-bar-background-gradient-wash)

### CSS Custom Properties (Design Tokens)

**Border Radius Token**
- `--card-corner-radius`: `8px`
- `--button-corner-radius-large`: `12px`
- `--alert-banner-corner-radius`: `8px`
- `--list-cell-corner-radius`: `8px`

**Font Family Token**
- `--font-family-default`: `Helvetica, Arial, sans-serif`
- `--font-family-segoe`: `Segoe UI Historic, Segoe UI, Helvetica, Arial, sans-serif`
- `--font-family-code`: `ui-monospace, Menlo, Consolas, Monaco, monospace`
- `--font-family-apple`: `system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif`

**Spacing Token**
- `--chat-bubble-padding-vertical`: `8px`
- `--messenger-card-spacing`: `16px`
- `--menu-item-base-padding-horizontal`: `8px`
- `--text-input-padding-vertical`: `12px`

**Shadow Token**
- `--card-box-shadow`: `0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1)`
- `--shadow-base`: `0 1px 2px rgba(0, 0, 0, 0.2)`
- `--shadow-2`: `rgba(0, 0, 0, 0.2)`
- `--scroll-shadow`: `0 1px 2px rgba(0, 0, 0, 0.1), 0 -1px rgba(0, 0, 0, 0.1) inset`

**Font Size Token**
- `--text-input-field-font-size`: `1rem`
- `--text-input-label-font-size-scale-multiplier`: `0.75`
- `--text-input-label-font-size`: `17px`

**Motion Token**
- `--fds-animation-swap-shuffle-in`: `cubic-bezier(0.14, 1, 0.34, 1)`
- `--glimmer-animation-duration`: `1000ms`
- `--glimmer-animation-timing-function`: `steps(10, end)`

**Error / Destructive**
- `--input-label-color-error`: `hsl(350, 87%, 55%)`
- `--badge-background-color-red`: `#e41e3f`

**Success**
- `--badge-background-color-green`: `#31A24C`

**Warning**
- `--badge-background-color-yellow`: `#F7B928`

**Text Color**
- `--chat-text-blockquote-color-text-primary-media`: `rgba(255, 255, 255, 0.7)`

**Font Weight Token**
- `--text-input-field-font-weight`: `500`
- `--text-input-label-font-weight`: `400`

**Background**
- `--chat-text-blockquote-color-background-line`: `rgba(0, 0, 0, 0.12)`

**Other tokens**
- `--stnbgo`: `0`
- `--text-badge-success-background`: `#31A24C`
- `--teal-primary`: `rgb(0,152,124)`
- `--text-input-outside-label`: `#000000`
- `--primary-button-background`: `#1B74E4`
- `--x1p0bgpc`: `-88px`
- `--primary-web-focus-indicator`: `#D24294`
- `--mcds-bg-surface-3`: `#E6EBEF`

## 3. Typography Rules

### Font Families
- **Primary**: `Optimistic VF`
- **Secondary**: `Optimistic Display`
- **Font 3**: `Optimistic Text`
- **Font 4**: `Roboto`
- **Font 5**: `Optimistic Text Light`

### Custom Fonts Loaded
- **Optimistic Display** weight 200 (normal)
- **Optimistic Display** weight 300 (normal)
- **Optimistic Display** weight 500 (normal)
- **Optimistic Display** weight 700 (normal)
- **Optimistic Display** weight 800 (normal)
- **Optimistic Text** weight 400 (normal)
- **Optimistic Text** weight 500 (normal)
- **Optimistic Text** weight 700 (normal)
- **Roboto** weight 400 (normal)
- **Roboto** weight 700 (normal)
- **Optimistic Text Light** weight 300 (normal)
- **Optimistic Text Light Swap** weight 300 (normal)
- **Optimistic Text Normal** weight 400 (normal)
- **Optimistic Text Normal Swap** weight 400 (normal)
- **Optimistic Text Medium** weight 500 (normal)
- **Optimistic Text Medium Swap** weight 500 (normal)
- **Optimistic Text Bold** weight 700 (normal)
- **Optimistic Text Bold Swap** weight 700 (normal)
- **Optimistic Text ExtraBold** weight 800 (normal)
- **Optimistic Text ExtraBold Swap** weight 800 (normal)
- **Optimistic Text Viet Light** weight 300 (normal)
- **Optimistic Text Viet Light Swap** weight 300 (normal)
- **Optimistic Text Viet Normal** weight 400 (normal)
- **Optimistic Text Viet Normal Swap** weight 400 (normal)
- **Optimistic Text Viet Bold** weight 700 (normal)
- **Optimistic Text Viet Bold Swap** weight 700 (normal)
- **Optimistic Text Arbc Light** weight 300 (normal)
- **Optimistic Text Arbc Light Swap** weight 300 (normal)
- **Optimistic Text Arbc Normal** weight 400 (normal)
- **Optimistic Text Arbc Normal Swap** weight 400 (normal)
- **Optimistic Text Arbc Bold** weight 700 (normal)
- **Optimistic Text Arbc Bold Swap** weight 700 (normal)
- **Optimistic Display Light** weight 300 (normal)
- **Optimistic Display Light Swap** weight 300 (normal)
- **Optimistic Display Medium** weight 500 (normal)
- **Optimistic Display Medium Swap** weight 500 (normal)
- **Optimistic Display Semibold** weight 600 (normal)
- **Optimistic Display Semibold Swap** weight 600 (normal)
- **Optimistic Display Bold** weight 700 (normal)
- **Optimistic Display Bold Swap** weight 700 (normal)
- **Optimistic Display Viet Light** weight 300 (normal)
- **Optimistic Display Viet Light Swap** weight 300 (normal)
- **Optimistic Display Viet Medium** weight 500 (normal)
- **Optimistic Display Viet Medium Swap** weight 500 (normal)
- **Optimistic Display Viet Bold** weight 700 (normal)
- **Optimistic Display Viet Bold Swap** weight 700 (normal)
- **Optimistic Display Arbc Light** weight 300 (normal)
- **Optimistic Display Arbc Light Swap** weight 300 (normal)
- **Optimistic Display Arbc Medium** weight 500 (normal)
- **Optimistic Display Arbc Medium Swap** weight 500 (normal)
- **Optimistic Display Arbc Bold** weight 700 (normal)
- **Optimistic Display Arbc Bold Swap** weight 700 (normal)
- **Optimistic VF** weight 200 800 (normal)
- **Segoe UI Historic** weight normal (normal)
- **Segoe UI Historic** weight 700 (normal)
- **Fix for Mac Chrome 80** weight 500 (normal)
- **Optimistic** weight 300 800 (normal)
- **Optimistic DM** weight 300 800 (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Optimistic VF | 64px | 500 | 1.16 | normal | Main headline (h2) |
| Sub-heading | Optimistic VF | 18px | 700 | 1.44 | normal | Third-level heading (h3) |
| Input Large | Optimistic VF | 16px | 400 | 1.5 | -0.16px | Form input (16px) |
| Button | Optimistic VF | 14px | 400 | 1.43 | -0.14px | Button label (14px) |
| Body | Optimistic Display | 12px | 400 | 1.34 | normal | Standard reading text |

### Font Weight Scale

CSS custom properties define 2 explicit weight steps:
- `--text-input-label-font-weight`: `400` — Regular
- `--text-input-field-font-weight`: `500` — Medium

### Full Font Size Scale

Sizes detected in the design (descending): `64px`, `48px`, `36px`, `28px`, `24px`, `18px`, `16px`, `14px`, `12px`

> 4 size(s) detected outside the sampled hierarchy (48px, 36px, 28px, 24px). These appear on elements not in the sampled set — likely additional display sizes, marketing-section overrides, or third-party-widget styles.

### OpenType & Variable Font Features

The typography uses these OpenType features intentionally — this is a sophisticated type system, not a default fallback:

- **stylistic sets** (`ss0X`) — alternate letterforms enabled (often for brand-specific glyph variants)
- **ligatures** — common letter pairs replaced with refined glyphs (fi, fl, etc.)

**Clone instruction:** Enable these in your CSS:
```css
body {
  font-feature-settings: "ss01", "ss02", "liga", "clig", "cv01", "cv02";
}
```

**Variable font axes:**
- WDTH axis

## 4. Component Stylings

### Buttons

**Ghost**
- Background: `transparent` `{colors.surface-1}`
- Text: `#1c1e21` `{colors.ink-muted}`
- Padding: 4px
- Radius: 24px
- Font: 12px weight 400
- Use: Subtle action, toolbar, nav button

**Pill**
- Background: `transparent` `{colors.surface-1}`
- Text: `#1c1e21` `{colors.ink-muted}`
- Padding: 4px 12px 4px 4px
- Radius: 24px
- Font: 12px weight 400
- Use: Status pills, tags, chips

**Icon Button**
- Background: `transparent` `{colors.surface-1}`
- Text: `#1c1e21` `{colors.ink-muted}`
- Padding: 0px
- Radius: 999px
- Font: 12px weight 400
- Use: Toolbar/UI icons

**Pill**
- Background: `transparent` `{colors.surface-1}`
- Text: `rgba(68, 86, 100, 0.5)`
- Padding: 10px 22px
- Radius: 100px
- Border: 2px solid rgba(10, 19, 23, 0.12)
- Font: 12px weight 400
- Use: Status pills, tags, chips

**Ghost**
- Background: `transparent` `{colors.surface-1}`
- Text: `#1c1e21` `{colors.ink-muted}`
- Padding: 0px
- Radius: 0px
- Font: 14px weight 400
- Use: Subtle action, toolbar, nav button

### Inputs & Forms

**Text Input**
- Background: `transparent` `{colors.surface-1}`
- Text: `transparent` `{colors.surface-1}`
- Padding: 0px
- Radius: 0px
- Border: 0px none rgb(118, 118, 118)
- Font: 16px weight 400
- Use: Text fields, search inputs
- Focus: color: `rgb(10, 19, 23)`, transform: `matrix(1, 0, 0, 1, 0, 0)`, outline: `rgb(10, 19, 23) none 3px`

### Navigation

**Main Nav**
- Background: `transparent` `{colors.surface-1}`
- Padding: 0px
- Radius: none
- Font: 12px weight 400
- Use: Fixed/sticky block nav — N/A items


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative

- **Input**:
  - **focus:** text transparent → #0a1317, transform applied
- **FooterLink**:
  - **hover:** text #0457cb → #0171e3

*State transitions extracted via Playwright simulation — exact values in the YAML matrix below.*

```yaml
component-behaviors:
  button:
    default:
      bg: "rgb(239, 239, 239)"
      fg: "rgb(0, 0, 0)"
      border: "2px outset rgb(0, 0, 0)"
  input:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgba(0, 0, 0, 0)"
    focus:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(10, 19, 23)"
  link:
    default:
      bg: "rgb(4, 87, 203)"
      fg: "rgb(255, 255, 255)"
      border: "2px solid rgba(0, 0, 0, 0)"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(56, 88, 152)"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(4, 87, 203)"
    hover:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(1, 113, 227)"
```

**Agent usage**: Validate generated components against this matrix. If your output's `:hover` state changes properties not listed here, you are off-brand.


## 4c. Component Vocabulary (Closed System)

*This brand uses ONLY the following component vocabulary. Introducing new variants without justification breaks the system's tonal coherence.*

### Buttons
- **5 shape(s)** in this system: `Ghost`, `Pill`, `Icon Button`, `Pill`, `Ghost`
- **DO NOT introduce new buttons variants** without justification

### Inputs & Forms
- **1 shape(s)** in this system: `Text Input`
- **DO NOT introduce new inputs & forms variants** without justification

### Navigation
- **1 shape(s)** in this system: `Main Nav`
- **DO NOT introduce new navigation variants** without justification

## 5. Layout Principles

### Layout Type
**top-nav + content**

### Grid
Single column, centered content

### Max Width
100%

### Spacing System
Compact spacing — information density prioritized

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 4px |
| sm | 10px |
| md | 16px |
| base | 22px |
| lg | 80px |
| xl | 32px |
| 2xl | 48px |
| 3xl | 64px |

### Border Radius Scale
| Name | Value | Use |
|------|-------|-----|
| None | 0px | No rounding |
| Xs | 12px | Tiny corners (badges, micro elements) |
| Sm | 12px | Buttons, inputs, small elements |
| Md | 12px | Cards, containers |
| Lg | 24px | Large rounded elements, pill segments |
| Xl | 24px | Category strips, featured containers |
| Full | 999px | Pills, avatars, circular elements |

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `24px` |
| Inputs & Forms | `0px` |
| Navigation | `none` |
| Page Body | `0px` |
| Primary Input | `0px` |

**Shape Personality**: Generously Rounded — Soft, friendly corners (8px+). Approachable, consumer-facing feel.

**Full Radius Spectrum**: 12px, 24px, 100px, 999px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

*Named spacing tokens with explicit use cases. Use these names in YOUR code instead of raw pixels for consistency.*

| Name | Value | Use case |
|------|-------|----------|
| **hero** | `64px` | Top/bottom of full-bleed hero sections |
| **section** | `32px` | Between major bands (color change, content shift) |
| **subsection** | `80px` | Within a section, between content groups |
| **card** | `16px` | Card padding, list-item spacing |
| **compact** | `10px` | Form fields, tight clusters, badge padding |
| **micro** | `4px` | Icon-text gap, tag inner padding |

**Agent rule**: NEVER hardcode raw pixel values for spacing in generated UI. Always reference these named tokens (`spacing-rhythm.section`, etc.).

## 5c. Widget & Structure Library

Structural patterns extracted from the page DOM — these are the **blueprints** an agent should follow to reproduce the page architecture (not just CSS values).

**4/8 structural patterns detected.**

### Hero Pattern

- **Composition:** centered — Centered composition — heading + subheading + CTAs stacked vertically, content centered horizontally. Common for SaaS marketing pages.
- **Viewport coverage:** full-viewport hero (≥70% screen height)
- **Heading:** "Achetez des appareils, des accessoires et bien plus encore sur la boutique Meta" — 36px center-aligned
- **Subheading:** "Découvrez des coloris disponibles en édition limitée pour Ray-Ban Meta, ainsi que de nouveaux styles conçus pour les lunettes avec verres correcteurs."
- **Media:** present, positioned top
- **CTAs:** 11 (primary: "Boutique")
- **Clone instruction:** Reproduce the **centered** layout. Use the heading font-size token at the documented size. Place media top of text.

### Navigation Pattern

- **Position:** static (scrolls with page)
- **Layout:** unknown — Layout not classified
- **Height:** 64px
- **Logo:** ✓ present
- **Nav links:** 0 primary items
- **CTAs in nav:** 5
- **Clone instruction:** Build a static unknown navigation. Reserve 5 slots for primary CTAs.

### Card Grid Pattern

- **Card count:** 5 cards detected
- **Columns (desktop):** 1-up grid
- **Card dimensions:** 1376×620px (aspect 2.22:1)
- **Gap:** 32px between cards
- **Content:** ✓ image + CTA
- **Image position:** left
- **Clone instruction:** Build a 1-column grid (desktop) with cards at ~2.22:1 aspect ratio. Each card has an image at the left.

### Footer Pattern

- **Columns:** 1
- **Links:** 60 total
- **Height:** 1597px
- **Includes:** ✗ no newsletter | ✓ social icons |  ✓ copyright
- **Clone instruction:** Build a 1-column footer with ~60 links per column, social media links, and a copyright line.

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |

**Shadow Philosophy**: Flat design — no shadows used. Borders and spacing define structure.

## 7. Motion & Interaction

### Dominant Easing Curves

| Curve | Semantic Name |
|-------|---------------|
| `ease` | CSS ease — Default |
| `ease-in` | Ease In — Accelerating |
| `ease-in-out` | Ease In-Out — Symmetric |

### Duration Scale

| CSS Variable | Value | Tier |
|--------------|-------|------|
| `--glimmer-animation-duration` | `1000ms` | Cinematic |
| `--fds-duration-extra-short-out` | `150ms` | Fast |
| `--fds-duration-extra-short-in` | `200ms` | Normal |
| `--fds-duration-extra-long-in` | `1000ms` | Cinematic |
| `--fds-duration-short-out` | `200ms` | Normal |
| `--fds-duration-none` | `0ms` | Instant |
| `--fds-duration-short-in` | `280ms` | Normal |
| `--fds-duration-long-out` | `350ms` | Slow |
| `--fds-duration-extra-long-out` | `1000ms` | Cinematic |
| `--fds-duration-extra-extra-short-in` | `100ms` | Fast |

### Copy-Paste Transition Snippets

**Transform**
```css
transition: transform 0.2s;
```

**All Props**
```css
transition: 0.3s ease-in-out;
```

**Background**
```css
transition: background-color 0.2s ease-out;
```

**Opacity**
```css
transition: opacity 0.25s ease-in;
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `x11uh2n3-B` | Custom | stroke-dashoffset | UI transition |
| `x17x9eqa-B` | Scale | transform | UI transition |
| `x18re5ia-B` | Fade | opacity | UI transition |
| `x1a2jnmv-B` | Custom | stroke-dashoffset | UI transition |
| `x1ayzhmi-B` | Fade + Move | opacity, transform | UI transition |
| `x1dq47om-B` | Slide | transform | UI transition |
| `x1e5kmei-B` | Custom | background-position-x, background-position-y, background-size | UI transition |
| `x1gnlf15-B` | Fade + Move | opacity, transform | UI transition |
| `x1ofn8cw-B` | Custom | background-position-x, background-position-y | UI transition |
| `x1prjo1g-B` | Scale | transform | UI transition |
| `x1ql2n3s-B` | Custom | stroke-dashoffset | UI transition |
| `x1rp9ifn-B` | Rotate / Spin | transform | UI transition |
| `x1wh7uoa-B` | Fade + Move | opacity, transform | UI transition |
| `x5orj5x-B` | Slide | transform | UI transition |
| `xa0jybu-B` | Fade + Move | opacity, transform | UI transition |
| `xb4s9mv-B` | Custom | background-position-x, background-position-y | UI transition |
| `xct2g7x-B` | Scale | transform | UI transition |
| `xdyu7r2-B` | Fade | opacity | UI transition |
| `xepz06c-B` | Slide | transform | UI transition |
| `xfa266b-B` | Slide | transform | UI transition |

> *180 additional animations omitted (repetitive variants). See raw keyframes in `raw-css.json`.*

### Motion Fingerprint

- **Speed Character**: Deliberate & Calm (median duration: `300ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 200 unique animations (200 total including variants)

> This design moves with deliberate & calm timing using custom cubic-bezier curves, creating a UI that feels calm and controlled.

## 8. Do's and Don'ts

### Do
- Use Near Black (`#1c1e21`) for text — not pure black, it's warmer and more readable
- Use Helvetica as the primary typeface — it defines the brand personality
- Keep font weights between 400-500 — the system uses a narrow weight range for subtle hierarchy
- Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)
- Use #00987c (`#00987c`) as the primary accent — it's the brand's signature interactive color
- Use 24px border-radius on primary buttons — the brand uses generously-rounded CTAs
- Maintain nav height at 64px — consistent vertical space for the navigation bar
- Respect the 4px–32px spacing range — the design uses a wide scale for visual breathing room
- Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar
- Include exactly 11 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose
- Each card includes a left image — imagery is part of the card identity, not optional

### Don't
- Don't use pure black (`#000000`) for text — the near-black adds warmth
- Don't substitute with generic sans-serif or serif — the custom font carries the brand
- Don't use weight 700 (bold) or above — 500 is the maximum weight in this system
- Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements
- Don't introduce additional saturated accent colors — the palette is intentionally controlled
- Don't use sharp-cornered or pill buttons — 24px is the CTA border-radius standard
- Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence
- Don't make the nav sticky — this design lets it scroll away to maximize content focus


## 7b. Enforceable Brand Rules

*Structured Do/Don't with reasoning and validation tests. Agents can programmatically verify generated UI.*

```yaml
rules:
  - id: brand-canvas-001
    type: do
    rule: "Always use the page background `rgb(255, 255, 255)` as the base canvas"
    why: "Every component is designed to composit against this exact tone"
    test: "document.body.style.backgroundColor === 'rgb(255, 255, 255)'"
  - id: brand-accent-001
    type: do
    rule: "Reserve `rgb(0,152,124)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(0,152,124)\"]').length <= 3 per fold"
  - id: brand-depth-001
    type: dont
    rule: "Do NOT introduce drop shadows on cards or sections"
    why: "Containment is achieved via borders, not elevation — adding shadows breaks the depth contract"
    test: "getComputedStyle(card).boxShadow === 'none'"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 359px | Single column, compact spacing |
| Mobile | 459px | Single column, compact spacing |
| Mobile Large | 648px | Expanded mobile layout |
| Mobile Large | 719px | Expanded mobile layout |
| Mobile Large | 760px | Expanded mobile layout |
| Tablet | 1009px | Multi-column grids begin |
| Desktop | 1099px | Full feature layout |
| Desktop | 1267px | Full feature layout |
| Large Desktop | 1439px | Maximum content width |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `36px` | `28px` |
| heading | line-height | `46.0008px` | `34.0004px` |
| nav | height | `64px` | `56px` |
| button | width | `auto` | `32px` |

### Collapsing Strategy
- Headlines: 36px → 28px on mobile
- Navigation: horizontal links → hamburger menu on mobile
- Cards: multi-column → stacked vertical on mobile
- Footer: multi-column → stacked single column on mobile

### Touch Targets
- Buttons: 4px padding
- Navigation: adequate spacing between items
- Interactive elements: minimum 44px touch target recommended

### Collapsing Narrative

How the structural patterns adapt from desktop to mobile (extracted from both viewport extractions):

- **Nav CTAs reduced** on mobile (5 → 0) — the design prioritizes content over conversion buttons at small sizes.

## 9b. Visual Tone & Photography

**Tone:** Mixed photography + illustration

A balanced mix of photographic content and vector graphics. Photos likely carry product/lifestyle context while SVG handles icons, logos, and decorative accents.

**Canonical Brand Image (OG):**
- https://lookaside.fbsbx.com/elementpath/media/?media_id=2061885777588768&version=1771856828&transcode_extension=webp
  *This is the image shown when the site is shared on social media — represents the brand visual essence.*

**Hero Image (above-fold dominant visual):**
- Aspect: 1.84:1 (landscape (16:9-ish))
- Rendered size: 1440×783px
- *Use this aspect ratio + composition for your clone's hero — mimicking the proportion preserves the visual hierarchy.*

**Aspect Ratio Distribution:**
- Landscape (1.15–2.3): 7 (64%)
- Portrait (<0.87): 0 (0%)
- Square (0.87–1.15): 2 (18%)
- Ultra-wide (>2.3): 2 (18%)

**Media Format Mix:**
- WebP: 1 (optimized photo/illustration hybrid)

**Average rendered image size:** 815×450px
**Above-fold image count:** 1 / 11

**Decorative Patterns Detected:**
- 6 multi-stop linear gradients (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth
- **Glassmorphism** detected (`backdrop-filter: blur`) — layered transparent surfaces with blur, modern OS-like aesthetic

**Clone instruction for decorative work:** This is a gradient-rich design — invest in multi-stop CSS gradients (3+ color stops), not solid backgrounds.

**Imagery Guidance for clones:**
- Mix photography and illustration intentionally: photos for product/context, vectors for icons + decorative accents.
- Respect the format split — replacing JPGs with illustrations (or vice versa) will shift the brand tone.

## 10. Agent Prompt Guide

### Quick Reference
- Background: Pure White (`#ffffff`)
- Primary text: Near Black (`#1c1e21`)
- Accent: #00987c (`#00987c`)
- Border: Translucent Dark Gray (68%) (`rgba(43, 61, 70, 0.68)`)
- Font: Optimistic Display
- Body: 12px weight 400

### Example Component Prompts
- "Create a hero section on Pure White background (#ffffff). Headline at 36px Optimistic Display weight 500, line-height 1.28, color #1c1e21."
- "Create the primary CTA button: `#00987c` background, `#1c1e21` text, 24px border-radius, 4px padding, 700 weight, Optimistic Display font."
- "Build navigation: relative on `#ffffff`. Optimistic Display 12px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the light canvas to Pure White (`#ffffff`) — every component is composited against this exact base.
2. **Typography**: All type in Optimistic Display, weight range 400–500. Never exceed 500 — heavier weights break the brand's tonal restraint.
3. **Accent**: #00987c (`#00987c`) is the sole interactive color. On hover → M Tricolor Blue (`#1b74e4`). Use CSS transitions, not opacity/brightness filters.
4. **Motion**: All transitions use `cubic-bezier(0.08,0.52,0.52,1)`. Timing: 100ms for micro-interactions, 350ms for layout changes. Never use linear for UI transitions — preserve the brand's easing personality.
5. **Shape**: CTAs at `24px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
6. **Spacing**: Use the `--ca-space-*` token scale (4px–32px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
7. **Tokens**: Import from §11 CSS Export (`--ca-*` vars). Never hardcode hex values — always reference a token so theming remains consistent.

## 11. CSS Design Tokens Raw Export

*Copy-paste ready `:root {}` block — all values extracted directly from the live site.*

```css
/* Colors */
:root {
  --ca-background: #ffffff;
  --ca-surface-1: transparent;
  --ca-surface-2: #f1f4f7;
  --ca-ink-muted: #1c1e21;
  --ca-accent-glow: #65676b;
  --ca-primary: #00987c;
  --ca-on-primary: #111111;
  --ca-primary-hover: #1b74e4;
  --ca-hairline: #2b3d46;
  --ca-semantic-error: #c80a28;
  --ca-semantic-success: #31a24c;
  --ca-semantic-warning: #ffe200;
}

/* Typography */
:root {
  --ca-font-primary: "Optimistic VF", system-ui, sans-serif;
  --ca-text-display: 64px;
  --ca-text-body: 12px;
  --ca-text-button: 14px;
  --ca-text-mono: 16px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 4px;
  --ca-space-sm: 10px;
  --ca-space-md: 16px;
  --ca-space-base: 22px;
  --ca-space-lg: 80px;
  --ca-space-xl: 32px;
  --ca-space-2xl: 48px;
  --ca-space-3xl: 64px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 12px;
  --ca-radius-sm: 12px;
  --ca-radius-md: 12px;
  --ca-radius-lg: 24px;
  --ca-radius-xl: 24px;
  --ca-radius-full: 999px;
}
```


## 13. Page Structure Skeleton

*The actual layout the source site uses. Reproduce these sections in order to match the site structure.*

```yaml
page-skeleton:
  - section: unknown
    tag: div
    height: 7078px
    width: full-bleed
    layout: block
    children: 1
  - section: main-content
    tag: main
    classes: ["x1n2onr6", "x1vjfegm", "xwnajww", "xh7uebp"]
    height: 5369px
    width: full-bleed
    layout: block
    children: 2
  - section: footer
    tag: footer
    classes: ["x1n2onr6", "x1ja2u2z"]
    height: 1597px
    width: full-bleed
    layout: block
    children: 1
```

**Agent rule**: rebuild sections in this order (sorted by vertical position). Match the layout primitive (grid N-col / flex direction / block).


## 14. Copy Library (Real Content from Source)

*Actual text content extracted from the live page. Use these strings verbatim when reproducing the site — they carry the brand voice.*

```yaml
copy:
  section-headings:
    - "Nouvelle saison. Nouveaux styles."
    - "Sportives dans l’âme"
    - "Avancé.
les sens du terme"
    - "Découvrez la magie de la réalité virtuelle avec Meta Quest"
    - "Pourquoi acheter auprès de Meta"
  sub-headings:
    - "Lunettes IA"
    - "Retours gratuits pendant 30 jours"
    - "Garantie sans souci"
  ctas:
    - "FR"
    - "S’inscrire"
    - "France (Français)"
  navigation:
    - "Lunettes IA"
    - "Meta Quest"
    - "Applications et jeux"
    - "Découvrir Meta"
    - "Assistance"
  footer-links:
    - "Conditions générales"
```

**Agent rule**: reuse these exact strings when generating UI. Do NOT translate or rephrase — brand voice is preserved through the original wording.


## 15. Asset Inventory (Image Roles & Ratios)

*Image inventory classified by role and aspect ratio. When reproducing the site, allocate this number of assets per role.*

```yaml
assets:
  logo:
    count: 3
    avg-ratio: 3.65
    common-aspect: "~16:6 banner"
    sample-alts:
      - "Meta"
      - "Cartes d’applications et de jeux Meta Quest"
      - "Meta"
  hero:
    count: 4
    avg-ratio: 2.17
    common-aspect: "~16:9 landscape"
    sample-alts:
      - "Lunettes Ray-Ban Meta Gen 2 Blayzer Optics"
  product:
    count: 2
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
    sample-alts:
      - "Gros plan sur les lunettes de performance Oakley Meta Vangua"
      - "Gros plan sur les lunettes Oakley Meta HSTN avec monture noi"
  thumbnail:
    count: 5
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
    sample-alts:
      - "Réseau social Facebook Meta.com"
      - "Réseau social Threads Meta.com"
      - "Réseau social Instagram Meta.com"
```

**Agent rule**: when generating placeholder images, match these counts and aspect ratios. Use neutral placeholder backgrounds for `product` (e.g. `#f5f5f5`), full-color photography hints for `hero` and `editorial`.


## 16. Component HTML Templates

*Suggested HTML markup for reproducing the key components — based on what was detected in the source DOM.*

### Button (primary action)
```html
<button class="btn btn-primary">
  Action
</button>
```
_Source pattern detected: padding `4px` · radius `24px` · weight `400`_

**Agent rule**: use these markup skeletons as the structural baseline. Apply tokens from §2-3 for visual styling.


## 12. Known Extraction Gaps

*Auto-detected limitations of this extraction — understand before building:*

- **Sparse component extraction** — fewer than 5 component types detected. Highly dynamic sections (modals, datepickers, carousels) require interaction to render and are not captured in a static pass.


---
## Extraction Completeness: 82/100 (B)

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 25 | 25 | 19 named colors |
| Typography | 13 | 20 | 5 roles defined |
| Components | 12 | 20 | 3 specs extracted |
| Motion & Interaction | 12 | 15 | Keyframes present |
| CSS Custom Properties | 10 | 10 | 1567 vars |
| Responsive Breakpoints | 5 | 5 | 9 breakpoints |
| Variable Fonts | 5 | 5 | WDTH axes |

## 12. Known Gaps & Confidence

Explicit list of what this extraction could NOT capture. Agents should not invent values for these — either skip the feature or use the documented baseline + heuristic fallback.

*✅ No critical extraction gaps detected — high-confidence reproduction expected.*

### Per-section confidence

| Section | Confidence | Reason |
|---------|------------|--------|
| §1 Visual Theme | High | Body bg extracted via getComputedStyle() |
| §2 Colors | High | 1567 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 5 typography roles inferred |
| §4 Components | Medium | 3 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 19 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 9 breakpoints detected |
| §9b Photography | High | 11 images, hero present |

---
*Generated by Clone Architect — automated Playwright extraction + design analysis.*
*Source: https://meta.com | 2026-05-30T20:39:19.819Z*
*All values verified via getComputedStyle() — no approximation, no hallucination.*