Snapchat Design System

Overview

Snapchat's desktop chrome inverts the brand most viewers carry in memory. Restrained voltage. The hero is a white canvas with a 48px Avenir Next h1 in ink black, a graphite pill CTA at {colors.primary} (#121314), and a yellow ghost wordmark hidden at 24px in the top-left corner. Where Discord paints its hero in Blurple and TikTok runs neon-on-black, Snapchat's chrome reads almost like a consumer-bank page — the brand colour is held back to logo and hairline use only, and four phone-shaped Snap mockups on the right do every chromatic job the chrome refuses.

The yellow itself is still in the system. {colors.brand-yellow} (#fffc00) is wired into the page CSS as --colors-2019__main__brand-yellow and --yellow-v100, but across the captured page it shows up just twice, both times as hairline borders — never as fill, never as a background block. The graphite {colors.primary} carries every primary action (the "Snapchat Ads" pill in the nav, the "Chat Now" pill below the fold, the four "Try Now / Find Your Friends / Open Spotlight / Explore Your Map" pills sitting on top of the mockups). A single web-blue {colors.brand-blue} (#0096e5) appears once, as the wider secondary pill in the log-in card.

Typography is Avenir Next across every tier, at modest weights. The hero h1 at 48px / 600 is heavier than the system's body but lighter than the 28px / 700 used on the log-in card h2 — the heaviest typographic moment on the page sits below the fold, not in the hero. Body lives at 14px in weight 500. The pill CTAs match the body at 14px / 500. There is no 32-40px display tier between the 28px headings and the 48px hero — the system jumps.

Key Characteristics:

• White canvas ({colors.canvas} — #ffffff), not the brand yellow most viewers remember; the surface ladder runs canvas → {colors.surface-1} (#f7f8f9) → {colors.surface-2} (#f0f1f2) entirely in cool warm-grays.
• Graphite pill CTAs ({colors.primary} — #121314) at 32px height with 100px corner rounding. A single web-blue secondary pill ({colors.brand-blue}) appears once, in the log-in card.
• Avenir Next at 400-700 weights only. The 48px / 600 hero is heavier than body but lighter than the 28px / 700 h2 below the fold.
• Brand yellow {colors.brand-yellow} reserved for the ghost wordmark and a single hairline. Never as background fill on the marketing surface.
• Binary radius scale: 100px pills for every interactive chip, 20px corners for content tiles, nothing in between.
• Three-column Snap mockup grid carries the chromatic personality. Each mockup is a full phone-shaped scene in the product's native colors — chat list, Lenses preview, Spotlight kitchen clip, Snap Map.
• A dark warning ribbon at {colors.ink} floats above the fold ("Are you a parent? Learn what we're doing to help keep Snapchatters safe."). The only persistent dark surface in the system, with a yellow {colors.alert-yellow} icon as its lone yellow accent.

Colors

Brand

• Brand Yellow ({colors.brand-yellow} — #fffc00): frequency 4. Used as border (2), text (2). Wired as --colors-2019__main__brand-yellow and --yellow-v100. The heritage colour — the ghost logo and a hairline accent. Never used as fill on the marketing surface.
• Brand Blue ({colors.brand-blue} — #0096e5): frequency 3. Used as text (1), bg (1), border (1). Wired as --sds-webc-color-surface-buttonbg-primary-alt and --sds-webc-color-highlight-action. The secondary CTA pill on the log-in card and a single inline accent.
• Brand Blue Active ({colors.brand-blue-active} — #0894fa): wired as --blue-v400. Reserved for the active state on the blue secondary pill.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 84. Used as bg (6), text (39 on dark surfaces), border (39). Wired across --white, --sds-webc-color-surface-pagebg, --sds-webc-color-surface-background, --card-bg-color. The dominant surface — the whole marketing chrome rests on this.
• Surface-1 ({colors.surface-1} — #f7f8f9): the soft tile background used on the four Snap mockup container tiles. Wired as --card-bg-color and --sds-webc-color-surface-cardbg.
• Surface-2 ({colors.surface-2} — #f0f1f2): frequency 2 as bg. Wired as --sds-webc-color-surface-buttonbg-secondary, --gray-v100. The text-input fill on the log-in card and the disabled-button background.

Text

• Ink ({colors.ink} — #000000): frequency 171. Used as text (82), bg (5), border (80). Wired as --colors-2019__gray__black and --black-v200. The hero h1 sits here. Pure black across the typographic load.
• Ink Soft ({colors.ink-soft} — #121314): frequency 6. Used as text (2), bg (3), border (1). Wired as --content-primary-color and --sds-webc-color-surface-buttonbg-primary. The primary-CTA pill fill — a graphite-near-black, not pure black.
• Ink Muted ({colors.ink-muted} — #53575b): frequency 58. Used as text (29), border (29). Wired as --content-secondary-color and --gray-425. The body-paragraph default colour. Surprisingly cool — a blue-leaning grey, not warm.
• Ink Tertiary ({colors.ink-tertiary} — #cccccc): wired as --gray-v200. The disabled-text and divider tone.

Hairlines

• Hairline ({colors.hairline} — #e9eaeb): wired as --gray-v150 and --sds-webc-color-interaction-button-secondary-hover. The default border / divider on cards.
• Hairline Soft ({colors.hairline-soft} — #edeeef): wired as --gray-v-54 and --sds-webc-color-icon-button-background. The icon-button rest state.

Link / Alert

• Link ({colors.link} — #0000ee): frequency 2. The default UA link colour, used unstyled on a few footer links — the only non-brand chromatic moment in the type ladder.
• Alert Red ({colors.alert-red} — #f23c57): wired as --red-v100. Reserved for error states; not visible on the marketing surface.
• Alert Yellow ({colors.alert-yellow} — #ffc131): wired as --off-yellow. The icon colour on the dark warning ribbon — the only yellow on the page besides the ghost wordmark.

Typography

Font Family

The system runs Avenir Next across every tier — declared on CSS as --font-primary: "Avenir Next, Helvetica, sans-serif". A secondary family Graphik is wired as --font-secondary: "Graphik, Helvetica, sans-serif" but doesn't surface on the captured page. The input field is the lone exception — it renders in plain Arial, the browser default for <input>. There is no display serif, no mono, no second family in active use.

Hierarchy

Principles

The heaviest weight on the page is 700, used once on the 28px log-in h2. The hero h1 at 48px / 600 is deliberately lighter than that — a restrained signal that the hero text exists to label the page, not to shout. Body lives at 14px in weight 500, and the pill CTA labels match the body at 14px / 500 rather than running heavier. There is no 32-40px display tier between the 28px headings and the 48px hero — the system jumps that range, which keeps the visual hierarchy binary (small-and-medium chrome below, one large hero above).

Note on Font Substitutes

Avenir Next is licensed. The closest open-source substitute is Nunito Sans at the same weights — the warm geometric counters of Avenir Next read close. Inter at 95% line-height is a tighter alternative if you need slightly more density at the 14-16px body sizes. For the 48px / 600 hero, DM Sans is a decent free swap. The 48px / 600 hero weight is the move to preserve when substituting — do not bump to 700.

Layout

Spacing System

• Base unit: 4px (with 8px as the dominant module on padding shorthands).
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 10px · {spacing.base} 15px · {spacing.lg} 20px · {spacing.xl} 35px.
• Pill padding: {spacing.button-y} 8px vertical, {spacing.button-x} 16px horizontal on the 32px-tall primary chip.
• Mockup-tile gutter: ~24px between the four phone-shaped mockup tiles in the right column.
• Section padding (vertical): ~80-96px between major sections.

Grid & Container

• Top-fold split: the page divides vertically at ~620px from the left edge. The left column carries the log-in card (white canvas, anchored upper-third); the right column carries the 2x2 mockup grid that stretches to the right edge.
• Mockup grid: 2 columns x 2 rows of phone-shaped Snap mockups, each ~410px wide x 660px tall, soft 20px corners on a {colors.surface-1} tile.
• Below-fold heading: centered "Open your Snapchat." section sits on the same white canvas, with a single graphite pill CTA centered beneath.
• Footer: 4-column link grid plus a language selector, capped at ~1280px content width, terminating in a 35px-tall black {component.footer-bar} with the privacy / terms links.

Rhythm

The page alternates between dense mockup grid above the fold and anchored editorial stack below. There is no decorative gradient, no atmospheric band, no parallax — the visual rhythm comes entirely from the phone-shaped mockup tiles on the right and the centered "Open your Snapchat." heading that mirrors the hero text on the left. The black {component.warning-ribbon} floats above the fold as the page's only persistent dark surface.

Elevation

The system runs essentially no shadow tier on the marketing surface. Cards lift through tonal contrast, not drop shadows.

• Flat surfaces: the canvas, the hero card, the footer — 95% of the page sits at z=0.
• Tonal lift: {colors.surface-1} (#f7f8f9) tiles sit on {colors.canvas} (#ffffff) — a ~3-point lightness gap that reads as elevation only because the canvas itself is pure white.
• Soft elevation on chips: the {colors.surface-2} text input on the log-in card is the only inset-style surface. No raised shadow on the primary pill button.
• Black overlay strip: the 80px-tall dark {component.warning-ribbon} at the bottom of the hero is the only z>0 surface, lifted by colour contrast rather than shadow.

Shapes

The radius scale is binary: pills or soft tiles. There is no medium-corner tier.

• {rounded.none} 0px — only on headings and the hero block itself.
• {rounded.xs} 5px — the text input on the log-in card. The lone "small but not zero" radius.
• {rounded.sm} 8px — a single chip (navLink wrapper).
• {rounded.md} 20px — every content tile. The four Snap mockup containers, the log-in card.
• {rounded.pill} 100px — every interactive chip. The primary CTA, secondary CTA, tertiary chip, search pill, top-nav button cluster, mockup overlay CTAs.
• {rounded.full} 9999px — circular avatars and icon buttons.

There is no 12px or 16px tier. The system reads as "pills for actions, soft 20px tiles for content," and almost nothing in between.

Components

button-primary — The graphite-CTA pill. {colors.primary} (#121314) fill, white text, {typography.button-md} (14px / 500), {rounded.pill} (100px) radius, 8x16 padding, 32px height. "Snapchat Ads" and "Chat Now" are the canonical instances. Width hugs the label rather than stretching.

button-primary-hover — Background flips from {colors.primary} to {colors.primary-hover} (#000000) — graphite to pure black, a subtle deepening of the rest state.

button-secondary — The blue pill. {colors.brand-blue} (#0096e5) fill, white text, {rounded.pill} (100px) radius, 12x20 padding, 44px height — taller than the primary because it carries the "Log in" CTA on the centred log-in card.

button-tertiary — A neutral chip. {colors.surface-2} (#f0f1f2) fill, graphite text, {rounded.pill} (100px). The disabled state on the primary pill and the icon-button background.

top-nav — White canvas, 72px height, 8x16 padding. Houses the ghost logo (left), the icon-pill cluster for Stories / Spotlight / Chat / Lenses / Snapchat+ (center, each rendered as transparent text with a small inline icon), and the right-aligned "Snapchat Ads" + "Download" pair (both primary-graphite pills).

nav-chip — Transparent fill, graphite text, {typography.label-md}. Used inside the centre nav cluster — a chipless chip, where the icon does the visual lift.

search-pill — {colors.surface-1} fill, muted-grey placeholder text, {rounded.pill} 100px, 8x16 padding, 40px height. The leftmost search field at the top of the nav.

hero-heading — White canvas (transparent), {colors.ink} (#000000) text, {typography.display-xl} (48px / 600). "Open your Snapchat." is the canonical instance. Sits centered at the bottom-center of the page; the heading at the top of the log-in card uses {typography.display-md} instead.

section-heading — Used on the log-in card h2, {typography.display-md} (28px / 700) in {colors.ink-muted} rather than ink black — the only place the muted-grey colour carries a heading.

body-paragraph — Default {colors.ink-muted} text at {typography.body-md} (14px / 500). "Chat, Snap, and video call your friends. Watch Stories and Spotlight, all from your computer."

mockup-tile — {colors.surface-1} (#f7f8f9) tile, {rounded.md} 20px radius, 0 padding (the phone-shaped Snap mockup fills the tile edge-to-edge). Four instances on the page: chat list, Lenses preview, Spotlight kitchen clip, Snap Map. The tile is just a frame — every chromatic moment inside it belongs to the product, not the chrome.

mockup-cta — Dark pill overlay sitting at the bottom of each mockup tile. {colors.ink-soft} fill at 85% opacity, white text, {typography.label-md} (14px / 500), {rounded.pill} 100px, 8x16 padding, 32px height. "Try Now / Find Your Friends / Open Spotlight / Explore Your Map" are the four instances.

text-input — {colors.surface-2} (#f0f1f2) fill, dark text at {typography.heading-sm} (16px / 500), {rounded.xs} 5px radius, 7px padding, 38px height. The username-or-email field on the log-in card. Note the 5px radius — the only place in the system that isn't a pill or 20px tile.

warning-ribbon — {colors.ink} (#000000) fill, white text, {typography.caption} (12px / 600), 10x30x10x40 padding. The "Are you a parent?" persistent ribbon. The yellow icon at the start uses {colors.alert-yellow} (#ffc131) — the only yellow on the marketing surface besides the ghost logo.

footer — White canvas, {colors.ink-soft} text, {typography.body-md}, 35px padding. 4-column link grid plus a language selector. Terminates in a slimmer black {component.footer-bar} carrying the privacy/terms cluster.

footer-bar — 35px-tall black strip at the very bottom, {typography.caption} text in white. Houses Privacy Policy and Terms of Service as the page's only persistent dark surface besides the warning ribbon.

Do's and Don'ts

Do treat the brand yellow as logo-only chrome. The captured page uses {colors.brand-yellow} (#fffc00) just twice and only as a hairline; a fill in this colour anywhere on the surface immediately reads as a different system.

Do use the graphite {colors.primary} (#121314) rather than pure black for primary CTAs. The 7-point lightness gap between graphite and pure ink reads as a designed restraint rather than a missed token.

Do keep pills at 100px radius regardless of height. The 32px primary, the 44px secondary, the 40px search field, the avatar chips — all use 100px (which renders fully rounded at every size in the system). Switching to a fixed 16-24px breaks the binary radius rhythm.

Do carry the chromatic personality in product screenshots rather than the chrome. The four phone-shaped Snap mockups on the right of the fold do work that a yellow canvas would do in a louder system. If you do not have vivid screenshots, do not adopt the graphite-CTA chrome — the page will read as enterprise.

Don't add yellow fills under buttons or text. The --colors-2019__main__brand-yellow token exists but is never used as a backgroundColor on the marketing surface. A yellow CTA pill instantly breaks the system's restraint.

Don't introduce a 12-16px corner-radius tier on cards or chips. The system is binary — 100px pills or 20px tiles — and a half-rounded 12px chip reads as a different brand altogether. If you need a "card with rounded chip inside," nest a 100px pill inside the 20px tile.

Don't render the hero h1 at weight 700. The hero is deliberately 48px / 600 so the 28px / 700 log-in h2 below it can be the loudest typographic moment on the page. Bumping the hero to 700 flattens that hierarchy.

Don't add drop shadows to the mockup tiles. The system uses tonal lift ({colors.surface-1} on {colors.canvas}) rather than shadow. A drop shadow on a Snap mockup tile undermines the flat-canvas restraint and pulls visual weight away from the product screenshot inside.

Known Gaps

• Hover and focus states: only the primary-pill press is captured. Full focus rings, disabled tints, error states for the input live in the product app and are not exposed on the marketing surface.
• Form input error states: {component.text-input} carries only the rest state. The brand's red {colors.alert-red} (#f23c57) is wired into CSS but doesn't render on the captured page.
• Mobile and tablet layouts: the capture is desktop-only. The mobile site is a full-bleed dark experience with the ghost wordmark at brand size — a different visual system that is not represented here.
• Snap product chrome: every distinctive visual element on the page (the chat list, the Lenses anime preview, the Spotlight clip, the Snap Map) is inside a Snap mockup rather than in the marketing system. The product's own design tokens — yellow chat bubbles, Bitmoji styling, the carousel chrome — are not captured here.
• Motion: the mockup tiles auto-play video previews. The marketing surface itself is static; transitions and parallax on the mockup carousel are not captured.
• Sub-brand systems: "Snapchat Ads" and "Snapchat+" each have their own marketing surfaces with different typographic and chromatic moves; only the main snapchat.com fold is represented.