{ "schema": "brand-kit@2", "palette": { "paper": "#FFFFFF", "surface": "#F1F4F7", "ink": "#0A1317", "ink_muted": "#5D6C7B", "accent": "#0457CB", "on_accent": "#FFFFFF", "accent_secondary": "#0082FB", "night": "#1C2B33", "on_night": "#FFFFFF", "extras": [ { "name": "Meta Blue (CTA)", "hex": "#0457CB", "role": "Primary action fill (Shop / Learn more pills), legal link color, feature icons", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, { "name": "Meta symbol blue (light end)", "hex": "#0082FB", "role": "Light end of the Meta symbol gradient; flat fill on parts of the symbol", "prov": "observed", "source": "Meta logo SVG served on https://www.meta.com/ (2026-10-31)", "note": "The guide says the symbol takes a blue gradient (published, design story); the hex values are read from the logo file, not published as swatches." }, { "name": "Meta symbol blue (deep end)", "hex": "#0064E0", "role": "Deep end of the Meta symbol gradient (stops run #0064E0 to #0082FB)", "prov": "observed", "source": "Meta logo SVG served on https://www.meta.com/ (2026-10-31)" }, { "name": "Wordmark ink", "hex": "#1C2B33", "role": "Meta wordmark on light grounds; dark ground of the guide's logo tiles; text on the brand resource pages", "prov": "observed", "source": "https://www.meta.com/brand/resources/meta/company-brand/ (2026-10-31) and the logo SVG" }, { "name": "Text ink", "hex": "#0A1317", "role": "Headlines and body text on white and #F1F4F7; dark text on the glass Learn more button; hero ground before the video paints", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, { "name": "Muted ink", "hex": "#5D6C7B", "role": "Footer links, newsletter label and legal text", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, { "name": "Gray surface", "hex": "#F1F4F7", "role": "Category tiles, the Why buy band, the guide's light logo tiles; base of the glass Learn more button at 70% alpha", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, { "name": "Locale ink", "hex": "#1C1E21", "role": "\"United States (English)\" locale link in the footer; phone footer chevrons", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, { "name": "Social icon gray", "hex": "#465A69", "role": "Footer social icons (Facebook, Threads, Instagram, X, YouTube)", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, { "name": "Placeholder gray", "hex": "#647685", "role": "Email input placeholder", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, { "name": "Disabled ink", "hex": "#445664", "role": "Sign up button text at 50% opacity before an email is entered", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, { "name": "Footer hairline", "hex": "#E1E2E3", "role": "1px rule above the footer (rendered color)", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, { "name": "Glass slate", "hex": "#2B3D46", "role": "Hero pause button: #2B3D46 at 68% with the glass backdrop blur", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, { "name": "White", "hex": "#FFFFFF", "role": "Page ground, feature cards, all text on photos and the hero video", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" } ], "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)", "note": "Meta publishes no color palette or hex values for the company brand. Every hex here is observed on meta.com or read from the official logo file (2026-10-31)." }, "typography": { "display": { "family": "Archivo", "weight": 700, "width_axis": 88, "width_axis_line2": 84, "tracking": -0.05, "line_height": 1, "fallback_stack": "\"Arial Narrow\", Arial, sans-serif", "real": "Optimistic VF (Meta's company typeface, variable), set at wdth 82 weight 700 for the hero headline only", "stand_in": true, "use": "Hero headline only (the condensed cut). Every other headline is the body family at weight 500.", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, "body": { "family": "Figtree", "weight": 500, "weight_rule": "Figtree one weight step heavier than Optimistic everywhere: Optimistic 300 -> Figtree 400, 400 -> 500, 500 -> 600, 700 -> 800. Measured ink density: Optimistic 500 at 48px 0.261 vs Figtree 600 with +0.035em 0.269 (Figtree 500: 0.240); Optimistic 300 at 24px 0.197 vs Figtree 400 0.204 (Figtree 300: 0.167). The spec.type weights are already the Figtree weights.", "tracking": 0.035, "tracking_note": "Figtree only: +0.035em on top of Optimistic's own tracking (see spec.type tracking_px, which already include it). Optimistic itself is set at normal tracking, or -0.01em at 14 and 16px.", "line_height": 1.5, "scale": 1, "fallback_stack": "Arial, sans-serif", "real": "Optimistic VF (one variable family, weights 200-800, for headings, body, buttons and nav)", "stand_in": true, "published_name": "Optimistic (the partnering guide names \"Optimistic Regular, sentence case\" for credit lines when Meta is host)", "prov": "published", "source": "https://www.meta.com/brand/resources/meta/partnering-with-meta/", "site": { "weights": "300 feature and news titles, 400 body and links, 500 headlines and hero lead, 700 buttons and footer column heads", "sizes_px": "130 hero (condensed), 48, 36, 28, 24, 18, 16, 14, 12", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" } }, "mono": { "family": "JetBrains Mono", "weight": 400, "fallback_stack": "Menlo, monospace", "real": "Optimistic Mono VF (loaded by meta.com, not used on the homepage)", "stand_in": true, "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, "calibration": "Calibrated 2026-10-31 by rendering the same lines in Optimistic VF (the woff2 meta.com serves) and in candidates. Body/headings: Figtree matches x-height (0.500 vs 0.502 em) and cap height (0.700 vs 0.700) exactly and ink darkness at 300/400/500 (9/11/12 vs 10/11/12), but sets about 7% narrower (\"Meta Glasses by LISA\" 48px/500: 465px vs 500px; the 36px store line 924 vs 977; 16px body 383 vs 406), so every Figtree row carries extra tracking of about +0.035em to restore line width, and is set one weight step heavier to restore ink density (see weight_rule). With both, \"Ray-Ban Meta Audio\" 48px: Optimistic 500 477px, Figtree 600 +0.035em 477px. Golos Text and Inter match width but have taller x-heights (0.530, 0.546). Hero: Optimistic VF 700 at wdth 82 with -6.5px tracking sets \"Meet the all-new\" 810px wide at 130px; Archivo 700 at wdth 88 with the same tracking sets 807px (wdth 85: 783, wdth 89: 815). The second line \"Meta Glasses\" is 648px in Optimistic; Archivo at wdth 88 sets it 681px, at wdth 84 653px, so set line 2 at wdth 84 (Optimistic's G, l and s are narrower relative to its M and w). Per-line width settings are part of this calibration, not a deviation." }, "style": { "button_shape": "pill", "button_note": "Every button is a full pill (border-radius 100px): blue fill, frosted glass, or a 2px outline.", "corners": "24px on cards, tiles and images; 12px on inputs; pills on buttons", "linework": "none: no borders or shadows on cards", "motion": "video-led hero, 100ms hover fades", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, "voice": { "tone": [ "Optimistic", "Plain", "Confident", "Warm" ], "notes": [ "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": [ { "id": "headline-case", "kind": "headline_case", "value": "sentence", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, { "id": "credit-line-case", "kind": "guidance", "text": "Credit lines are written in sentence case", "prov": "published", "source": "https://www.meta.com/brand/resources/meta/partnering-with-meta/" }, { "id": "no-powered-by", "kind": "avoid", "terms": [ "Powered by" ], "instead": "\"Together with\", \"Created with\", \"Presented by\" or \"Technology from\"", "prov": "published", "source": "https://www.meta.com/brand/resources/meta/partnering-with-meta/" }, { "id": "no-our-by", "kind": "guidance", "text": "Never add \"our\", \"by\" or extra descriptors to a Meta product name", "prov": "published", "source": "https://www.meta.com/brand/resources/meta/partnering-with-meta/" }, { "id": "integration-names", "kind": "guidance", "text": "Name integrations \"[Meta technology] for [partner]\" or \"[Partner] for/with [Meta technology]\"", "prov": "published", "source": "https://www.meta.com/brand/resources/meta/partnering-with-meta/" }, { "id": "meta-not-facebook", "kind": "guidance", "text": "Never use the Meta logo or name to represent Facebook", "prov": "published", "source": "https://www.meta.com/brand/resources/meta/company-brand/" }, { "id": "exclamations", "kind": "exclamations", "value": "never", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, { "id": "spelling", "kind": "spelling", "value": "en-US", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, { "id": "person", "kind": "person", "value": "we_you", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, { "id": "short", "kind": "max_sentence_words", "value": 14, "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" } ], "approved": { "phrases": [ "Together with", "Created with", "In collaboration with", "Presented by", "Sponsored by", "Featuring", "Paid for by", "Exclusively on", "Streaming on", "Exclusively streaming on", "Technology from" ], "words": [ "AI glasses", "mixed reality", "human connection" ] }, "banned": [ "Powered by" ], "prov": "published", "source": "https://www.meta.com/brand/resources/meta/partnering-with-meta/" }, "spec": { "source": "https://www.meta.com/", "how": "measured with Playwright at 1440x900 and 390x844 from computed styles and bounding boxes, plus rendered font calibration", "provenance": "observed", "motion": [ { "name": "button-hover", "duration_ms": 100, "use": "glass Learn more fill from 70% to 80% opacity", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, { "name": "hero-video", "use": "the hero is an autoplaying, muted video with a pause control; the headline letters are split into spans that animate in (timing not measured)", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, { "name": "symbol-in-motion", "use": "the Meta symbol was designed to live in motion and 3D, drawn as a single continuous line in space", "prov": "published", "source": "https://web.archive.org/web/20230130112237/https://design.facebook.com/stories/designing-our-new-company-brand-meta/" } ], "icons": { "grid": "not published (observed: 24px nav glyphs, 48px feature glyphs on a 24px viewBox)", "stroke": "filled glyphs, not strokes", "sizes": [ { "name": "nav", "px": 24, "use": "search, globe, bag, account, menu" }, { "name": "feature", "px": 48, "use": "Why buy cards, #0457CB" }, { "name": "social", "px": 24, "use": "footer, #465A69" } ], "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, "signature": [ { "id": "infinity-symbol", "name": "The Meta symbol: one continuous loop", "where": "logo, event art (the Connect key visual renders it as a 3D chrome loop)", "spec": "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", "once": "one symbol per composition", "dont": "use the symbol alone in brand inclusion, recolor it outside its four variations, or use the Meta logo to stand for Facebook", "example": { "ground": "paper", "text": "Meta" }, "prov": "published", "source": "https://www.meta.com/brand/resources/meta/company-brand/" }, { "id": "split-condensed-headline", "name": "Split condensed headline over video", "where": "homepage hero", "spec": "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", "once": "one per page, hero only", "dont": "set the condensed cut anywhere else or wrap a desktop line", "example": { "ground": "photo-dark", "text": "Meet the all-new" }, "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, { "id": "rounded-photo-cards", "name": "Rounded photo cards with a bottom-centred pill pair", "where": "every product slot on the homepage", "spec": "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", "once": "repeat as a grid; never add borders or shadows", "dont": "put text on a solid color block instead of a photo", "example": { "ground": "photo-dark", "text": "Ray-Ban Meta" }, "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, { "id": "host-guest-hairline", "name": "Host and guest hairline lockup", "where": "co-branded partner communications", "spec": "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", "once": "two partners only", "dont": "blend the two identities, scale one logo larger, or use a hairline for brand inclusion", "example": { "ground": "paper", "text": "Together with Meta" }, "prov": "published", "source": "https://www.meta.com/brand/resources/meta/partnering-with-meta/" } ], "page": { "source": "https://www.meta.com/", "date": "2026-10-31", "prov": "observed", "voices": "Two voices. The brand guide (logo and partnership rules) is quiet and institutional: the Meta logo on white, #F1F4F7 or #1C2B33, one blue, sentence case. The homepage is the Meta Store: a full-bleed lifestyle video with a giant condensed headline, then rounded photo cards of people wearing the products, each with a two-word eyebrow, a product name and pill buttons. A landing page follows the homepage voice (this anatomy); logo, partner and naming rules from the guide apply everywhere.", "nav": { "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\"" ] }, "sections": [ { "name": "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" ] }, { "name": "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" ] }, { "name": "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" ] }, { "name": "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" ] }, { "name": "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" ] }, { "name": "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" ] }, { "name": "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." }, "dark_ground": { "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)" }, "weights_note": "Every weight in this anatomy is written as \"Optimistic NNN (Figtree NNN)\": use the Figtree number with the stand-in." }, "bands": [ { "label": "Navigation", "ground": "photo-dark", "content": "logo, 4 product links, Explore Meta, Support, search, globe + US, bag, account", "desktop": "1440x64, overlays the hero", "phone": "390x56: hamburger, logo, search, bag, account", "anatomy": [ "Frosted white rgba(255,255,255,0.8) + blur(20px) after scroll" ] }, { "label": "Hero video", "ground": "photo-dark", "content": "split condensed headline, lead, Shop + Learn more, pause", "desktop": "1440x783 at y 0", "phone": "390x641", "anatomy": [ "Headline line 1 top-left, line 2 bottom-right at 130px", "Poster image at rest" ] }, { "label": "Store intro and category tiles", "ground": "#FFFFFF", "content": "centred 36px H1 + 4 tiles", "desktop": "H1 y 879, tiles y 965 (320x130)", "phone": "H1 3 lines, tiles scroll sideways (170x132)", "anatomy": [ "Tiles #F1F4F7, radius 24" ] }, { "label": "LISA card", "ground": "photo-dark", "content": "eyebrow, title, Shop + Learn more", "desktop": "1376x602 at y 1127", "phone": "358x477", "anatomy": [ "Radius 24, text bottom-centred" ] }, { "label": "Product grid", "ground": "photo-dark", "content": "6 cards, 2 columns", "desktop": "672x672 cards, rows y 1761 / 2465 / 3169", "phone": "358x477 stacked", "anatomy": [ "32px gaps desktop, 16px phone" ] }, { "label": "Quest 3S card", "ground": "photo-dark", "content": "eyebrow, title, Shop + Learn more", "desktop": "1376x602 at y 3873", "phone": "358x477", "anatomy": [ "Same block as the LISA card" ] }, { "label": "Why buy from Meta", "ground": "#F1F4F7", "content": "title + 4 white feature cards", "desktop": "1440x600 at y 4555", "phone": "390x500, cards scroll sideways", "anatomy": [ "Cards 320x320 white radius 24 padding 40" ] }, { "label": "The latest from Meta", "ground": "#FFFFFF", "content": "title + 2 news cards", "desktop": "y 5155-5879, images 672x378", "phone": "stacked 358x201", "anatomy": [ "Titles below images, 24px 300" ] }, { "label": "Newsletter", "ground": "#FFFFFF", "content": "label, email field, Sign up, consent", "desktop": "row at y 5959", "phone": "stacked full width", "anatomy": [ "Outlined field radius 12, outline pill button" ] }, { "label": "Footer", "ground": "#FFFFFF", "content": "logo, social, 3 link columns, locale, legal", "desktop": "rule y 6243 to page end 7504", "phone": "accordions", "anatomy": [ "Columns at x 501 / 814 / 1127" ] } ], "layout": { "page_margin": { "desktop": 32, "phone": 16 }, "section_padding": { "desktop": 80, "phone": 48 }, "container_max": 1376, "columns": 4, "columns_phone": 1, "gutter": 32, "gutter_phone": 16, "card_gap": 32, "nav_height": 64, "note": "Edge-to-edge container: 32px margins at 1440 (1376 content), 16px at 390. Cards and tiles share the 32px gap. Rounded corners are 24px on every card and tile (16px on phone tiles); buttons are pills.", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, "type": [ { "site_weight": 700, "weight_note": "", "role": "Hero headline (condensed)", "id": "hero-display", "face": "display", "size": { "desktop": 130, "phone": 66 }, "line_height": 1, "line_height_phone": 1, "weight": 700, "tracking_px": -6.5, "tracking_phone_px": -3.3, "site_tracking": "-6.5px desktop / -3.3px phone (-0.05em) on Optimistic VF wdth 82", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)", "width_axis": 88, "width_axis_note": "Archivo wdth 88 for line 1 and the phone block; wdth 84 for desktop line 2 \"Meta Glasses\" (calibrated). Optimistic's own value is 82.", "case": "sentence case, white" }, { "site_weight": 500, "weight_note": "Figtree 600 stands in for Optimistic 500 (one step heavier, calibrated by ink density)", "role": "Product card title / section title", "id": "card-title", "face": "body", "size": { "desktop": 48, "phone": 32 }, "line_height": 1.1667, "line_height_phone": 1.125, "weight": 600, "tracking_px": 1.7, "tracking_phone_px": 1.1, "site_tracking": "normal", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, { "site_weight": 500, "weight_note": "Figtree 600 stands in for Optimistic 500 (one step heavier, calibrated by ink density)", "role": "Store intro H1", "id": "store-title", "face": "body", "size": { "desktop": 36, "phone": 28 }, "line_height": 1.278, "line_height_phone": 1.214, "weight": 600, "tracking_px": 1, "tracking_phone_px": 1, "site_tracking": "normal", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, { "site_weight": 300, "weight_note": "Figtree 400 stands in for Optimistic 300 (one step heavier, calibrated by ink density)", "role": "Why-buy card title", "id": "feature-title", "face": "body", "size": { "desktop": 28, "phone": 24 }, "line_height": 1.214, "line_height_phone": 1.417, "weight": 400, "tracking_px": 1, "tracking_phone_px": 0.85, "site_tracking": "normal", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, { "site_weight": 500, "weight_note": "Figtree 600 stands in for Optimistic 500 (one step heavier, calibrated by ink density)", "role": "Hero lead", "id": "hero-lead", "face": "body", "size": { "desktop": 24, "phone": 20 }, "line_height": 1.25, "line_height_phone": 1.4, "weight": 600, "tracking_px": 0.85, "tracking_phone_px": 0.7, "site_tracking": "normal", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, { "site_weight": 300, "weight_note": "Figtree 400 stands in for Optimistic 300 (one step heavier, calibrated by ink density)", "role": "News card title", "id": "news-title", "face": "body", "size": { "desktop": 24, "phone": 20 }, "line_height": 1.25, "line_height_phone": 1.4, "weight": 400, "tracking_px": 0.85, "tracking_phone_px": 0.7, "site_tracking": "normal", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, { "site_weight": 400, "weight_note": "Figtree 500 stands in for Optimistic 400 (one step heavier, calibrated by ink density)", "role": "Card eyebrow / newsletter label", "id": "eyebrow", "face": "body", "size": { "desktop": 18, "phone": 18 }, "line_height": 1.444, "line_height_phone": 1.444, "weight": 500, "tracking_px": 0.6, "tracking_phone_px": 0.6, "site_tracking": "normal", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, { "site_weight": 400, "weight_note": "Figtree 500 stands in for Optimistic 400 (one step heavier, calibrated by ink density)", "role": "Body / tile label", "id": "body", "face": "body", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.5, "line_height_phone": 1.5, "weight": 500, "tracking_px": 0.3, "tracking_phone_px": 0.3, "site_tracking": "-0.16px", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, { "site_weight": 400, "weight_note": "Figtree 500 stands in for Optimistic 400 (one step heavier, calibrated by ink density)", "role": "Nav and footer link", "id": "link", "face": "body", "size": { "desktop": 14, "phone": 14 }, "line_height": 1.4286, "line_height_phone": 1.4286, "weight": 500, "tracking_px": 0.35, "tracking_phone_px": 0.35, "site_tracking": "-0.14px", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, { "site_weight": 700, "weight_note": "Figtree 800 stands in for Optimistic 700 (one step heavier, calibrated by ink density)", "role": "Button label", "id": "button", "face": "body", "size": { "desktop": 14, "phone": 14 }, "line_height": 1.4286, "line_height_phone": 1.4286, "weight": 800, "tracking_px": 0.4, "tracking_phone_px": 0.4, "site_tracking": "normal", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, { "site_weight": 400, "weight_note": "Figtree 500 stands in for Optimistic 400 (one step heavier, calibrated by ink density)", "role": "Legal and consent text", "id": "legal", "face": "body", "size": { "desktop": 12, "phone": 12 }, "line_height": 1.333, "line_height_phone": 1.333, "weight": 500, "tracking_px": 0.35, "tracking_phone_px": 0.35, "site_tracking": "normal", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" } ], "components": { "button_primary": { "note": "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.", "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", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, "button_primary_hero": { "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)", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, "glass_pill": { "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)", "states": { "hover": { "measured": { "fill": "rgba(241,244,247,0.8)", "transition": "0.1s" }, "css": { "background-color": "rgba(241,244,247,0.8)" }, "prov": "observed" } }, "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, "button_outline": { "fill": "none", "note": "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.", "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", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, "nav_link": { "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", "note": "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).", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, "category_tile": { "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", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, "product_card": { "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", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, "feature_card": { "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", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, "news_card": { "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", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, "email_input": { "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", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, "pause_button": { "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", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" } } }, "system": { "fixed": [ "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" ], "flex": "Photography and its color: each product brings its own palette through the photo.", "traits": [ { "is": "Optimistic", "not": "naive", "text": "The typeface is literally named Optimistic; the story is about going beyond.", "source": "https://web.archive.org/web/20230130112237/https://design.facebook.com/stories/designing-our-new-company-brand-meta/", "prov": "inferred" }, { "is": "Human", "not": "technical", "text": "Photos lead with people wearing the products.", "source": "https://www.meta.com/ (2026-10-31)", "prov": "inferred" }, { "is": "Confident", "not": "loud", "text": "Short lines, no exclamation marks, one blue.", "source": "https://www.meta.com/ (2026-10-31)", "prov": "inferred" }, { "is": "Disciplined", "not": "rigid", "text": "Strict logo and partner rules, flexible imagery.", "source": "https://www.meta.com/brand/resources/meta/partnering-with-meta/", "prov": "inferred" } ] }, "formats": [ { "format": "Landing page", "level": 4, "must": "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.", "flex": "number of product cards (full-width or half-width), the hero line, which offers go in the feature band" }, { "format": "Partner co-branding", "level": 1, "must": "host left of the hairline, guest right; Meta lockup primary blue (or white); clear space 2x symbol height", "flex": "host brand's own layout and type" }, { "format": "Event or sponsor credit", "level": 1, "must": "approved credit line in sentence case, single-line Meta lockup, ratio 3h / 3h", "flex": "credit line wording from the approved list" }, { "format": "Social post", "level": 3, "must": "a full-bleed people-first photo, white sentence-case line, Meta logo in its primary variation", "flex": "crop and product" } ], "checks": [ { "name": "Logo hidden", "text": "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." }, { "name": "Swap test", "text": "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." } ], "examples": [ { "chapter": "color", "do": { "ground": "paper", "text": "Shop", "button": true, "button_fill": "#0457CB" }, "do_caption": "One action blue on a full pill (observed).", "dont": { "ground": "#0457CB", "text": "Meet the all-new Meta Glasses", "ink": "#FFFFFF" }, "dont_caption": "Headlines on a flat blue block: Meta puts white type on photography, not on brand color." }, { "chapter": "voice", "do": { "ground": "paper", "text": "Together with Meta" }, "do_caption": "An approved credit line, sentence case (published).", "dont": { "ground": "paper", "text": "Powered by Meta" }, "dont_caption": "\"Powered by\" is not an approved credit line (published)." } ], "make_it_yours": { "note": "Everything above transfers. These are Meta's own and must be replaced with yours: name and logo, purpose, positioning, messaging pillars, proof, taglines and boilerplate.", "replace": [ "identity", "purpose", "positioning", "messaging.pillars", "messaging.proof_points", "messaging.taglines", "messaging.boilerplate" ], "reference": { "purpose": { "mission": { "text": "Build the future of human connection and the technology that makes it possible", "prov": "published", "source": "https://www.meta.com/about/company-info/" }, "story": { "text": "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\".", "prov": "published", "source": "https://about.fb.com/news/2021/10/facebook-company-is-now-meta/", "also": [ "https://about.fb.com/news/2019/11/introducing-our-new-company-brand/", "https://web.archive.org/web/20230130112237/https://design.facebook.com/stories/designing-our-new-company-brand-meta/" ], "paraphrase": true }, "values": [ { "name": "Give people a voice", "means": "First of Meta's five principles", "prov": "published", "source": "https://www.meta.com/about/company-info/" }, { "name": "Build connection and community", "means": "Second principle", "prov": "published", "source": "https://www.meta.com/about/company-info/" }, { "name": "Serve everyone", "means": "Third principle", "prov": "published", "source": "https://www.meta.com/about/company-info/" }, { "name": "Keep people safe and protect privacy", "means": "Fourth principle", "prov": "published", "source": "https://www.meta.com/about/company-info/" }, { "name": "Promote economic opportunity", "means": "Fifth principle", "prov": "published", "source": "https://www.meta.com/about/company-info/" } ] }, "positioning": { "statement": { "text": "A social technology company building the future of human connection and the technology that makes it possible.", "prov": "published", "source": "https://about.fb.com/news/2021/10/facebook-company-is-now-meta/", "also": [ "https://www.meta.com/about/company-info/" ] }, "category": { "text": "Social technology: apps, AI, AI glasses and mixed reality", "prov": "published", "source": "https://about.fb.com/news/2021/10/facebook-company-is-now-meta/" }, "audience": { "text": "Billions of people who use its apps, plus creators, developers, businesses and partners", "prov": "published", "source": "https://www.meta.com/about/company-info/" }, "problem": { "text": "Connection limited by screens, distance and physics (paraphrase of the brand story).", "prov": "published", "source": "https://web.archive.org/web/20230130112237/https://design.facebook.com/stories/designing-our-new-company-brand-meta/" }, "promise": { "text": "Go beyond what digital connection makes possible today.", "prov": "published", "source": "https://web.archive.org/web/20230130112237/https://design.facebook.com/stories/designing-our-new-company-brand-meta/" }, "differentiators": [ { "text": "A family of apps used by billions (Facebook, Messenger, Instagram, WhatsApp).", "prov": "published", "source": "https://www.meta.com/about/company-info/" }, { "text": "Own hardware for wearing and entering computing: AI glasses with eyewear brands and Meta Quest.", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" }, { "text": "Meta AI built into the products.", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)" } ], "alternatives": [ { "text": "2D screens and today's online experiences (the brand story frames these as the limit to move beyond).", "prov": "published", "source": "https://web.archive.org/web/20230130112237/https://design.facebook.com/stories/designing-our-new-company-brand-meta/" } ] }, "messaging": { "taglines": [ { "text": "We're building the future of human connection", "prov": "observed", "source": "https://www.meta.com/about/ (2026-10-31)", "where": "About Meta hero line" }, { "text": "Meet the all-new Meta Glasses", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)", "where": "homepage hero (a product launch line, changes with the season)" }, { "text": "Iconic style meets Meta AI", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)", "where": "Ray-Ban Meta card eyebrow" } ], "boilerplate": { "text": "Meta builds technologies that help people connect, find communities, and grow businesses.", "prov": "published", "source": "https://about.fb.com/news/2021/10/facebook-company-is-now-meta/" }, "pillars": [ { "name": "Human connection", "claim": "Technology built around people and their relationships; the mission is the future of human connection.", "prov": "published", "source": "https://www.meta.com/about/company-info/", "proof": [ "p-apps" ] }, { "name": "Beyond the screen", "claim": "Moving past 2D screens toward AI glasses and mixed reality.", "prov": "published", "source": "https://www.meta.com/about/company-info/", "proof": [ "p-glasses", "p-quest" ] }, { "name": "AI you wear", "claim": "AI built into everyday products: glasses with Meta AI, a personal AI agent device.", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)", "proof": [ "p-glasses" ] }, { "name": "Buy with confidence", "claim": "Store promises on delivery, returns, warranty and financing.", "prov": "observed", "source": "https://www.meta.com/ (2026-10-31)", "proof": [ "p-delivery", "p-returns", "p-warranty" ] } ], "proof_points": [ { "id": "p-apps", "kind": "fact", "text": "Family of apps: Facebook, Messenger, Instagram, WhatsApp (and Threads).", "source": "https://www.meta.com/about/company-info/", "prov": "published" }, { "id": "p-glasses", "kind": "fact", "text": "AI glasses range: Meta Glasses, Ray-Ban Meta, Ray-Ban Meta Audio, Oakley Meta, Meta Ray-Ban Display.", "source": "https://www.meta.com/ (2026-10-31)", "prov": "observed" }, { "id": "p-quest", "kind": "fact", "text": "Meta Quest 3S mixed reality headset and Meta VR Glasses.", "source": "https://www.meta.com/ (2026-10-31)", "prov": "observed" }, { "id": "p-delivery", "kind": "offer", "text": "Free 2-day delivery on Meta Glasses, Meta Quest, Ray-Ban Meta and Oakley Meta.", "source": "https://www.meta.com/ (2026-10-31)", "prov": "observed" }, { "id": "p-returns", "kind": "offer", "text": "Free 30-day returns with no shipping fees.", "source": "https://www.meta.com/ (2026-10-31)", "prov": "observed" }, { "id": "p-warranty", "kind": "offer", "text": "One-year warranty included.", "source": "https://www.meta.com/ (2026-10-31)", "prov": "observed" } ], "claim_boundaries": [ { "text": "Never imply a partnership, endorsement or \"powered by\" relationship without an approved execution.", "prov": "published", "source": "https://www.meta.com/brand/resources/meta/partnering-with-meta/" }, { "text": "Never present more than one Meta technology when a partner is host.", "prov": "published", "source": "https://www.meta.com/brand/resources/meta/partnering-with-meta/" } ] } } } }