W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Meta
Meta Platforms, Inc. is the parent company that operates Facebook, Instagram, WhatsApp, Messenger, Quest, and the broader Reality Labs portfolio. The corporate Meta brand was introduced in October 2021 and sits above the product brands as a unifying identity — a confident blue wordmark, an "infinity" mark, and a vivid multi-color expressive palette used across motion, marketing, and metaverse-adjacent surfaces. The voice is optimistic, technology-forward, and aspirational.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/meta/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/meta/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Meta
Meta Platforms, Inc. is the parent company that operates Facebook, Instagram, WhatsApp, Messenger, Quest, and the broader Reality Labs portfolio. The corporate Meta brand was introduced in October 2021 and sits above the product brands as a unifying identity — a confident blue wordmark, an "infinity" mark, and a vivid multi-color expressive palette used across motion, marketing, and metaverse-adjacent surfaces. The voice is optimistic, technology-forward, and aspirational.
Tags: tech, social, meta, blue, corporate, parent-brand
Atoms
Palette
Meta · [email protected] · Proprietary — All Rights Reserved
Meta Platforms corporate palette built around the Meta Blue (#0668E1) primary, sitting above the family of Meta-owned product brands (Facebook, Instagram, WhatsApp, Quest). The corporate Meta identity uses a confident blue mark with a clean light canvas; Meta's expressive brand system also employs a vivid multi-color gradient palette across marketing surfaces, with vivid blue, green, red, and purple reading as the brand's color voice.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Meta Sans ([email protected]) |
Proprietary — All Rights Reserved | sans-serif |
body |
Meta Sans ([email protected]) |
Proprietary — All Rights Reserved | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
meta-blue |
Meta Blue | #0668E1 |
meta-blue-dark |
Meta Blue Dark | #1877F2 |
meta-vivid-blue |
Meta Vivid Blue | #0064E0 |
meta-vivid-green |
Meta Vivid Green | #00C853 |
meta-vivid-red |
Meta Vivid Red | #F02849 |
meta-vivid-purple |
Meta Vivid Purple | #7E4BFF |
meta-black |
Meta Black | #000000 |
meta-ink |
Meta Ink | #1C2B33 |
meta-gray |
Meta Gray | #65676B |
meta-gray-light |
Meta Gray Light | #8A8D91 |
meta-surface |
Meta Surface | #F0F2F5 |
meta-white |
Meta White | #FFFFFF |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
meta-white |
#FFFFFF |
surface |
meta-surface |
#F0F2F5 |
surface-elevated |
meta-white |
#FFFFFF |
text-primary |
meta-ink |
#1C2B33 |
text-secondary |
meta-gray |
#65676B |
text-tertiary |
meta-gray-light |
#8A8D91 |
primary |
meta-blue |
#0668E1 |
primary-hover |
meta-vivid-blue |
#0064E0 |
accent |
meta-vivid-purple |
#7E4BFF |
accent-hover |
meta-vivid-blue |
#0064E0 |
warning |
meta-vivid-red |
#F02849 |
warning-hover |
meta-vivid-red |
#F02849 |
error |
meta-vivid-red |
#F02849 |
success |
meta-vivid-green |
#00C853 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
meta-black |
#000000 |
surface |
meta-ink |
#1C2B33 |
surface-elevated |
meta-gray |
#65676B |
text-primary |
meta-white |
#FFFFFF |
text-secondary |
meta-surface |
#F0F2F5 |
text-tertiary |
meta-gray-light |
#8A8D91 |
primary |
meta-blue |
#0668E1 |
primary-hover |
meta-blue-dark |
#1877F2 |
accent |
meta-vivid-purple |
#7E4BFF |
accent-hover |
meta-vivid-blue |
#0064E0 |
warning |
meta-vivid-red |
#F02849 |
warning-hover |
meta-vivid-red |
#F02849 |
error |
meta-vivid-red |
#F02849 |
success |
meta-vivid-green |
#00C853 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
meta-blue |
#0668E1 |
on-identity |
meta-white |
#FFFFFF |
background |
meta-white |
#FFFFFF |
surface |
meta-surface |
#F0F2F5 |
surface-elevated |
meta-white |
#FFFFFF |
text-primary |
meta-ink |
#1C2B33 |
text-secondary |
meta-gray |
#65676B |
text-tertiary |
meta-gray-light |
#8A8D91 |
primary |
meta-blue |
#0668E1 |
primary-hover |
meta-vivid-blue |
#0064E0 |
accent |
meta-vivid-purple |
#7E4BFF |
accent-hover |
meta-vivid-blue |
#0064E0 |
mark |
meta-blue |
#0668E1 |
text-emphasis |
meta-ink |
#1C2B33 |
text-muted |
meta-gray |
#65676B |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
wordmark |
heading |
code |
mono |
Rules
🛑 error (6)
colorChoice → logo.wordmark.fill
- allowed: meta-blue, meta-white, meta-black
- forbidden: meta-blue-dark, meta-vivid-purple, meta-vivid-green, meta-vivid-red
The Meta corporate wordmark renders in Meta Blue, white, or black. The vivid secondary palette is for accent and motion use, not as a wordmark fill; meta-blue-dark is the Facebook product blue, not the Meta corporate mark.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant
The Meta wordmark and infinity mark carry strict clearspace and color rules across the Meta corporate brand system. Apply only the approved variants; do not derive new color treatments from the vivid secondary palette.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Meta Ink on Meta White gives ~16:1 — well above WCAG 2.1 Level AA. The rule encodes the floor for any new foreground/background pairing on Meta corporate surfaces.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
Meta Blue on Meta White must remain perceptible at link and interactive sizes. Falling below 3:1 (AA-large) breaks the affordance of primary actions on the light corporate canvas.
contextRestriction → roles.colors.accent
- forbiddenContexts: body-text, validation-failure, destructive-action
Meta Vivid Purple is part of the expressive secondary palette, used for editorial accent and motion. It is not the error color (Meta Vivid Red plays that role) and does not belong in body copy where it competes with the blue primary.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Meta's accessibility commitments make AA the floor for any new role pairing introduced on Meta corporate surfaces.
⚠️ warning (2)
enumMembership → typography.heading.fontWeight
- allowed: 500, 700
Meta Sans headlines on the corporate brand surfaces use Medium (500) and Bold (700). Lighter weights read as body copy; heavier than 700 is outside the documented kit.
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.5
Meta's corporate marketing headlines run materially larger than body copy. A 1.5× floor preserves the display-to- prose hierarchy the corporate voice depends on.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: meta-vivid-purple, meta-vivid-green
- doesNotPairWith: meta-blue-dark
Meta Blue (#0668E1) and Facebook product blue (#1877F2) are deliberately distinct — pairing them on the same surface creates a two-blue muddle that reads as a brand- hierarchy error.
Provenance
- Source: https://about.meta.com/brand/
- License:
Proprietary — All Rights Reserved - Attribution: Meta Platforms, Inc. — Meta, the Meta wordmark, the Meta "infinity" mark, and Meta Sans are registered trademarks of Meta Platforms, Inc. This atom captures brand-atoms' read of Meta's publicly available brand site and press kit; it is not an official Meta brand-guidelines document.
- Imported:
2026-05-17 - Notes: The Meta corporate brand is light-mode-first (in contrast to Facebook and Instagram product surfaces, which run dark themes alongside light). The vivid secondary palette documented here is the Meta corporate gradient-family used across motion, identity videos, and editorial accents.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Meta
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Meta
A clear hierarchy in Meta's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
Meta
[email protected]font · heading
Meta Sans
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Meta Sans
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ meta-vivid-purple #7E4BFF accent-hover
→ meta-vivid-blue #0064E0 background
→ meta-white #FFFFFF identity
→ meta-blue #0668E1 mark
→ meta-blue #0668E1 on-identity
→ meta-white #FFFFFF primary
→ meta-blue #0668E1 primary-hover
→ meta-vivid-blue #0064E0 surface
→ meta-surface #F0F2F5 surface-elevated
→ meta-white #FFFFFF text-emphasis
→ meta-ink #1C2B33 text-muted
→ meta-gray #65676B text-primary
→ meta-ink #1C2B33 text-secondary
→ meta-gray #65676B text-tertiary
→ meta-gray-light #8A8D91 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Meta Sans prose
→ body Meta Sans wordmark
→ heading Meta Sans Palette mode mappings (from meta)
Light mode (14 roles)
accent
→ meta-vivid-purple accent-hover
→ meta-vivid-blue background
→ meta-white error
→ meta-vivid-red primary
→ meta-blue primary-hover
→ meta-vivid-blue success
→ meta-vivid-green surface
→ meta-surface surface-elevated
→ meta-white text-primary
→ meta-ink text-secondary
→ meta-gray text-tertiary
→ meta-gray-light warning
→ meta-vivid-red warning-hover
→ meta-vivid-red Dark mode (14 roles)
accent
→ meta-vivid-purple accent-hover
→ meta-vivid-blue background
→ meta-black error
→ meta-vivid-red primary
→ meta-blue primary-hover
→ meta-blue-dark success
→ meta-vivid-green surface
→ meta-ink surface-elevated
→ meta-gray text-primary
→ meta-white text-secondary
→ meta-surface text-tertiary
→ meta-gray-light warning
→ meta-vivid-red warning-hover
→ meta-vivid-red Rules (9 typed constraints)
error · 6 rules
colorChoice logo.wordmark.fill allowed meta-blue, meta-white, meta-black forbidden meta-blue-dark, meta-vivid-purple, meta-vivid-green, meta-vivid-red The Meta corporate wordmark renders in Meta Blue, white, or black. The vivid secondary palette is for accent and motion use, not as a wordmark fill; meta-blue-dark is the Facebook product blue, not the Meta corporate mark.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant The Meta wordmark and infinity mark carry strict clearspace and color rules across the Meta corporate brand system. Apply only the approved variants; do not derive new color treatments from the vivid secondary palette.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Meta Ink on Meta White gives ~16:1 — well above WCAG 2.1 Level AA. The rule encodes the floor for any new foreground/background pairing on Meta corporate surfaces.
contrastRatio roles.colors.primary against background minRatio 3 standard WCAG-AA-large Meta Blue on Meta White must remain perceptible at link and interactive sizes. Falling below 3:1 (AA-large) breaks the affordance of primary actions on the light corporate canvas.
contextRestriction roles.colors.accent forbiddenContexts body-text, validation-failure, destructive-action Meta Vivid Purple is part of the expressive secondary palette, used for editorial accent and motion. It is not the error color (Meta Vivid Red plays that role) and does not belong in body copy where it competes with the blue primary.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Meta's accessibility commitments make AA the floor for any new role pairing introduced on Meta corporate surfaces.
warning · 2 rules
enumMembership typography.heading.fontWeight allowed 500, 700 Meta Sans headlines on the corporate brand surfaces use Medium (500) and Bold (700). Lighter weights read as body copy; heavier than 700 is outside the documented kit.
fontPairing typography.heading requires body minSizeRatio 1.5 Meta's corporate marketing headlines run materially larger than body copy. A 1.5× floor preserves the display-to- prose hierarchy the corporate voice depends on.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith meta-vivid-purple, meta-vivid-green doesNotPairWith meta-blue-dark Meta Blue (#0668E1) and Facebook product blue (#1877F2) are deliberately distinct — pairing them on the same surface creates a two-blue muddle that reads as a brand- hierarchy error.
Provenance
- Source
- https://about.meta.com/brand/
- License
Proprietary — All Rights Reserved- Attribution
- Meta Platforms, Inc. — Meta, the Meta wordmark, the Meta "infinity" mark, and Meta Sans are registered trademarks of Meta Platforms, Inc. This atom captures brand-atoms' read of Meta's publicly available brand site and press kit; it is not an official Meta brand-guidelines document.
- Imported
2026-05-17- Notes
- The Meta corporate brand is light-mode-first (in contrast to Facebook and Instagram product surfaces, which run dark themes alongside light). The vivid secondary palette documented here is the Meta corporate gradient-family used across motion, identity videos, and editorial accents.