What is Snapchat's primary brand color?

Snapchat's heritage brand yellow is #fffc00, wired into the page CSS as --colors-2019__main__brand-yellow and --yellow-v100. On the desktop marketing surface it appears just twice in the captured page, both as hairline borders, never as a fill — the ghost wordmark in the corner, and a single thin accent. The primary CTA pill is not yellow but graphite near-black #121314, wired as --sds-webc-color-surface-buttonbg-primary. The secondary pill in the log-in card is a web-blue #0096e5. Treat the yellow as logo-only chrome and assume the graphite owns every primary action.

What typeface does Snapchat use, and what should I use as a substitute?

Snapchat runs Avenir Next as its primary family across every tier, with Graphik wired in as the secondary family but barely used. The hero h1 sits at 48px in weight 600 with 60px leading. The below-the-fold h2 'Log in to Snapchat' is 28px in weight 700 — the system's loudest weight moment. Body copy lives at 14px in weight 500, and the pill CTA labels run at 14px / 500 too. Avenir Next is licensed; the closest open-source substitute is Nunito Sans at the same weights, or Inter if you need tighter counters at the 14-16px body sizes. The 48px / 600 hero weight is deliberately not 700 — keep that restraint when substituting.

Why does Snapchat use 100px pill buttons everywhere?

The radius scale is binary: 100px for any interactive chip, 20px for content surfaces. There is no 8px or 12px tier on buttons — the top-nav cluster, the primary CTA, the secondary CTA, and the username chip all use 100px (which renders as a full pill at 32-40px heights). Content tiles use 20px corners. The captured page shows 8 instances of 100px and 17 instances of 20px, with a single 5px and 8px sneaking in on the input field and one small chip. The system reads as 'pills for actions, soft tiles for content,' nothing else.

Why is the marketing canvas white when Snapchat is famous for yellow?

The chrome is white because the four Snap mockups on the right of the fold are the page's chromatic engine — they render full phone-shaped scenes in their native product colors (a peach-and-pasta Spotlight clip, a Snap Map in green-on-cream, an anime Lens preview, a chat list in white-on-white). If the marketing canvas were yellow, the mockups would have to compete with the brand for attention. By keeping the chrome neutral and the CTAs graphite, the screenshots carry the personality. The yellow appears below the fold only in a single dark warning ribbon ('Are you a parent?') as a 12px accent — never as canvas.

Can I use this DESIGN.md to build my own consumer-app marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Snapchat's specific moves: white canvas with graphite CTAs, brand colour reserved for the logo and a single hairline, Avenir Next at modest 400-600 weights, 100px pills for every interactive chip, and a three-column mockup grid carrying the visual personality. The token references resolve cleanly without invention. The one move that only travels if you have vivid product screenshots is the screenshots-as-chroma inversion; without that, a graphite-CTA chrome reads as enterprise rather than consumer.

Snapchat Design System

Snapchat's desktop chrome inverts the brand: pure white canvas, graphite #121314 pill CTA, brand yellow #fffc00 reserved for the ghost logo.

About Snapchat DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source snapchat.com

Social & Community
Communication & Messaging

Snapchat's desktop chrome is the inverse of the brand most viewers carry in memory. There is no chrome yellow above the fold, no ghost logo at hero size, no purple gradient — just a white canvas, a 48px Avenir Next h1 reading "Open your Snapchat." in ink black, and a graphite pill CTA at #121314 sitting where a consumer brand would put a brand-coloured button. The yellow ghost wordmark hides at 24px in the top-left corner. The four content tiles on the right of the fold render full phone-shaped Snap mockups in their native product colours — the chat list, the Lenses preview, a Spotlight kitchen scene, the Snap Map — and those mockups, not the marketing chrome, are where the brand's personality lives.

The DESIGN.md file captures the moves: 13 colour tokens drawn from the page's white canvas and graphite text ladder plus the brand yellow held in reserve and a single web-blue accent #0096e5 used for the secondary CTA pill in the log-in card; 11 typography tokens running Avenir Next at sizes from 12.8px to 48px and weights from 400 to 700, with a 28px / 700 h2 ("Log in to Snapchat") as the loudest below-the-fold moment; 5 radius tokens centred on 100px pills and 20px cards; and 17 components covering the graphite pill CTA, the blue secondary pill, the four Snap mockup tiles, the input on the log-in card, the top-nav cluster, and the wide black ghost-warning ribbon that floats at the bottom of the page.

Feed this file to Claude or Cursor and it will reproduce the specific moves: pure white canvas instead of brand yellow, graphite CTA instead of a coloured pill, Avenir Next at modest weights rather than the heavier display tier most consumer apps reach for, and brand colour relegated to logo and decorative hairlines. The one move worth borrowing only if you have a strong product-screenshot story: trusting the screenshots to carry the chromatic identity. Snapchat gets away with a graphite chrome because the four Snap mockups on the right of the fold are vivid enough to do that work; most teams that copy the layout end up with a flat enterprise page instead.

What makes it distinct

Held-back yellow voltagebrand yellow #fffc00 is wired into CSS as `--colors-2019__main__brand-yellow` but appears just twice on the page, both times as a hairline border, never as fill
Graphite pill CTAsprimary actions render in near-black #121314 with full 100px pill rounding at 32px height, a fintech-style cluster rather than a consumer chip
Avenir Next across every tierdisplay at 48px / 600, h2 at 28px / 700, body at 14px / 500, no second family above 12px
Three-column Snap mockup gridphone-shaped feed cards in real product colours carry every chromatic moment on the page, framing the product as the brand
100px pills plus 20px cardsthe radius scale is binary: fully-rounded chips for buttons and avatars, soft 20px corners for the four content tiles

Live at snapchat.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

snapchat.com

Explore Snapchat

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Snapchat design system FAQ

Common questions about Snapchat's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Snapchat — official site

Snapchat's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.