Human connection
Technology built around people and their relationships; the mission is the future of human connection. Published
The system
Fixed, everywhere
- 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.
How loud each format gets
Silent
QuietPartner co-brandingEvent or sponsor credit
Calm
WarmSocial post
LoudLanding page
Loudest
Our engine's setting, built from their rules.
Every piece passes two checks
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.
Strategy
A social technology company building the future of human connection and the technology that makes it possible. Published
Beyond the screen
Moving past 2D screens toward AI glasses and mixed reality. Published
AI you wear
AI built into everyday products: glasses with Meta AI, a personal AI agent device. Observed
Buy with confidence
Store promises on delivery, returns, warranty and financing. Observed
Meet the all-new Meta Glasses
The weight is over
Athletic Intelligence is here
We're building the future of human connection
Full spec
- For Published
- Billions of people who use its apps, plus creators, developers, businesses and partners
- Problem Published
- Connection limited by screens, distance and physics (paraphrase of the brand story).
- Promise Published
- Go beyond what digital connection makes possible today.
- Mission Published
- Build the future of human connection and the technology that makes it possible
Proof behind each pillar
- Human connection. Family of apps: Facebook, Messenger, Instagram, WhatsApp (and Threads).
- Beyond the screen. AI glasses range: Meta Glasses, Ray-Ban Meta, Ray-Ban Meta Audio, Oakley Meta, Meta Ray-Ban Display.
- Beyond the screen. Meta Quest 3S mixed reality headset and Meta VR Glasses.
- AI you wear. AI glasses range: Meta Glasses, Ray-Ban Meta, Ray-Ban Meta Audio, Oakley Meta, Meta Ray-Ban Display.
- Buy with confidence. Free 2-day delivery on Meta Glasses, Meta Quest, Ray-Ban Meta and Oakley Meta.
- Buy with confidence. Free 30-day returns with no shipping fees.
- Buy with confidence. One-year warranty included.
Story Published
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".
Values
Give people a voice
First of Meta's five principles
PublishedBuild connection and community
Second principle
PublishedServe everyone
Third principle
PublishedKeep people safe and protect privacy
Fourth principle
PublishedPromote economic opportunity
Fifth principle
PublishedCategory. Social technology: apps, AI, AI glasses and mixed reality Published
Why them
- A family of apps used by billions (Facebook, Messenger, Instagram, WhatsApp). Published
- Own hardware for wearing and entering computing: AI glasses with eyewear brands and Meta Quest. Observed
- Meta AI built into the products. Observed
Instead of
2D screens and today's online experiences (the brand story frames these as the limit to move beyond).
Boilerplate Published
Meta builds technologies that help people connect, find communities, and grow businesses.
Taglines
We're building the future of human connection Observed
Meet the all-new Meta Glasses Observed
Iconic style meets Meta AI Observed
They never claim
- Never imply a partnership, endorsement or "powered by" relationship without an approved execution. Published
- Never present more than one Meta technology when a partner is host. Published
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.
Source: meta.com/about/company-infoabout.fb.com/news/2021/10/facebook-company-is-now-metaweb.archive.org/web/20230130112237/https://design.facebook.com/stories/designing-our-new-company-brand-metameta.com
Personality and voice
Optimisticbut not naiveOur reading
Humanbut not technicalOur reading
Confidentbut not loudOur reading
Disciplinedbut not rigidOur reading
Together with Meta
Powered by Meta
Short fragments leave room for the photo; strict naming keeps a family of many brands legible.
Full spec
- Sentence case headlines
- Credit lines are written in sentence case
- Never: Powered by. Say "Together with", "Created with", "Presented by" or "Technology from"
- 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
OptimisticPlainConfidentWarm
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.
- 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
- 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).
Their words
AI glassesmixed realityhuman connection
Never
Powered by
- Don’t say "Powered by"
- Don’t add "our" or "by" to a product name
- Don’t use the Meta name for Facebook
Source: meta.com/brand/resources/meta/partnering-with-metameta.com/brand/resources/meta/company-brandmeta.com
Logo
Files as meta.com serves them (2026-10-31). Official packs (default, with and without "Empathetic Color") download from the trademarks page after accepting Meta's terms.
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).
Full spec
- 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
| 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 |
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.
Source: meta.com/brand/resources/meta/company-brandmeta.com/brand/resources/meta/partnering-with-metaweb.archive.org/web/20230130112237/https://design.facebook.com/stories/designing-our-new-company-brand-metameta.com/brand/resources/meta/our-trademarks
Color
Shop
Meet the all-new Meta Glasses
A quiet interface lets product photos carry the color; the one blue marks every action.
Full spec
- 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
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.
Not published: any hex, name or proportion for the company palette.
Source: meta.com/brand/resources/meta/company-brandweb.archive.org/web/20230130112237/https://design.facebook.com/stories/designing-our-new-company-brand-metameta.com
Typography
We're building the future of human connection
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.
Full spec
| Their face | Use | License | Open stand-in |
|---|---|---|---|
| Optimistic VF (condensed, wdth 82) | Hero headline only | Meta's proprietary company typeface; no public licence or download (not published) | Archivo Archivo has a width axis; at wdth 88 and 700 it sets the hero line within 0.4% of Optimistic's width. |
| Optimistic VF | Everything else: headlines 500, titles 300, body 400, buttons 700 | Meta's proprietary company typeface (not published) | Figtree Same x-height and cap height and the same ink weight; about 7% narrower, so add +0.035em tracking. |
| Optimistic Mono VF | loaded by meta.com, not used on the homepage | proprietary (not published) | JetBrains Mono |
- 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)
| 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 |
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.
Not published: a type scale, licensing terms or a download for Optimistic.
Source: meta.com/brand/resources/meta/partnering-with-metaweb.archive.org/web/20230130112237/https://design.facebook.com/stories/designing-our-new-company-brand-metameta.com
Graphic elements
Meta
The Meta symbol: one continuous loop · logo, event art (the Connect key visual renders it as a 3D chrome loop)
Meet the all-new
Split condensed headline over video · homepage hero
Ray-Ban Meta
Rounded photo cards with a bottom-centred pill pair · every product slot on the homepage
Together with Meta
Host and guest hairline lockup · co-branded partner communications
Specimens use sample copy, not Meta’s.
Soft radii and glass read as consumer hardware; the repeated card pattern makes a long store page scannable.
Full spec
- All buttons are pills
- All cards and images 24px radius, no border, no shadow
- Glass Learn more only over photos
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.
Source: meta.com
Iconography
Filled shapes stay legible over video and at small sizes.
Full spec
- 24px in navigation, 48px as feature icons
- One color per icon, matching its text role
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.
Not published: icon grid, stroke or library.
Source: meta.com
Illustration
The brand story wants the symbol to take on any texture in 3D; photography sells the hardware.
Full spec
- Prefer photography and 3D renders of the symbol over flat illustration
The homepage uses no illustration; imagery is photographic or 3D renders (the Connect key visual renders the symbol as a 3D chrome loop).
Not published: an illustration style.
Source: meta.comweb.archive.org/web/20230130112237/https://design.facebook.com/stories/designing-our-new-company-brand-meta
Photography
Products shown on faces read as eyewear and style, not gadgets.
Full spec
- 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)
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.
Motion
A symbol drawn in space is meant to be seen moving.
Full spec
- Always offer a pause control on autoplaying video
- Keep hover changes small and fast (100ms)
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.
Not published: durations, easing curves.
Source: web.archive.org/web/20230130112237/https://design.facebook.com/stories/designing-our-new-company-brand-metameta.com
Interface & layout
The page, band by band
Navigation
Hero video
Store intro and category tiles
LISA card
Product grid
Quest 3S card
Why buy from Meta
The latest from Meta
Buttons
Full spec
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.
Measured from meta.com's measured with Playwright at 1440x900 and 390x844 from computed styles and bounding boxes, plus rendered font calibration.
Spacing
| Measure | Desktop | Phone |
|---|---|---|
| Page margin | 32px | 16px |
| Section padding | 80px | 48px |
| Card gap | 32px | 32px |
| Navigation | 64px | 64px |
Type, at size
Hero headline (condensed)
Optimistic VF (condensed, wdth 82) · 130px (phone 66) · line 1 · tracking -6.5px · weight 700
Product card title / section title
Optimistic VF · 48px (phone 32) · line 1.1667 · tracking 1.7px · weight 600
Store intro H1
Optimistic VF · 36px (phone 28) · line 1.278 · tracking 1px · weight 600
Why-buy card title
Optimistic VF · 28px (phone 24) · line 1.214 · tracking 1px · weight 400
Hero lead
Optimistic VF · 24px (phone 20) · line 1.25 · tracking 0.85px · weight 600
News card title
Optimistic VF · 24px (phone 20) · line 1.25 · tracking 0.85px · weight 400
Card eyebrow / newsletter label
Optimistic VF · 18px · line 1.444 · tracking 0.6px · weight 500
Body / tile label
Optimistic VF · 16px · line 1.5 · tracking 0.3px · weight 500
Nav and footer link
Optimistic VF · 14px · line 1.4286 · tracking 0.35px · weight 500
Button label
Optimistic VF · 14px · line 1.4286 · tracking 0.4px · weight 800
Legal and consent text
Optimistic VF · 12px · line 1.333 · tracking 0.35px · weight 500
- Motion
- video-led hero, 100ms hover fades
- Buttons
- pill
Page anatomy
How Meta’s own landing pages are built, observed on meta.com, 2026-10-31. The full measurements are in spec.md.
- Navigation
- 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.
- Hero
- 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.
- Store intro and category tiles
- A centred H1 on white, then four light-gray rounded tiles, each a product cut-out over a label.
- Full-width product card: Meta Glasses by LISA
- A 1376x602 rounded photo card with a centred white text block at the bottom.
- Product card grid (2 x 3)
- Six square rounded photo cards in two columns, each with the same bottom-centred eyebrow, product name and pill buttons.
- Full-width product card: Meta Quest 3S
- A second 1376x602 rounded photo card closing the product run.
- Why buy from Meta
- A full-width #F1F4F7 band with a centred 48px title and four white rounded cards: icon, light two-line title, short body.
- The latest from Meta
- White band: centred 48px title, then two 16:9 rounded news images with a light 24px title under each.
- Newsletter sign-up
- A quiet white row: gray label at left, a wide outlined email field, an outlined pill Sign up button, three lines of consent text.
- Footer
- 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.
Source: meta.com
In use
Facebook becomes Meta · 2021
One loop can be an M, an infinity sign or a 3D object, so the mark carries the "beyond the screen" idea. Our reading
Full spec
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).
- Facebook becomes Meta. At Connect 2021 the company took the name Meta, with a new symbol and wordmark built by brand and product teams together. about.fb.com/news/2021/10/facebook-company-is-now-meta
| Format | What they did | Source |
|---|---|---|
| co-branding lockup | Host logo, hairline, guest logo; Meta lockup in primary blue or white. | meta.com/brand/resources/meta/partnering-with-meta |
| credit line | "Together with" + single-line Meta lockup, line on top or inline. | 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. | meta.com/brand/resources/meta/partnering-with-meta |
Our setting for each format
| Format | Loudness | Must appear | What varies |
|---|---|---|---|
| Landing page | 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 | 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 | approved credit line in sentence case, single-line Meta lockup, ratio 3h / 3h | credit line wording from the approved list | |
| Social post | a full-bleed people-first photo, white sentence-case line, Meta logo in its primary variation | crop and product |
Ads
Rules
Do
- 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
- say "Powered by"
- use a hairline in brand inclusion
- use the Meta logo for Facebook
Source: meta.com/brand/resources/meta/company-brandmeta.com/brand/resources/meta/partnering-with-meta
Steal this kit
Your name and logo, Meta’s system.
Comes with you
- Color roles and how much of each
- Type pairing, with open fonts
- Voice rules the writing check enforces
- Icon, photo, illustration and motion recipes
- The strategy frame, to fill with yours
Stays yours
- Your name and logo
- Your proof: numbers, customers, quotes
- Your purpose and claims. Theirs aren’t yours to make
Use this kit for my brand Use this brand in Claude
Hand it to a developer
- spec.mdEvery value and rule
- tokens.cssCSS variables
- tokens.jsonDesign tokens (DTCG)
- kit.jsonWhat our engines read
Your brand next
Get your brand audit Put your brand in Claude What goes in a brand book
What Meta doesn’t publish
- 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).
Each value is marked published, observed, our reading or our recipe, with its source. Checked 2026-10-31. Not affiliated with Meta.