oh-my-design-cli 1.6.7 → 1.7.1

package/web/references/meta/DESIGN.md

@@ -0,0 +1,615 @@
+---
+id: meta
+name: Meta
+country: US
+category: consumer-tech
+homepage: "https://about.meta.com"
+primary_color: "#0064E0"
+logo:
+  type: simpleicons
+  slug: "meta"
+verified: "2026-06-06"
+added: "2026-06-06"
+omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#0064e0"
+    primary-light: "#0082fb"
+    primary-bright: "#0080fb"
+    primary-pressed: "#0058c4"
+    canvas: "#ffffff"
+    ink: "#1c2b33"
+    ink-800: "#2d3a42"
+    gray-700: "#465a69"
+    gray-600: "#65676b"
+    gray-500: "#8a8d91"
+    gray-400: "#bcc0c4"
+    border: "#e4e6eb"
+    border-strong: "#ced0d4"
+    canvas-gray: "#f0f2f5"
+    surface-tint: "#f7f8fa"
+    success: "#42b72a"
+    success-text: "#2e8b1e"
+    error: "#fa383e"
+    warning: "#f5a623"
+  typography:
+    family: { sans: "Optimistic Text", mono: "SF Mono" }
+    display-hero: { size: 56, weight: 700, lineHeight: 1.07, tracking: -0.02, use: "Marketing hero, Optimistic Display" }
+    display-lg:   { size: 40, weight: 700, lineHeight: 1.20, tracking: -0.01, use: "Section headers" }
+    display:      { size: 32, weight: 600, lineHeight: 1.25, tracking: -0.01, use: "Feature titles" }
+    heading:      { size: 24, weight: 600, lineHeight: 1.33, use: "Card headings, modal titles" }
+    subtitle:     { size: 20, weight: 600, lineHeight: 1.40, use: "Sub-section, list headers" }
+    body-lg:      { size: 17, weight: 400, lineHeight: 1.53, use: "Lead paragraphs" }
+    body:         { size: 15, weight: 400, lineHeight: 1.47, use: "Standard reading text" }
+    body-sm:      { size: 13, weight: 400, lineHeight: 1.38, use: "Secondary info" }
+    caption:      { size: 12, weight: 400, lineHeight: 1.33, use: "Timestamps, fine print" }
+    button:       { size: 15, weight: 600, lineHeight: 1.33, use: "CTA labels" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 28, xxl: 32, section: 48 }
+  rounded: { sm: 6, md: 8, lg: 16, full: 9999 }
+  shadow:
+    standard: "0 1px 2px rgba(28,43,51,0.10)"
+    featured: "0 4px 16px rgba(28,43,51,0.12)"
+    gradient: "0 8px 32px rgba(0,100,224,0.30)"
+    dialog: "0 12px 28px rgba(28,43,51,0.20)"
+  components:
+    button-primary: { type: button, bg: "#0064e0", fg: "#ffffff", radius: 8, padding: "12px 20px", font: "15px/600", use: "Product-surface primary action" }
+    button-secondary: { type: button, bg: "#e4e6eb", fg: "#1c2b33", radius: 8, padding: "12px 20px", font: "15px/600", use: "Neutral secondary" }
+    button-outline: { type: button, bg: "transparent", fg: "#0064e0", radius: 8, padding: "12px 24px", font: "15px/600", use: "Tertiary CTA Sign up" }
+    input: { type: input, bg: "#ffffff", fg: "#1c2b33", radius: 8, padding: "12px 14px", font: "15px/400", use: "Standard form input" }
+    input-filled: { type: input, bg: "#f0f2f5", fg: "#1c2b33", radius: 8, padding: "12px 14px", font: "15px/400", use: "Search bars, dense forms" }
+    card: { type: card, bg: "#ffffff", radius: 12, padding: "16px", use: "Feed cards, content panels" }
+    badge-notif: { type: badge, bg: "#fa383e", fg: "#ffffff", radius: 9999, padding: "2px 6px", font: "12px/700", use: "Unread count red dot" }
+    badge-status: { type: badge, fg: "#0064e0", radius: 9999, padding: "4px 10px", font: "12px/600", use: "Soft informational label New" }
+    tab: { type: tab, bg: "transparent", fg: "#65676b", active: "3px bottom border #0064e0 with #0064e0 text", font: "15px/600", use: "In-page section nav" }
+    segmented: { type: tab, bg: "#f0f2f5", fg: "#65676b", radius: 8, padding: "8px 16px", active: "#ffffff bg with #1c2b33 text", font: "14px/600", use: "Mode switching" }
+    toast: { type: toast, bg: "#1c2b33", fg: "#ffffff", radius: 8, padding: "12px 16px", font: "14px/500", use: "Transient confirmation Link copied" }
+    dialog: { type: dialog, bg: "#ffffff", fg: "#1c2b33", radius: 12, padding: "24px", use: "Confirmations, composer dialogs" }
+    toggle: { type: toggle, bg: "#0064e0", radius: 9999, use: "Boolean settings, on=blue off=#bcc0c4" }
+  components_harvested: true
+---
+
+# 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
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Optimistic Display | 56px | 700 | 60px (1.07) | -0.02em | Marketing hero headlines |
+| Display Large | Optimistic Display | 40px | 700 | 48px (1.20) | -0.01em | Section headers |
+| Display | Optimistic Display | 32px | 600 | 40px (1.25) | -0.01em | Feature titles |
+| Heading | Optimistic Display | 24px | 600 | 32px (1.33) | normal | Card headings, modal titles |
+| Subtitle | Optimistic Text | 20px | 600 | 28px (1.40) | normal | Sub-section, list headers |
+| Body Large | Optimistic Text | 17px | 400 | 26px (1.53) | normal | Lead paragraphs |
+| Body | Optimistic Text | 15px | 400 | 22px (1.47) | normal | Standard reading text (FB body size) |
+| Body Small | Optimistic Text | 13px | 400 | 18px (1.38) | normal | Secondary info |
+| Caption | Optimistic Text | 12px | 400 | 16px (1.33) | normal | Timestamps, fine print |
+| Button Label | Optimistic Text | 15px | 600 | 20px (1.33) | normal | CTA labels |
+
+### 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
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Page canvas, inline elements |
+| Subtle (Level 1) | `0 1px 2px rgba(28,43,51,0.10)` | Feed cards, list separation |
+| Standard (Level 2) | `0 4px 16px rgba(28,43,51,0.12)` | Featured cards, raised panels |
+| Elevated (Level 3) | `0 8px 24px rgba(28,43,51,0.16)` | Dropdowns, popovers, menus |
+| Modal (Level 4) | `0 12px 28px rgba(28,43,51,0.20)` | Dialogs, composer modals |
+| Brand Glow | `0 8px 32px rgba(0,100,224,0.30)` | Gradient hero only — licensed colored shadow |
+
+**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
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <768px | Single column, 16px gutter, bottom nav, stacked hero |
+| Tablet | 768–1024px | Two columns, 24px gutter, side margins appear |
+| Desktop | 1024–1440px | Three-column product shell / 12-col marketing grid |
+| Wide | >1440px | Centered max-width ~1200px, larger hero type |
+
+### 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.
+
+| Context | Tone |
+|---|---|
+| CTAs | Imperative, short, optimistic (`Get started`, `Learn more`, `Build with Meta`) |
+| Success toasts | Plain past-tense single line (`Link copied`, `Changes saved`). No exclamation spam. |
+| Error messages | Specific, blameless, actionable. `Something went wrong. Try again.` only as last resort. |
+| Onboarding | Second-person, one idea per step, warm and encouraging |
+| Brand / mission | Aspirational, future-tense, connection-centered (`Bringing the metaverse to life`) |
+| Empty states | Explain why it's empty + one action. Friendly, never cold. |
+| Legal / privacy | Clear, direct, no dark patterns in copy — plainspoken consent language |
+
+**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
+
+| State | Treatment |
+|---|---|
+| **Empty (first use)** | Friendly single-line explainer in `#65676B` body text + one primary action (`#0064E0` button). Light illustration acceptable on marketing, omitted on dense product. |
+| **Empty (no results)** | Single `#8A8D91` caption line (`No results found`). Optional "Clear filters" ghost button. |
+| **Loading (first paint)** | Skeleton blocks at `#E4E6EB` matching final layout, 1.2s shimmer with white highlight. Rounded at component radius. |
+| **Loading (refresh)** | Top pull-down spinner in `#0064E0`. Content stays visible with previous values; no blocking overlay. |
+| **Error (inline field)** | `#FA383E` 1px border + `0 0 0 3px rgba(250,56,62,0.18)` ring, red helper text 13px below. One actionable sentence. |
+| **Error (toast)** | `#1C2B33` bg, white 14px text, 3s auto-dismiss, bottom-anchored. One sentence. |
+| **Error (screen-blocking)** | Reserved for outage. Centered `#1C2B33` 17px weight 600 message, `#0064E0` retry button below. |
+| **Success (toast)** | `#1C2B33` bg, white text, optional `#42B72A` check icon. `Saved`, `Posted`. 3s dismiss. |
+| **Success (inline)** | Brief `rgba(66,183,42,0.14)` flash behind the updated element, 300ms fade. |
+| **Disabled** | Opacity 0.4 on the element. Inputs keep their `#CED0D4` border so geometry is stable when re-enabled. |
+| **Focus** | `#0064E0` border + `0 0 0 3px rgba(0,100,224,0.18)` ring on all interactive elements. Always visible for accessibility. |
+| **Hover (button)** | Solid blue darkens to `#0058C4`; gradient brightens its light stop. 150ms ease. |
+
+## 15. Motion & Easing
+
+**Durations** (named):
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | State flips when reduced-motion is set |
+| `motion-fast` | 150ms | Hover, focus, button press, small reveals |
+| `motion-standard` | 250ms | Default — menus, card expand, tab switch |
+| `motion-slow` | 400ms | Emphasized — modal entrance, success confirmation |
+| `motion-page` | 350ms | Route transitions, full-screen pushes |
+| `motion-brand` | 600ms | Gradient hero reveal, infinity-mark animation |
+
+**Easings:**
+
+| Token | Curve | Use |
+|---|---|---|
+| `ease-enter` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Things appearing — menus, sheets, toasts |
+| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Things leaving — dismissals |
+| `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Two-way — collapsibles, tab content |
+| `ease-brand` | `cubic-bezier(0.22, 1, 0.36, 1)` | Gradient reveals, infinity loop — smooth, premium overshoot-free glide |
+
+**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.
+
+<!--
+OmD v0.1 Sources
+
+WebSearch (2026-06-06): Meta brand color codes corroborated across
+brandpalettes.com/meta-color-codes, brandcolorcode.com/meta-platforms,
+designpieces.com — confirming #0082FB (light blue), #0064E0 (blue),
+#1C2B33 (gray/ink). Typography: Optimistic Display + Optimistic Text
+(custom superfamily). Logo: infinity mark, blue gradient, per
+design.facebook.com/stories/designing-our-new-company-brand-meta.
+
+WebFetch (2026-06-06): about.meta.com 301-redirects to www.meta.com/about.
+Brand-surface reading of gradient + Optimistic type is consistent with the
+official rebrand story.
+
+Facebook product-surface neutrals (#F0F2F5 canvas, #65676B secondary text,
+#E4E6EB border, #42B72A green, #FA383E red, #1877F2 legacy blue) are
+widely documented Facebook design-system tokens used here as the product
+lineage that Meta's marketing brand sits atop.
+
+Personas (§13) are fictional archetypes informed by publicly described
+Meta product user segments. Interpretive claims (gradient = third dimension /
+immersive thesis) are editorial readings of the published rebrand, not
+verbatim Meta statements.
+-->