# Meta: brand book and build spec

An infinity-loop symbol in a blue gradient, one variable typeface (Optimistic) and a single action blue. On meta.com the brand gets out of the way of photography: pill buttons, 24px-rounded photo cards and a giant condensed headline over video.

From unfairly.ai/brand-guidelines/meta, checked 2026-10-31. Unofficial study; not affiliated with Meta.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Meta keeps its own surface nearly colorless so people and products carry the page; the brand lives in one loop, one blue, one typeface and very strict partner rules. Based on: The guide publishes logo and partnership rules but no palette or voice; meta.com uses one blue, gray surfaces and full-bleed photography.

## Purpose

Mission: Build the future of human connection and the technology that makes it possible (published; https://www.meta.com/about/company-info/)

Story: Facebook (2004) grew into a family of apps; in 2019 a company brand separated the company from the app, and on October 28, 2021 the company became Meta, a name chosen because it can mean "beyond". (published)

| Value | What it means in the work | Source |
|---|---|---|
| Give people a voice | First of Meta's five principles | published: https://www.meta.com/about/company-info/ |
| Build connection and community | Second principle | published: https://www.meta.com/about/company-info/ |
| Serve everyone | Third principle | published: https://www.meta.com/about/company-info/ |
| Keep people safe and protect privacy | Fourth principle | published: https://www.meta.com/about/company-info/ |
| Promote economic opportunity | Fifth principle | published: https://www.meta.com/about/company-info/ |

## Fixed and flexible

Never changes:
- The infinity-loop symbol and its four color variations
- Clear space 2x symbol height, minimum 12px / 5mm
- One typeface family (Optimistic)
- One action blue on pill buttons
- Sentence case

The one thing that varies: Photography and its color: each product brings its own palette through the photo.

## Positioning

- **Statement**: A social technology company building the future of human connection and the technology that makes it possible. (published)
- **Category**: Social technology: apps, AI, AI glasses and mixed reality (published)
- **Audience**: Billions of people who use its apps, plus creators, developers, businesses and partners (published)
- **Problem**: Connection limited by screens, distance and physics (paraphrase of the brand story). (published)
- **Promise**: Go beyond what digital connection makes possible today. (published)
- **Differentiators**: A family of apps used by billions (Facebook, Messenger, Instagram, WhatsApp).; Own hardware for wearing and entering computing: AI glasses with eyewear brands and Meta Quest.; Meta AI built into the products.
- **Alternatives**: 2D screens and today's online experiences (the brand story frames these as the limit to move beyond).

## Messaging

Boilerplate (published): Meta builds technologies that help people connect, find communities, and grow businesses.

Taglines:
- We're building the future of human connection (About Meta hero line)
- Meet the all-new Meta Glasses (homepage hero (a product launch line, changes with the season))
- Iconic style meets Meta AI (Ray-Ban Meta card eyebrow)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Human connection | Technology built around people and their relationships; the mission is the future of human connection. | Family of apps: Facebook, Messenger, Instagram, WhatsApp (and Threads). | published |
| Beyond the screen | Moving past 2D screens toward AI glasses and mixed reality. | AI glasses range: Meta Glasses, Ray-Ban Meta, Ray-Ban Meta Audio, Oakley Meta, Meta Ray-Ban Display.; Meta Quest 3S mixed reality headset and Meta VR Glasses. | published |
| AI you wear | AI built into everyday products: glasses with Meta AI, a personal AI agent device. | AI glasses range: Meta Glasses, Ray-Ban Meta, Ray-Ban Meta Audio, Oakley Meta, Meta Ray-Ban Display. | observed |
| Buy with confidence | Store promises on delivery, returns, warranty and financing. | Free 2-day delivery on Meta Glasses, Meta Quest, Ray-Ban Meta and Oakley Meta.; Free 30-day returns with no shipping fees.; One-year warranty included. | observed |

They never claim:
- Never imply a partnership, endorsement or "powered by" relationship without an approved execution.
- Never present more than one Meta technology when a partner is host.

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "Meet the all-new Meta Glasses" | homepage hero | https://www.meta.com/ (2026-10-31) |
| "The weight is over" | homepage card | https://www.meta.com/ (2026-10-31) |
| "Athletic Intelligence is here" | homepage card | https://www.meta.com/ (2026-10-31) |
| "We're building the future of human connection" | About Meta | https://www.meta.com/about/ (2026-10-31) |

## Voice

Tone words: Optimistic, Plain, Confident, Warm.

Traits:
- Optimistic, but not naive (our reading)
- Human, but not technical (our reading)
- Confident, but not loud (our reading)
- Disciplined, but not rigid (our reading)

- Meta publishes no voice guide for the company brand. The tone words are our reading of meta.com and the brand story, not Meta's own list.
- Homepage lines are short fragments: an eyebrow of two to six words, then a product name ("The weight is over" / "Meta VR Glasses").
- Repetition as rhythm: "More shapes. More statements. More Meta Glasses."
- Store copy speaks to "you" plainly: "Change your mind? Return your product within 30 days".
- In partner work the host's voice leads; Meta's guide asks for sentence-case credit lines from an approved list (published).
- Products are named exactly and never decorated: no "our", no "by", no added descriptors (published, partnering guide).

Rules a copy check enforces:
- Sentence case headlines
- Credit lines are written in sentence case
- Never: Powered by. Say "Together with", "Created with", "Presented by" or "Technology from" instead
- Never add "our", "by" or extra descriptors to a Meta product name
- Name integrations "[Meta technology] for [partner]" or "[Partner] for/with [Meta technology]"
- Never use the Meta logo or name to represent Facebook
- No exclamation marks
- American spelling
- Write as "we", to "you"
- Sentences of 14 words or fewer

Their words: AI glasses, mixed reality, human connection.
Never: Powered by.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Meta Blue (CTA) | #0457CB | accent | every primary pill, text links (observed) |
| Symbol blue | #0082FB | accent_secondary | light end of the symbol gradient (logo file) |
| Symbol deep blue | #0064E0 | gradient | deep end of the symbol gradient (logo file) |
| Ink | #0A1317 | ink | text on light grounds (observed) |
| Wordmark slate | #1C2B33 | night | wordmark on light; dark logo ground in the guide |
| Muted ink | #5D6C7B | ink_muted | footer links, legal (observed) |
| Surface | #F1F4F7 | surface | tiles, one band, glass base (observed) |
| White | #FFFFFF | paper | page ground, text on photos |

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Optimistic VF | Meta's proprietary company typeface; no public licence or download (not published) | Archivo | "Arial Narrow", Arial, sans-serif |
| body | Optimistic VF | Meta's proprietary company typeface (not published) | Figtree | Arial, sans-serif |
| mono | Optimistic Mono VF | proprietary (not published) | JetBrains Mono | Menlo, monospace |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero headline (condensed) | --text-hero-display-* | display | 130px | 66px | 1 | -6.5px | 700, width 88 |
| Product card title / section title | --text-card-title-* | body | 48px | 32px | 1.1667 | 1.7px | 600 |
| Store intro H1 | --text-store-title-* | body | 36px | 28px | 1.278 | 1px | 600 |
| Why-buy card title | --text-feature-title-* | body | 28px | 24px | 1.214 | 1px | 400 |
| Hero lead | --text-hero-lead-* | body | 24px | 20px | 1.25 | 0.85px | 600 |
| News card title | --text-news-title-* | body | 24px | 20px | 1.25 | 0.85px | 400 |
| Card eyebrow / newsletter label | --text-eyebrow-* | body | 18px | 18px | 1.444 | 0.6px | 500 |
| Body / tile label | --text-body-* | body | 16px | 16px | 1.5 | 0.3px | 500 |
| Nav and footer link | --text-link-* | body | 14px | 14px | 1.4286 | 0.35px | 500 |
| Button label | --text-button-* | body | 14px | 14px | 1.4286 | 0.4px | 800 |
| Legal and consent text | --text-legal-* | body | 12px | 12px | 1.333 | 0.35px | 500 |

## Layout

Measured on https://www.meta.com/: measured with Playwright at 1440x900 and 390x844 from computed styles and bounding boxes, plus rendered font calibration.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 32px | 16px |
| Section padding | 80px | 48px |
| Container max width | 1376px | full |
| Grid columns | 4 | 1 |
| Gutter | 32px | 16px |
| Card gap | 32px | 32px |
| Navigation height | 64px | 64px |

Breakpoints weren't measured. tokens.css switches to the phone values at 600px; that number is our default, not Meta's.

Homepage bands, top to bottom (observed):
1. Navigation
   - Desktop: 1440x64, overlays the hero
   - Phone: 390x56: hamburger, logo, search, bag, account
   - Frosted white rgba(255,255,255,0.8) + blur(20px) after scroll
2. Hero video
   - Desktop: 1440x783 at y 0
   - Phone: 390x641
   - Headline line 1 top-left, line 2 bottom-right at 130px
   - Poster image at rest
3. Store intro and category tiles
   - Desktop: H1 y 879, tiles y 965 (320x130)
   - Phone: H1 3 lines, tiles scroll sideways (170x132)
   - Tiles #F1F4F7, radius 24
4. LISA card
   - Desktop: 1376x602 at y 1127
   - Phone: 358x477
   - Radius 24, text bottom-centred
5. Product grid
   - Desktop: 672x672 cards, rows y 1761 / 2465 / 3169
   - Phone: 358x477 stacked
   - 32px gaps desktop, 16px phone
6. Quest 3S card
   - Desktop: 1376x602 at y 3873
   - Phone: 358x477
   - Same block as the LISA card
7. Why buy from Meta
   - Desktop: 1440x600 at y 4555
   - Phone: 390x500, cards scroll sideways
   - Cards 320x320 white radius 24 padding 40
8. The latest from Meta
   - Desktop: y 5155-5879, images 672x378
   - Phone: stacked 358x201
   - Titles below images, 24px 300
9. Newsletter
   - Desktop: row at y 5959
   - Phone: stacked full width
   - Outlined field radius 12, outline pill button
10. Footer
   - Desktop: rule y 6243 to page end 7504
   - Phone: accordions
   - Columns at x 501 / 814 / 1127

## Page anatomy

How Meta's own landing pages are built, part by part (observed; https://www.meta.com/, 2026-10-31). A homepage pattern, not a brand law: follow it for landing pages.

**Navigation**
- summary: Transparent 64px bar floating over the hero video (56px on phone): white Meta logo at left, four product links, then Explore Meta, Support and four 24px icons at right. It turns frosted white once scrolled.
- ground: transparent over the hero at rest; after scrolling, rgba(255,255,255,0.8) with backdrop-filter blur(20px), text #0A1317 and the dark-wordmark logo
- height: 64px desktop, 56px phone
- border: none at rest or scrolled
- logo: variant primary logo, on-dark version over the hero: blue gradient symbol + white wordmark (slot logo-meta-white); the dark-wordmark version (slot logo-meta-dark) once the bar turns white; px 61x14 box (the 50x11 SVG scaled up to fill it); position desktop x 32 y 25; phone x 64 y 21 (after the hamburger)
- links: count 4; labels AI glasses, Meta Quest, Meta VR Glasses, Muse Charm; size 14px/20px; weight 400; color #FFFFFF over the hero; tracking Optimistic -0.14px = Figtree +0.35px (use +0.35px); alignment left group, text at x 145, 247, 360, 507 (each inside a 32px pill hit area with 12px side padding, pills 12px apart, first pill at x 133)
- actions:
  - Explore Meta (text link in a 32px pill hit area at x 999, 111 wide; text x 1011)
  - Support (pill at x 1122, 78 wide; text x 1134)
  - Search: 24px magnifier, x 1216
  - Globe 24px + "US" 14px, x 1260 / 1288
  - Bag 24px, x 1336
  - Account 24px, x 1380 (right edge 1404)
- sticky: yes: the bar stays at the top; frosted white after scroll
- phone: shows hamburger 24px at x 20 y 16, logo 61x14 at x 64 y 21, then search x 258, bag x 302, account x 346 (all 24px at y 16, white over the hero; #0A1317 versions once scrolled); menu hamburger opens a menu (contents not measured); cta none in the bar

**Hero**
- summary: Full-bleed autoplaying lifestyle video under the transparent nav, 783px tall on desktop (641px phone). A giant condensed white headline is split in two: line one top left, line two bottom right. A short white lead and two pill buttons sit bottom left. A pause button sits bottom right.
- desktop: section y 0-783, full width 1440, ground #0A1317 under the video; column split no columns: text pinned to corners. Line 1 left-aligned at x 32; line 2 right-aligned to x 1408; lead and buttons left at x 32; vertical anchors position the headline by its BASELINES, not by box tops: line 1 "Meet the all-new" baseline y 214 (cap top y 123), x 32-842 (810px wide); line 2 "Meta Glasses" baseline y 695 (cap top y 604), x 760-1408. With Archivo 700 at 130px/130px each 130px line box sits 108px above its baseline, so line box tops are y 106 and y 587 (Optimistic's own boxes start at y 100 and 581). Lead y 565-625 (2 lines, max 440px wide, x 32). Buttons y 659-711. Pause button x 1388 y 731.; text max width lead 440px; each headline line is one line, never wrapped; media video fills 1440x783, object-fit cover; at rest show the poster image (slot hero-poster-desk). No scrim layer measured; the photo itself is mid-dark.; cta size Shop 99x52 (blue, x 32), Learn more 141x52 (glass, x 143); 12px apart
- phone: order headline (3 lines), lead, buttons, pause at bottom right; alignment left, 20px gutter; sizes section 390x641. Headline 66px/66px Optimistic 700 wdth 82, -3.3px, one block wrapping in 3 lines "Meet the all-" / "new Meta" / "Glasses": baselines y 132, 198, 264 (with Archivo 66px/66px the block top is y 77). Lead 20px/28px at y 469, max-width 371 (it may run to x 391), 2 lines: "More shapes. More statements. More" / "Meta Glasses." (first line 358px wide). Buttons Shop 99x52 at x 20 y 549, Learn more 141x52 at x 127. Pause x 350 y 601.; media portrait poster (slot hero-poster-phone), object-fit cover
- at rest: video animation only; the resting state is the poster image; headline each letter is its own span (they animate in); at rest every letter is visible, white; pause 32px circle, white 16px pause glyph
- media: slots hero-poster-desk and hero-poster-phone (the video's poster frames)
- type: Headline Optimistic VF 700, wdth 82, 130px/130px, -6.5px, #FFFFFF (stand-in Archivo 700 wdth 88, line 2 wdth 84); lead 24px/30px Optimistic 500 (Figtree 600) = Figtree 600 +0.85px, #FFFFFF (phone 20px/28px)
- cta: two pills: Shop (blue #0457CB) then Learn more (glass)
- proof: none in the hero
- copy:
  - H1 line 1: "Meet the all-new"
  - H1 line 2: "Meta Glasses"
  - Lead: "More shapes. More statements. More Meta Glasses."
  - Buttons: "Shop", "Learn more"

**Store intro and category tiles**
- summary: A centred H1 on white, then four light-gray rounded tiles, each a product cut-out over a label.
- ground: #FFFFFF
- desktop: band H1 top y 879 (96px below the hero), tiles y 965-1095; h1 36px/46px Optimistic 500 (Figtree 600) #0A1317, centred, one line 977px wide (x 232-1209); grid 4 tiles 320x130 at x 32, 384, 736, 1088 (32px gaps), 32px below the H1 baseline area (H1 bottom 925 + 40); tiles radius 24, fill #F1F4F7, cut-out 169x54 centred top +20, label 16px/24px Optimistic 400 (Figtree 500) centred top +86
- phone: images use the phone cut-outs (slots tile-*-phone, 248x152 or 248x248) in an 88x54 contain box: the glasses fill the 88px width; h1 28px/34px Optimistic 500 (Figtree 600) centred, 3 lines in 300px (y 697-799); band H1 y 697-799; tiles y 839-971 (40px under the H1); grid one row of 170x132 tiles at x 16, 202, 388, 574 (16px apart), radius 16, scrolls sideways: two tiles and a 2px sliver of the third show at 390; tiles cut-out 88x54, label 16px/24px
- anatomy:
  - H1 copy: "Shop devices, accessories and more from the Meta Store"
  - Tile labels in order: AI glasses, Meta VR Glasses, Meta Quest, Muse Charm
  - Tile images are transparent PNG cut-outs on the #F1F4F7 tile (slots tile-ai-glasses, tile-meta-vr-glasses, tile-meta-quest, tile-muse-charm)
- components:
  - category tile

**Full-width product card: Meta Glasses by LISA**
- summary: A 1376x602 rounded photo card with a centred white text block at the bottom.
- ground: photo (slot card-lisa) on #FFFFFF page
- desktop: card x 32 y 1127, 1376x602, radius 24, 32px below the tiles; text eyebrow 18px/26px Optimistic 400 (Figtree 500) white at card top +388 (y 1515); title 48px/56px Optimistic 500 (Figtree 600) white at +418 (y 1545); buttons 44px at +510 (y 1637): Shop 83x44 then Learn more (glass) 125x44, 16px apart, centred
- phone: media phone uses its own 3:4 portrait crop of every card photo (slots card-*-phone), object-fit cover; never crop the square desktop file; card x 16 y 1003 (32px under the tiles), 358x477, radius 24; text eyebrow 18px/26px at +324, title 32px/36px at +354, buttons 44px at +410 (bottom +454, 23px bottom padding)
- anatomy:
  - Eyebrow: "One star. Two styles."
  - Title: "Meta Glasses by LISA"
  - Buttons: Shop, Learn more
- components:
  - product card
  - button primary
  - button glass

**Product card grid (2 x 3)**
- summary: Six square rounded photo cards in two columns, each with the same bottom-centred eyebrow, product name and pill buttons.
- ground: photos on #FFFFFF
- desktop: grid 2 columns of 672x672 cards at x 32 and 736 (32px gap), rows at y 1761, 2465, 3169 (32px row gap); text eyebrow at card top +458, title 48px/56px at +488, buttons at +580 (bottom at +624, 48px bottom padding)
- phone: grid one column of 358x477 cards at x 16, tops y 1497, 1990, 2483, 2977, 3470, 3963 (pitch 493: 477 + 16); text same block as the LISA card
- anatomy:
  - Card 1: eyebrow "Iconic style meets Meta AI", title "Ray-Ban Meta", buttons Shop + Learn more (slot card-ray-ban-meta)
  - Card 2: eyebrow "Audio AI glasses", title "Ray-Ban Meta Audio", buttons Shop + Learn more (slot card-ray-ban-meta-audio)
  - Card 3: eyebrow "The weight is over", title "Meta VR Glasses", buttons Learn more only (blue) (slot card-meta-vr-glasses)
  - Card 4: eyebrow "Made for your personal AI agent", title "Muse Charm", buttons Learn more only (blue) (slot card-muse-charm)
  - Card 5: eyebrow "Athletic Intelligence is here", title "Oakley Meta", buttons Shop + Learn more (slot card-oakley-meta)
  - Card 6: eyebrow "Look forward", title "Meta Ray-Ban Display", buttons Shop + Learn more (slot card-meta-ray-ban-display)
- components:
  - product card

**Full-width product card: Meta Quest 3S**
- summary: A second 1376x602 rounded photo card closing the product run.
- ground: photo (slot card-meta-quest-3s)
- desktop: card x 32 y 3873, 1376x602, radius 24; text same as the LISA card: eyebrow +388, title +418, buttons +510
- phone: card 358x477 at y 4457 (16px after the last grid card)
- anatomy:
  - Eyebrow: "Expand your world"
  - Title: "Meta Quest 3S"
  - Buttons: Shop, Learn more
- components:
  - product card

**Why buy from Meta**
- summary: A full-width #F1F4F7 band with a centred 48px title and four white rounded cards: icon, light two-line title, short body.
- ground: #F1F4F7, full bleed, 80px top and bottom padding (48px phone)
- desktop: band y 4555-5155 (600 tall), starts 80px below the Quest card; title 48px/56px Optimistic 500 (Figtree 600) centred at y 4635; cards 4 cards 320x320 at x 32, 384, 736, 1088 (32px gaps), y 4755 (64px below the title); padding 40; icon 48px at +40 (bottom +88); title text (28px/34px, 2 lines) first line box at +120, i.e. 32px clear below the icon; body text (16px/24px) first line box at +210, i.e. 22px below the title's last line
- phone: band y 4982-5482 (48px after the Quest card), 48px top padding; title 32px/36px Optimistic 500 (Figtree 600) centred at y 5030; cards one sideways-scrolling row of 273x344 cards at y 5090, x 16, 313, 610, 907 (24px apart); inside each: padding 40, icon 48px at +40, title 24px/34px first line at +121 (2 lines), body 16px/24px first line at +210
- anatomy:
  - Title: "Why buy from Meta"
  - Card 1: delivery-truck icon, "Free 2-day delivery", "Get free 2-day shipping on Meta Glasses, Meta Quest, Ray-Ban Meta and Oakley Meta."
  - Card 2: returns icon, "Free 30-day returns", "Change your mind? Return your product within 30 days with no shipping fees attached."
  - Card 3: shield-heart icon, "Worry-free warranty", "Products that come with peace of mind. One-year warranty included."
  - Card 4: card icon, "Buy now, pay later" (break after the comma), "Payment plans with 0% APR for as low as $19.99 USD/month‡."
  - Icons are the slots icon-delivery, icon-returns, icon-warranty, icon-pay-later (#0457CB, 48px)
- components:
  - feature card

**The latest from Meta**
- summary: White band: centred 48px title, then two 16:9 rounded news images with a light 24px title under each.
- ground: #FFFFFF, 80px top padding
- desktop: band y 5155-5879; title 48px/56px Optimistic 500 (Figtree 600) centred at y 5235; cards 2 columns, x 32 and 736, images 672x378 radius 24 at y 5355; titles 24px/30px Optimistic 300 (Figtree 400) at y 5769, left-aligned
- phone: band y 5482-6225, 48px top padding; title 32px/36px Optimistic 500 (Figtree 600) centred at y 5530; cards stacked at x 16: image 1 358x201 radius 24 at y 5590, its title 20px/28px Optimistic 300 (Figtree 400) at y 5812 (21px under the image, 2 lines); image 2 at y 5900 (32px after title 1), title 2 at y 6121
- anatomy:
  - Title: "The latest from Meta"
  - News 1: slot news-connect-2026, "Everything We Announced at Meta Connect 2026"
  - News 2: slot news-ai-glasses-qa, "Meta's AI Glasses: Your Questions Answered"
  - News titles are Title Case (they are article headlines); everything else is sentence case
- components:
  - news card

**Newsletter sign-up**
- summary: A quiet white row: gray label at left, a wide outlined email field, an outlined pill Sign up button, three lines of consent text.
- ground: #FFFFFF
- desktop: row y 5959; label "Get news and updates from Meta" 18px/26px Optimistic 400 (Figtree 500) #5D6C7B, x 32, 203px wide (2 lines); input x 384, 800x60, radius 12, 1px rgba(10,19,23,0.45) border, placeholder "Email"; button Sign up outline pill 98x44 at x 1208 y 5968; legal three separate 12px/16px #5D6C7B paragraphs at x 384, 800 wide, 8px apart: the first wraps to 2 lines (y 6043-6075), the second at y 6083, the third at y 6107; "Terms" and "Privacy Policy" are #0457CB underlined links
- phone: stack all at x 16: label 18px/26px one line at y 6305; input 358x60 at y 6347; Sign up 358x44 at y 6423; consent paragraphs at y 6491 (3 lines), 6547 (2 lines), 6587 (1 line)
- anatomy:
  - Consent paragraph 1 of 3: "By signing up you agree to receive updates and marketing messages (e.g. email, social, etc.) from Meta about Meta's existing and future products and services."
  - Consent paragraph 2 of 3: "You may withdraw your consent and unsubscribe at any time by clicking the unsubscribe link included in our messages."
  - Consent paragraph 3 of 3: "Your subscription is subject to the Terms and Privacy Policy."
- components:
  - email input
  - button outline

**Footer**
- summary: White footer under a 1px #E1E2E3 rule: dark Meta logo and five gray social icons at left, three link columns at right, then a locale link and small legal paragraphs.
- ground: #FFFFFF; 1px #E1E2E3 rule full width at y 6243
- anatomy:
  - Logo (dark wordmark, slot logo-meta-dark) 91x20 at x 32 y 6292
  - Social icons 24px #465A69 at y 6364, x 32, 88, 144, 200, 256: Facebook, Threads, Instagram, X, YouTube (slots social-*)
  - Three columns of 281px at x 501, 814 and 1127, first headings at y 6292
  - Column heads 14px/20px Optimistic 700 (Figtree 800) #0A1317; links 14px/20px Optimistic 400 (Figtree 500) #5D6C7B; 24px row pitch; first link 25px under its head; next group head 51px after the last link top
  - Column 1: Meta Store: Meta Glasses, Ray-Ban Meta glasses, Oakley Meta glasses, Meta Ray-Ban Display, Compare glasses, AI glasses accessories, AI glasses guides, Meta Lab, Meta Quest, Meta Quest accessories, Apps and games, Meta Gift Card, Refurbished Meta Quest 3, Refurbished Meta Quest 3S, Refurbished Ray-Ban Meta glasses, More from Ray-Ban, Meta Quest: Play now. Pay later., Meta Warranty Plus, Meta Quest referrals, Education discount, AI glasses bulk order inquiry, Blog / Store support and legal: Meta Help Center, Order status, Returns, Find a product demo, Find a store, Legal, Terms of sale, Meta Quest safety center
  - Column 2: Community: Creators, Developers, Businesses, Non-profits, Download SDKs, Made for Meta partner program, VR for Good / Our actions: Data and privacy, Responsible business practices, Accessibility, Elections
  - Column 3: About us: About Meta, Company Info, Careers, Media gallery, Brand resources, For investors, Newsroom / Site terms and policies: Community standards, Privacy policy, Terms, Cookie policy / App support: Facebook Help Center, Messenger Help Center, Instagram Help Center, WhatsApp Help Center, Workplace Help Center, Meta Verified, Meta Account (Single Login)
  - Bottom row at y 7236: "United States (English)" 14px #1C1E21 underlined at x 32; legal paragraphs 12px/16px #5D6C7B at x 501, 907 wide, 12px apart
  - Legal paragraphs (links underlined #0457CB: "Important Guidance & Safety Warnings", "legal disclosures", "current promotions", "current offers", "Financing Disclosures"): "Parents: Important Guidance & Safety Warnings for children's use." / "For additional details on our AI Glasses and Meta Quest products and services, please visit the product pages and review the related legal disclosures. See details for our current promotions." / "OPTIONAL FINANCING is subject to eligibility and lender terms. For details on current financing offers, see current offers and Financing Disclosures." / "©2026 Meta."  (links #0457CB underlined; "Parents" Optimistic 600 (Figtree 700) and "OPTIONAL FINANCING" Optimistic 700 (Figtree 800))
  - Page ends at y 7504 (about 140px below the copyright)
- phone: Rule (1px #E1E2E3) at y 6723. Accordion heads are 16px/24px Optimistic 400 (Figtree 500) #5D6C7B whether open or closed, no divider lines; the open Meta Store list runs 22 links 14px/20px #0A1317 on a 36px pitch (y 6953 to 7709), then the next head 69px later. Logo at x 16 y 6772, social icons at y 6828, x 16, 72, 128, 184, 240, then accordion rows: the first group (Meta Store) open with links 14px/20px Optimistic 500 (Figtree 600) #0A1317 on a 36px pitch; the other six heads (Store support and legal, Community, Our actions, About us, Site terms and policies, App support) collapsed as 16px/24px #5D6C7B rows 57px apart with a 24px chevron at x 350; the first head (Meta Store) at y 6905 with its first link at y 6953; the collapsed heads from y 7778; locale link at y 8224; legal paragraphs from y 8304; copyright y 8484; page ends at y 8640.

**On dark grounds**
- secondary button: glass Learn more pill (#F1F4F7 at 70% + blur, #0A1317 text) beside the blue Shop pill
- link: white text, no underline (nav over the hero)
- muted text: none: everything on photo or video is #FFFFFF
- hairline: none
- logo variant: blue gradient symbol with white wordmark (the guide's primary-on-dark variation)

## Components

- **button primary** (observed): fill #0457CB, text #FFFFFF, radius pill, height 44, padding x 22, padding 10px 22px, font size 14, weight 800, weight note Figtree 800 = Optimistic 700, face body, border 2px solid transparent, example Shop (83x44), Learn more when it is the only button (125x44), text style 14px/20px Optimistic 700 (Figtree 800), white, sentence case. tokens.css draws button classes with border 0 and line-height 1; heights and paddings here are what render. Shop and Learn more labels are 14px/20px.
- **button primary hero** (observed): fill #0457CB, text #FFFFFF, radius pill, height 52, padding x 30, padding 14px 30px, font size 14, weight 800, weight note Figtree 800 = Optimistic 700, face body, example Shop in the hero (99x52)
- **glass pill** (observed): fill css rgba(241,244,247,0.698) (#F1F4F7 at 70%), text #0A1317, radius pill, height 44, padding x 22, padding 10px 22px, font size 14, weight 800, weight note Figtree 800 = Optimistic 700, face body, border 2px solid rgba(255,255,255,0.1), backdrop filter blur(40px) saturate(3) brightness(1.2), renders as a frosted pill tinted by the photo behind it: pink-beige over the hero and the LISA and Quest photos, light gray over gray studio photos. Over a flat color it reads as #F1F4F7 at 70%., example Learn more beside Shop on a photo (125x44; 141x52 in the hero, padding 14px 30px)
  - hover (observed): fill rgba(241,244,247,0.8), transition 0.1s
- **button outline** (observed): fill none, text #445664, text opacity 0.5, radius pill, height 44, padding x 22, font size 14, weight 800, weight note Figtree 800 = Optimistic 700, face body, border 2px solid rgba(10,19,23,0.12), example Sign up in the newsletter row (98x44 desktop, full width 358x44 phone); shown in its disabled state until an email is typed. tokens.css draws this class with border 0; add the 2px rgba(10,19,23,0.12) border and 50% text opacity from this spec.
- **nav link** (observed): text #FFFFFF, text scrolled #0A1317 once the bar turns white, radius 24, padding 4px 12px, height 32, text style 14px/20px Optimistic 400 (Figtree 500), -0.14px. Each link (the four product links and Explore Meta, Support) sits in a 32px-tall pill hit area with 4px 12px padding and no fill at rest. Tracking for the Figtree stand-in: +0.35px (Optimistic's -0.14px plus the +0.035em width correction).
- **category tile** (observed): fill #F1F4F7, radius 24, size 320x130 desktop; 170x132 with radius 16 on phone, media transparent PNG product cut-out, 169x54 contain, centred, top at +20 (88x54 phone), label 16px/24px Optimistic 400 (Figtree 500) #0A1317 centred, top at +86, border none
- **product card** (observed): radius 24, fill full-bleed photo (object-fit cover), no border, no shadow, size 672x672 half width, 1376x602 full width desktop; 358x477 phone, text centred block at the bottom, white: eyebrow 18px/26px line box, title 48px/56px line box directly under it (4px gap; 32px/36px on phone), then 36px gap to the 44px button row on desktop (20px on phone); the two buttons sit 16px apart; 48px bottom padding desktop, 23px phone, buttons Shop (primary blue) + Learn more (glass), or a single blue Learn more when there is nothing to buy yet
- **feature card** (observed): fill #FFFFFF, radius 24, padding 40px, size 320x320 desktop, 273x344 phone, icon 48px filled glyph in #0457CB at top left, title 28px/34px Optimistic 300 (Figtree 400) (Figtree 400) #0A1317, two lines, first line at +120 (32px under the icon), body offset body first line at +210, body 16px/24px Optimistic 400 (Figtree 500) #0A1317
- **news card** (observed): media 672x378 photo (16:9), radius 24, no text on it, title 24px/30px Optimistic 300 (Figtree 400) #0A1317 below the image, top 36px under the image bottom
- **email input** (observed): fill #FFFFFF, border 1px solid rgba(10,19,23,0.45), radius 12, size 800x60 desktop, 358x60 phone, placeholder Email, 16px/24px #647685, inset 17px
- **pause button** (observed): size 32x32 circle, fill css rgba(43,61,70,0.68) = #2B3D46 at 68%, backdrop-filter blur(40px) saturate(3) brightness(1.2), icon 16px white pause glyph (two rounded bars, slot icon-pause), position bottom right of the hero: x 1388 y 731 desktop, x 350 y 601 phone

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| button-hover |  | 100ms | glass Learn more fill from 70% to 80% opacity | observed |
| hero-video |  |  | the hero is an autoplaying, muted video with a pause control; the headline letters are split into spans that animate in (timing not measured) | observed |
| symbol-in-motion |  |  | the Meta symbol was designed to live in motion and 3D, drawn as a single continuous line in space | published |

## Icon tokens

Grid not published (observed: 24px nav glyphs, 48px feature glyphs on a 24px viewBox), stroke filled glyphs, not strokes (observed).
| Name | Size | Use |
|---|---|---|
| nav | 24px | search, globe, bag, account, menu |
| feature | 48px | Why buy cards, #0457CB |
| social | 24px | footer, #465A69 |

## Signature moves

### The Meta symbol: one continuous loop

Where: logo, event art (the Connect key visual renders it as a 3D chrome loop).
Do: a single continuous line that reads as an M and an infinity sign, in a blue gradient (#0064E0 to #0082FB in the logo file); clear space 2x the symbol height; never below 12px/5mm tall. One symbol per composition.
Don't: use the symbol alone in brand inclusion, recolor it outside its four variations, or use the Meta logo to stand for Facebook.
Example: "Meta".

### Split condensed headline over video

Where: homepage hero.
Do: white Optimistic 700 at wdth 82, 130px, -0.05em, broken into two lines pinned to opposite corners (top-left and bottom-right) over a full-bleed video. One per page, hero only.
Don't: set the condensed cut anywhere else or wrap a desktop line.
Example: "Meet the all-new".

### Rounded photo cards with a bottom-centred pill pair

Where: every product slot on the homepage.
Do: full-bleed portrait or product photo in a 24px-radius card; eyebrow, product name and a blue Shop pill + frosted Learn more pill centred at the bottom in white. Repeat as a grid; never add borders or shadows.
Don't: put text on a solid color block instead of a photo.
Example: "Ray-Ban Meta".

### Host and guest hairline lockup

Where: co-branded partner communications.
Do: host logo left of (or above) a hairline, guest right of (or below) it; hairline 1/50 h thick, 1.5 h tall (70% of logo width when stacked), at least 0.5pt; 1x symbol width from each logo. Two partners only.
Don't: blend the two identities, scale one logo larger, or use a hairline for brand inclusion.
Example: "Together with Meta".

## Messaging: rules

Meta speaks at two altitudes. The company line is about human connection and going "beyond" (mission, brand story). The store speaks product by product: a short eyebrow and an exact product name, then Shop.

Why it works: The company line stays abstract enough to cover apps, AI and hardware; the store stays concrete enough to sell.

- Lead with the product name, set it big; the eyebrow carries the idea in under seven words
- Use the exact product name (Ray-Ban Meta, Meta Quest 3S)
- Offers are concrete: 2-day, 30-day, one-year, 0% APR

Sources: https://www.meta.com/about/company-info/, https://about.fb.com/news/2021/10/facebook-company-is-now-meta/, https://web.archive.org/web/20230130112237/https://design.facebook.com/stories/designing-our-new-company-brand-meta/, https://www.meta.com/

## Voice: rules

No company voice guide is published. On meta.com the voice is short, upbeat and plain, in sentence case, with fragments and repetition. The partnering guide gives the only written rules: sentence case credit lines from an approved list, never "Powered by", product names left undecorated.

Why it works: Short fragments leave room for the photo; strict naming keeps a family of many brands legible.

- Sentence case everywhere except article titles
- Approved credit lines only (Together with, Created with, In collaboration with, Presented by, Sponsored by, Featuring, Paid for by, Exclusively on, Streaming on, Exclusively streaming on, Technology from)
- No exclamation marks on the homepage (observed)
- Speak to "you" in service copy
- Don't say "Powered by"
- Don't add "our" or "by" to a product name
- Don't use the Meta name for Facebook

Do and don't:
- Do: "Together with Meta". An approved credit line, sentence case (published).
- Don't: "Powered by Meta". "Powered by" is not an approved credit line (published).

Sources: https://www.meta.com/brand/resources/meta/partnering-with-meta/, https://www.meta.com/brand/resources/meta/company-brand/, https://www.meta.com/

## Logo: rules

The Meta logo is the infinity-loop symbol beside the Meta wordmark. It comes in four color variations: two primary (blue gradient symbol with a dark wordmark on light, or a white wordmark on dark) and two mono (all dark, all white). The wordmark is set in the company typeface introduced in 2019.

Why it works: Drawn as one line in space, the symbol works in 2D and 3D and can read as an M or as infinity; the blue ties the new company to its original products (brand story).

|  |  |
|---|---|
| Variations | primary on light, primary on dark, mono dark, mono white |
| Minimum | symbol height 12px / 5mm |
| Clear space | 2x symbol height, all sides |
| Credit line | min 6pt; on top: gap 3h, logo 3h; inline: gap 3h, logo 2h |

- Use a primary variation whenever possible; mono only where a primary can't reproduce
- Minimum size: symbol height 12px / 5mm
- Clear space: twice the symbol height on all sides
- Co-branding: primary blue lockup preferred, white as the secondary option
- Credit lines and brand inclusion use the single-line Meta lockup
- All use of the Meta logo needs approval through a Meta counterpart (Brand Review)
- Don't use the Meta logo to represent Facebook
- Don't use the symbol alone in brand inclusion
- Don't mix a full lockup with a symbol-only partner logo
- Don't scale the logo out of proportion to the credit line

Real examples, to look at on Meta's own pages (not for reuse):
- Primary logo, dark wordmark, as meta.com serves it in the footer: https://www.meta.com/
- Primary logo on dark: white wordmark (nav over the hero): https://www.meta.com/

Sources: https://www.meta.com/brand/resources/meta/company-brand/, https://www.meta.com/brand/resources/meta/partnering-with-meta/, https://web.archive.org/web/20230130112237/https://design.facebook.com/stories/designing-our-new-company-brand-meta/, https://www.meta.com/brand/resources/meta/our-trademarks/

## Color: rules

Meta publishes no palette for the company brand. What is consistent: the blue gradient of the symbol, a single action blue on the store, near-black ink, a cool light gray surface, and the dark slate of the wordmark. Color otherwise comes from photography.

Why it works: A quiet interface lets product photos carry the color; the one blue marks every action.

- One action color: #0457CB for every primary pill and text link (observed)
- Symbol stays in its blue gradient or the mono variations (published: four variations)
- Text on photos is white; text on white and #F1F4F7 is #0A1317 (observed)
- Gray #F1F4F7 for tiles and the one tinted band (observed)
- Don't introduce a second accent color
- Don't put text on a flat brand-color block

Not published: any hex, name or proportion for the company palette.

Do and don't:
- Do: "Shop". One action blue on a full pill (observed).
- Don't: "Meet the all-new Meta Glasses". Headlines on a flat blue block: Meta puts white type on photography, not on brand color.

Sources: https://www.meta.com/brand/resources/meta/company-brand/, https://web.archive.org/web/20230130112237/https://design.facebook.com/stories/designing-our-new-company-brand-meta/, https://www.meta.com/

## Typography: rules

Meta's company typeface is Optimistic (named in the partnering guide); meta.com serves it as one variable family, "Optimistic VF", weights 200-800 with a width axis. The homepage sets everything in it, from the condensed 130px hero to 12px legal text.

Why it works: One family across UI, marketing and the wordmark keeps a large product family coherent; the width axis gives the hero a poster voice without a second face.

|  |  |
|---|---|
| Real face | Optimistic VF (proprietary) |
| Stand-in, body and headings | Figtree one weight step heavier, +0.035em tracking |
| Stand-in, hero | Archivo 700 wdth 88 |

- Headlines weight 500 in Optimistic (Figtree 600 in the stand-in), sentence case; Optimistic sets them at normal tracking, the Figtree stand-in at +0.035em (spec.type tracking_px already includes it)
- Large feature and news titles are Light 300 in Optimistic (Figtree 400)
- Buttons 14px Bold 700 in Optimistic (Figtree 800)
- Hero only: condensed cut (wdth 82) at 700 with -0.05em tracking
- Credit lines: Optimistic Regular, sentence case (published)

Not published: a type scale, licensing terms or a download for Optimistic.

Sources: https://www.meta.com/brand/resources/meta/partnering-with-meta/, https://web.archive.org/web/20230130112237/https://design.facebook.com/stories/designing-our-new-company-brand-meta/, https://www.meta.com/

## Graphic elements: rules

Three things make meta.com recognizable without the logo: the full-pill buttons (solid blue and frosted glass), 24px-radius photo cards with centred white text at the bottom, and the condensed headline split across the hero.

Why it works: Soft radii and glass read as consumer hardware; the repeated card pattern makes a long store page scannable.

- All buttons are pills
- All cards and images 24px radius, no border, no shadow
- Glass Learn more only over photos

Sources: https://www.meta.com/

## Iconography: rules

Filled, rounded glyphs on a 24px viewBox: nav icons in white or ink, Why-buy icons at 48px in #0457CB, social icons in #465A69. No published icon guidance for the company brand.

Why it works: Filled shapes stay legible over video and at small sizes.

- 24px in navigation, 48px as feature icons
- One color per icon, matching its text role

Not published: icon grid, stroke or library.

Sources: https://www.meta.com/

## Illustration: rules

The homepage uses no illustration; imagery is photographic or 3D renders (the Connect key visual renders the symbol as a 3D chrome loop).

Why it works: The brand story wants the symbol to take on any texture in 3D; photography sells the hardware.

- Prefer photography and 3D renders of the symbol over flat illustration

Not published: an illustration style.

Sources: https://www.meta.com/, https://web.archive.org/web/20230130112237/https://design.facebook.com/stories/designing-our-new-company-brand-meta/

## Photography: rules

Editorial fashion portraits: one or two people wearing the product, close crops, studio or warm interior light, direct gaze or candid motion. Product-in-hand shots for devices. Approved company imagery lives in the Newsroom Media Gallery.

Why it works: Products shown on faces read as eyewear and style, not gadgets.

- People first, product on the face or in the hand
- Fill the card edge to edge; text sits over the lower third
- Use approved imagery from the Newsroom Media Gallery for offices and executives (published)

Sources: https://www.meta.com/, https://www.meta.com/brand/resources/meta/company-brand/

## Motion: rules

The symbol was designed for motion and 3D (published). On the homepage the hero is an autoplaying video with a pause control and per-letter headline animation; buttons fade over 100ms.

Why it works: A symbol drawn in space is meant to be seen moving.

- Always offer a pause control on autoplaying video
- Keep hover changes small and fast (100ms)

Not published: durations, easing curves.

Sources: https://web.archive.org/web/20230130112237/https://design.facebook.com/stories/designing-our-new-company-brand-meta/, https://www.meta.com/

## Interface and layout: rules

Edge-to-edge with 32px margins at 1440 (16px on phone), a 32px gap between every card and tile, 24px corners, and centred section titles. Sections alternate photo-card runs with one light-gray band.

Why it works: Wide cards and tight gaps make the page a wall of product photos.

- 32px page margin and gaps on desktop, 16px on phone
- Section titles centred, 48px
- Phone: tiles and feature cards scroll sideways in one row

Sources: https://www.meta.com/

## Rules: rules

Meta's published rules are about the logo and partnerships.

- Primary logo variation whenever possible
- Symbol at least 12px / 5mm tall
- Clear space 2x the symbol height
- Establish a clear host and guest in partner work
- Two partners at most in co-branding, scaled equally
- Credit lines from the approved list, in sentence case, at least 6pt
- Only one Meta technology when a partner is host
- Every use of the Meta logo goes through Brand Review
- Don't blend Meta's colors and type into a partner's identity
- Don't say "Powered by"
- Don't use a hairline in brand inclusion
- Don't use the Meta logo for Facebook

Sources: https://www.meta.com/brand/resources/meta/company-brand/, https://www.meta.com/brand/resources/meta/partnering-with-meta/

## Campaigns

### Facebook becomes Meta (2021)

At Connect 2021 the company took the name Meta, with a new symbol and wordmark built by brand and product teams together.

How the system shows: The symbol was drawn as a single line in space using Quest and designed to live in motion and 3D; the wordmark kept the 2019 company typeface.
Why it works: One loop can be an M, an infinity sign or a 3D object, so the mark carries the "beyond the screen" idea.
Channels: Connect keynote, newsroom, identity. Source: https://about.fb.com/news/2021/10/facebook-company-is-now-meta/

## Applications

| Format | What | Source |
|---|---|---|
| co-branding lockup | Host logo, hairline, guest logo; Meta lockup in primary blue or white. | https://www.meta.com/brand/resources/meta/partnering-with-meta/ |
| credit line | "Together with" + single-line Meta lockup, line on top or inline. | https://www.meta.com/brand/resources/meta/partnering-with-meta/ |
| brand inclusion | Meta lockup in a row of sponsor logos, 1.5h apart, full color on white or white on dark. | https://www.meta.com/brand/resources/meta/partnering-with-meta/ |

## By format

How our engine applies Meta's system to each format. Our recipe from their rules and site, not something Meta publishes. Level = how loud the signature moves are (0 plain, 5 full video hero and photo-card wall). Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 4 | Build it the way meta.com is built (kit.spec.page): transparent nav over a full-bleed video or photo hero with the split condensed headline; 24px-radius photo cards with bottom-centred eyebrow, title and Shop/Learn more pills; one #F1F4F7 band of white feature cards; white footer with three link columns. One action blue #0457CB; Optimistic (Figtree stand-in) throughout; sentence case. | number of product cards (full-width or half-width), the hero line, which offers go in the feature band |
| Partner co-branding | 1 | host left of the hairline, guest right; Meta lockup primary blue (or white); clear space 2x symbol height | host brand's own layout and type |
| Event or sponsor credit | 1 | approved credit line in sentence case, single-line Meta lockup, ratio 3h / 3h | credit line wording from the approved list |
| Social post | 3 | a full-bleed people-first photo, white sentence-case line, Meta logo in its primary variation | crop and product |

## Checks before anything ships

- **Logo hidden**: Cover the logo. It should still read as Meta: people-first photos in 24px-rounded cards, a blue pill beside a frosted pill, white sentence-case lines, gray-white surfaces.
- **Swap test**: Put another consumer-tech logo on it. If nothing about the loop, the single blue or the partner discipline feels out of place, it is generic.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Meta's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- Color palette, hex values and proportions for the company brand: not published (all hex observed on meta.com or read from the logo file, 2026-10-31).
- Type scale, weights and licence for Optimistic: not published.
- Voice and tone guidance for the company brand: not published.
- Motion durations and easing: not published.
- Icon, illustration and photography guidance: not published (Newsroom Media Gallery is named for approved imagery).
- "Empathetic Color" (a logo-pack option on the trademarks page): not defined publicly.
- Exact hex of each of the four logo color variations: not published (the dark wordmark #1C2B33 and gradient stops are read from the logo file).

Logos and reference images belong to Meta. Look at them on Meta's own pages; don't reuse them.