W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Snapchat
Snapchat is the multimedia messaging, camera-first social network, and AR-lens platform built by Snap Inc., used by hundreds of millions of daily users to send ephemeral photo / video "Snaps," AR-filtered stories, and direct messages. The brand voice is playful, immediate, and youth-forward — "the camera company." Visually, Snapchat is anchored on Snapchat Yellow (#FFFC00), the saturated near-fluorescent yellow that fills the entire ghost- mark canvas, the launch splash screen, and the primary CTA across the app and snap.com marketing surfaces. Snapchat is yellow-first by canonical identity: the brand block IS the yellow canvas with the black-outlined ghost mark, distinct from most light/dark-first identities — the yellow surface is the brand surface.
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/snapchat/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/snapchat/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.
Snapchat
Snapchat is the multimedia messaging, camera-first social network, and AR-lens platform built by Snap Inc., used by hundreds of millions of daily users to send ephemeral photo / video "Snaps," AR-filtered stories, and direct messages. The brand voice is playful, immediate, and youth-forward — "the camera company." Visually, Snapchat is anchored on Snapchat Yellow (#FFFC00), the saturated near-fluorescent yellow that fills the entire ghost- mark canvas, the launch splash screen, and the primary CTA across the app and snap.com marketing surfaces. Snapchat is yellow-first by canonical identity: the brand block IS the yellow canvas with the black-outlined ghost mark, distinct from most light/dark-first identities — the yellow surface is the brand surface.
Tags: snapchat, snap, social, yellow, communications, mobile-first, camera, ar
Atoms
Palette
Snapchat · [email protected] · Proprietary — All Rights Reserved
Snapchat's brand palette is anchored on the signature Snapchat Yellow (#FFFC00) — the saturated near-fluorescent yellow that fills the entire ghost-mark canvas, the splash-screen background, and the primary CTA across the Snapchat app and snap.com marketing surfaces. The supporting palette is the published Snap Inc. brand-guidelines spectrum captured directly from the deployed snap.com/brand-guidelines CSS: a darker brand yellow (#FCF000), a warm yellow (#FFD301), pure black (#000000) for the ghost mark outline and wordmark, plus a small secondary scale (Snap blues #0096E5 / #049EEE, magentas #8936B6 / #C195DE, reds #E1143D / #C50A33, greens #00A179 / #00A881, oranges #E57200 / #FF8A00) used in the supporting Snap-Inc. product family.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
snapchat-yellow |
Snapchat Yellow | #FFFC00 |
snapchat-yellow-dark |
Snapchat Yellow Dark | #FCF000 |
snapchat-yellow-warm |
Snapchat Yellow Warm | #FFD301 |
snapchat-yellow-pale |
Snapchat Yellow Pale | #FEFF85 |
snapchat-black |
Snap Black | #000000 |
snapchat-white |
Snap White | #FFFFFF |
snapchat-blue |
Snap Blue | #0096E5 |
snapchat-blue-light |
Snap Blue Light | #049EEE |
snapchat-blue-bright |
Snap Blue Bright | #0EADFF |
snapchat-magenta |
Snap Magenta | #8936B6 |
snapchat-magenta-light |
Snap Magenta Light | #C195DE |
snapchat-red |
Snap Red | #E1143D |
snapchat-red-deep |
Snap Red Deep | #C50A33 |
snapchat-green |
Snap Green | #00A179 |
snapchat-green-light |
Snap Green Light | #00A881 |
snapchat-orange |
Snap Orange | #E57200 |
snapchat-orange-bright |
Snap Orange Bright | #FF8A00 |
snapchat-surface-light |
Snap Surface Light | #F1F1F1 |
snapchat-border-light |
Snap Border Light | #D9D9D9 |
snapchat-text-secondary |
Snap Text Secondary | #595959 |
snapchat-canvas-dark |
Snap Canvas Dark | #262626 |
snapchat-surface-dark |
Snap Surface Dark | #404040 |
snapchat-text-on-dark |
Snap Text on Dark | #FFFFFF |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
snapchat-yellow |
#FFFC00 |
surface |
snapchat-white |
#FFFFFF |
surface-elevated |
snapchat-yellow-pale |
#FEFF85 |
text-primary |
snapchat-black |
#000000 |
text-secondary |
snapchat-text-secondary |
#595959 |
text-tertiary |
snapchat-text-secondary |
#595959 |
primary |
snapchat-yellow |
#FFFC00 |
primary-hover |
snapchat-yellow-dark |
#FCF000 |
accent |
snapchat-yellow |
#FFFC00 |
accent-hover |
snapchat-yellow-dark |
#FCF000 |
warning |
snapchat-orange |
#E57200 |
warning-hover |
snapchat-orange-bright |
#FF8A00 |
error |
snapchat-red |
#E1143D |
success |
snapchat-green |
#00A179 |
border |
snapchat-border-light |
#D9D9D9 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
snapchat-canvas-dark |
#262626 |
surface |
snapchat-surface-dark |
#404040 |
surface-elevated |
snapchat-surface-dark |
#404040 |
text-primary |
snapchat-text-on-dark |
#FFFFFF |
text-secondary |
snapchat-border-light |
#D9D9D9 |
text-tertiary |
snapchat-text-secondary |
#595959 |
primary |
snapchat-yellow |
#FFFC00 |
primary-hover |
snapchat-yellow-warm |
#FFD301 |
accent |
snapchat-yellow |
#FFFC00 |
accent-hover |
snapchat-yellow-warm |
#FFD301 |
warning |
snapchat-orange-bright |
#FF8A00 |
warning-hover |
snapchat-orange |
#E57200 |
error |
snapchat-red |
#E1143D |
success |
snapchat-green-light |
#00A881 |
border |
snapchat-surface-dark |
#404040 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
snapchat-yellow |
#FFFC00 |
on-identity |
snapchat-black |
#000000 |
background |
snapchat-yellow |
#FFFC00 |
surface |
snapchat-white |
#FFFFFF |
surface-elevated |
snapchat-yellow-pale |
#FEFF85 |
text-primary |
snapchat-black |
#000000 |
text-secondary |
snapchat-text-secondary |
#595959 |
primary |
snapchat-yellow |
#FFFC00 |
primary-hover |
snapchat-yellow-dark |
#FCF000 |
accent |
snapchat-yellow |
#FFFC00 |
accent-hover |
snapchat-yellow-dark |
#FCF000 |
mark |
snapchat-yellow |
#FFFC00 |
success |
snapchat-green |
#00A179 |
warning |
snapchat-orange |
#E57200 |
error |
snapchat-red |
#E1143D |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
wordmark |
heading |
code |
mono |
Rules
🛑 error (6)
colorChoice → logo.mark
- allowed: snapchat-yellow, snapchat-black, snapchat-white
- forbidden: snapchat-yellow-warm, snapchat-yellow-pale, snapchat-blue, snapchat-magenta, snapchat-red, snapchat-green, snapchat-orange
Snap Inc.'s brand-guidelines policy prescribes the ghost mark in its approved color treatments only: yellow canvas with the black-outlined ghost (the canonical product mark), black-on-white in monochrome reproductions, and white-on- black on the dark canvas. The supporting Snap product-family palette (blues, magentas, reds, greens, oranges) is reserved for product UI and marketing illustration and must not be used to recolor the ghost mark itself.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, ghost-redraw, mark-cropped, combined-with-other-logo, merchandise-without-permission
Snap Inc.'s published brand guidelines (snap.com/brand- guidelines) prescribe the ghost mark in approved variants only. Redrawing the ghost silhouette, cropping the mark, applying decorative effects, combining the mark with a third-party logo, or selling unlicensed merchandise bearing the mark violates the brand-use policy.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
WCAG 2.1 Level AA contrast minimum for body text. Snap Black (#000000) on Snapchat Yellow (#FFFC00) reads at roughly 20:1 — clears AA decisively. The yellow-first brand canvas makes contrast checks particularly load-bearing because white text on the yellow canvas falls below the AA floor; the rule enforces black-on-yellow as the canonical text/canvas pairing.
variantSelection → logo
- use:
ghost-white-on-black - when:
backgroundColorScheme="dark"
On the Snap dark canvas (#262626) the ghost mark renders in white-on-black for legibility. The yellow-canvas ghost variant must not be placed on the dark surface where the yellow fills compete with the surrounding canvas.
contextRestriction → roles.colors.identity
- forbiddenContexts: product-of-competitor, merchandise, endorsement-implication, sponsorship-implication, app-impersonation
Snap Inc.'s brand-guidelines policy restricts use of the Snapchat ghost mark, the wordmark, and Snapchat Yellow in ways that imply official affiliation or Snap endorsement, on competing-app surfaces, or on unlicensed merchandise. Encoding the policy as a context restriction lets consumers reject impermissible placements.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The yellow-first brand canvas makes contrast checks particularly load-bearing: white-on-yellow falls below the AA floor, so every new role pairing introduced on Snap- skinned surfaces must be verified before deployment.
⚠️ warning (2)
enumMembership → typography.heading.fontWeight
- allowed: 400, 500, 700, 800
Avenir Next, Snap's licensed corporate typeface, ships across Ultra Light through Heavy. Snap's marketing display and product UI sit in the Regular (400), Medium (500), Bold (700), and Heavy (800) band — the four weights surfaced on the deployed snap.com brand-guidelines page. Lighter or heavier cuts drift from the brand's youth-forward, playful voice when rendered through the Inter substitute.
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.5
Snap's marketing display runs substantially larger than the prose copy on snap.com — the brand voice depends on the youth-forward, large-display posture. A 1.5× minimum size ratio between display and prose preserves the announcement-style hierarchy when Avenir Next reduces to the Inter substitute.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: snapchat-black, snapchat-white, snapchat-canvas-dark
- doesNotPairWith: snapchat-yellow-warm, snapchat-yellow-pale, snapchat-yellow-dark
Snapchat Yellow reads cleanest against pure black, pure white, or the deep near-black dark canvas. Pairing the signature yellow adjacent to the warm-yellow (#FFD301), pale-yellow (#FEFF85), or dark-yellow (#FCF000) tints collapses the calibrated saturation that makes the brand surface recognisable — the slight shifts read as a printing error or color-management drift rather than as an intentional palette.
Provenance
- Source: https://snap.com/en-US/brand-guidelines
- License:
Proprietary — All Rights Reserved - Attribution: Snapchat and the Snapchat ghost logo are trademarks of Snap Inc. The Snap Inc. brand-guidelines portal at snap.com/brand-guidelines is the canonical brand-asset entry point; the full guidelines are distributed as the downloadable Snapchat_Web-Brand-Guidelines _September-2025.pdf. The signature Snapchat Yellow (#FFFC00) is documented in the simple-icons brand database (citing snap.com) and corroborated via the deployed snap.com/brand-guidelines CSS. The supporting Snap product-family palette (Snap Blue #0096E5, Magenta #8936B6, Red #E1143D, Green #00A179, Orange #E57200) was captured from the same deployed stylesheet.
- Imported:
2026-05-18 - Notes: Derived from live site CSS at https://snap.com/brand-guidelines on 2026-05-18; the full Snap Inc. brand guidelines are distributed as a downloadable PDF and not surfaced in the page's visible HTML, so the deployed brand-guidelines-page CSS was the most direct grounded source for the supporting palette. Snap's proprietary brand typeface Program OT is declared on snap.com via @font-face but is not publicly distributed. Snap publishes Avenir Next as the licensed corporate typeface for marketing — also non-free. This atom references Inter@1 as the open-source rendering substitute for both faces. The Snap brand-asset policy expressly forbids redistribution of Snap marks, so
assets: []is the correct posture for this catalog.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Snapchat
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.
Snapchat
A clear hierarchy in Snapchat'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
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
→ snapchat-yellow #FFFC00 accent-hover
→ snapchat-yellow-dark #FCF000 background
→ snapchat-yellow #FFFC00 error
→ snapchat-red #E1143D identity
→ snapchat-yellow #FFFC00 mark
→ snapchat-yellow #FFFC00 on-identity
→ snapchat-black #000000 primary
→ snapchat-yellow #FFFC00 primary-hover
→ snapchat-yellow-dark #FCF000 success
→ snapchat-green #00A179 surface
→ snapchat-white #FFFFFF surface-elevated
→ snapchat-yellow-pale #FEFF85 text-primary
→ snapchat-black #000000 text-secondary
→ snapchat-text-secondary #595959 warning
→ snapchat-orange #E57200 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter wordmark
→ heading Inter Palette mode mappings (from snapchat)
Light mode (15 roles)
accent
→ snapchat-yellow accent-hover
→ snapchat-yellow-dark background
→ snapchat-yellow border
→ snapchat-border-light error
→ snapchat-red primary
→ snapchat-yellow primary-hover
→ snapchat-yellow-dark success
→ snapchat-green surface
→ snapchat-white surface-elevated
→ snapchat-yellow-pale text-primary
→ snapchat-black text-secondary
→ snapchat-text-secondary text-tertiary
→ snapchat-text-secondary warning
→ snapchat-orange warning-hover
→ snapchat-orange-bright Dark mode (15 roles)
accent
→ snapchat-yellow accent-hover
→ snapchat-yellow-warm background
→ snapchat-canvas-dark border
→ snapchat-surface-dark error
→ snapchat-red primary
→ snapchat-yellow primary-hover
→ snapchat-yellow-warm success
→ snapchat-green-light surface
→ snapchat-surface-dark surface-elevated
→ snapchat-surface-dark text-primary
→ snapchat-text-on-dark text-secondary
→ snapchat-border-light text-tertiary
→ snapchat-text-secondary warning
→ snapchat-orange-bright warning-hover
→ snapchat-orange Rules (9 typed constraints)
error · 6 rules
colorChoice logo.mark allowed snapchat-yellow, snapchat-black, snapchat-white forbidden snapchat-yellow-warm, snapchat-yellow-pale, snapchat-blue, snapchat-magenta, snapchat-red, snapchat-green, snapchat-orange Snap Inc.'s brand-guidelines policy prescribes the ghost mark in its approved color treatments only: yellow canvas with the black-outlined ghost (the canonical product mark), black-on-white in monochrome reproductions, and white-on- black on the dark canvas. The supporting Snap product-family palette (blues, magentas, reds, greens, oranges) is reserved for product UI and marketing illustration and must not be used to recolor the ghost mark itself.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, ghost-redraw, mark-cropped, combined-with-other-logo, merchandise-without-permission Snap Inc.'s published brand guidelines (snap.com/brand- guidelines) prescribe the ghost mark in approved variants only. Redrawing the ghost silhouette, cropping the mark, applying decorative effects, combining the mark with a third-party logo, or selling unlicensed merchandise bearing the mark violates the brand-use policy.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA WCAG 2.1 Level AA contrast minimum for body text. Snap Black (#000000) on Snapchat Yellow (#FFFC00) reads at roughly 20:1 — clears AA decisively. The yellow-first brand canvas makes contrast checks particularly load-bearing because white text on the yellow canvas falls below the AA floor; the rule enforces black-on-yellow as the canonical text/canvas pairing.
variantSelection logo use ghost-white-on-black when backgroundColorScheme="dark" On the Snap dark canvas (#262626) the ghost mark renders in white-on-black for legibility. The yellow-canvas ghost variant must not be placed on the dark surface where the yellow fills compete with the surrounding canvas.
contextRestriction roles.colors.identity forbiddenContexts product-of-competitor, merchandise, endorsement-implication, sponsorship-implication, app-impersonation Snap Inc.'s brand-guidelines policy restricts use of the Snapchat ghost mark, the wordmark, and Snapchat Yellow in ways that imply official affiliation or Snap endorsement, on competing-app surfaces, or on unlicensed merchandise. Encoding the policy as a context restriction lets consumers reject impermissible placements.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The yellow-first brand canvas makes contrast checks particularly load-bearing: white-on-yellow falls below the AA floor, so every new role pairing introduced on Snap- skinned surfaces must be verified before deployment.
warning · 2 rules
enumMembership typography.heading.fontWeight allowed 400, 500, 700, 800 Avenir Next, Snap's licensed corporate typeface, ships across Ultra Light through Heavy. Snap's marketing display and product UI sit in the Regular (400), Medium (500), Bold (700), and Heavy (800) band — the four weights surfaced on the deployed snap.com brand-guidelines page. Lighter or heavier cuts drift from the brand's youth-forward, playful voice when rendered through the Inter substitute.
fontPairing typography.display requires prose minSizeRatio 1.5 Snap's marketing display runs substantially larger than the prose copy on snap.com — the brand voice depends on the youth-forward, large-display posture. A 1.5× minimum size ratio between display and prose preserves the announcement-style hierarchy when Avenir Next reduces to the Inter substitute.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith snapchat-black, snapchat-white, snapchat-canvas-dark doesNotPairWith snapchat-yellow-warm, snapchat-yellow-pale, snapchat-yellow-dark Snapchat Yellow reads cleanest against pure black, pure white, or the deep near-black dark canvas. Pairing the signature yellow adjacent to the warm-yellow (#FFD301), pale-yellow (#FEFF85), or dark-yellow (#FCF000) tints collapses the calibrated saturation that makes the brand surface recognisable — the slight shifts read as a printing error or color-management drift rather than as an intentional palette.
Provenance
- Source
- https://snap.com/en-US/brand-guidelines
- License
Proprietary — All Rights Reserved- Attribution
- Snapchat and the Snapchat ghost logo are trademarks of Snap Inc. The Snap Inc. brand-guidelines portal at snap.com/brand-guidelines is the canonical brand-asset entry point; the full guidelines are distributed as the downloadable Snapchat_Web-Brand-Guidelines _September-2025.pdf. The signature Snapchat Yellow (#FFFC00) is documented in the simple-icons brand database (citing snap.com) and corroborated via the deployed snap.com/brand-guidelines CSS. The supporting Snap product-family palette (Snap Blue #0096E5, Magenta #8936B6, Red #E1143D, Green #00A179, Orange #E57200) was captured from the same deployed stylesheet.
- Imported
2026-05-18- Notes
- Derived from live site CSS at https://snap.com/brand-guidelines on 2026-05-18; the full Snap Inc. brand guidelines are distributed as a downloadable PDF and not surfaced in the page's visible HTML, so the deployed brand-guidelines-page CSS was the most direct grounded source for the supporting palette. Snap's proprietary brand typeface Program OT is declared on snap.com via @font-face but is not publicly distributed. Snap publishes Avenir Next as the licensed corporate typeface for marketing — also non-free. This atom references Inter@1 as the open-source rendering substitute for both faces. The Snap brand-asset policy expressly forbids redistribution of Snap marks, so `assets: []` is the correct posture for this catalog.