# Snapchat

> `snapchat@1.0.0`

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** · `snapchat@1.0.0` · 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** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | 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: `snapchat@1.0.0` from the encyclopedia.*