Snapchat

---
version: alpha
name: "Snapchat Web 2024"
description: "Typography baseline relies on Avenir Next, Helvetica, sans-serif for hero/display-level headings."
colors:
  action-blue: "#0096e5"
  page-background: "#ffffff"
  body-text: "#53575b"
  brand-yellow: "#fffc00"
  primary-action-button-bg: "#121314"
  primary-text: "#000000"
  card-feed-background: "#f8f9fb"
  secondary-button-bg: "#f0f1f2"
  body-text-secondary: "#53575b"
  button-text-white: "#ffffff"
  primary-text-near-black: "#000000"
  nav-border: "#e9eaeb"
typography:
  display-heading:
    fontFamily: "Avenir Next, Helvetica, sans-serif"
    fontSize: "48px"
    fontWeight: "600"
    lineHeight: "60px"
  section-heading:
    fontFamily: "Avenir Next, Helvetica, sans-serif"
    fontSize: "28px"
    fontWeight: "700"
    lineHeight: "36px"
  sub-heading:
    fontFamily: "Avenir Next, Helvetica, sans-serif"
    fontSize: "22px"
    fontWeight: "600"
    lineHeight: "28px"
  body-default:
    fontFamily: "Avenir Next, Helvetica, sans-serif"
    fontSize: "16px"
    fontWeight: "400"
  body-small:
    fontFamily: "Avenir Next, Helvetica, sans-serif"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "17px"
  label-medium:
    fontFamily: "Avenir Next, Helvetica, sans-serif"
    fontSize: "14px"
    fontWeight: "500"
    lineHeight: "18px"
  label-bold:
    fontFamily: "Avenir Next, Helvetica, sans-serif"
    fontSize: "14px"
    fontWeight: "700"
  caption:
    fontFamily: "Avenir Next, Helvetica, sans-serif"
    fontSize: "12px"
    fontWeight: "600"
  nav-label:
    fontFamily: "Graphik, Helvetica, sans-serif"
    fontSize: "14px"
    fontWeight: "400"
  body-medium-emphasis:
    fontFamily: "Avenir Next, Helvetica, sans-serif"
    fontSize: "16px"
    fontWeight: "500"
    lineHeight: "24px"
rounded:
  radius-input: "5px"
  radius-nav: "6px"
  radius-card: "8px"
  radius-tag: "20px"
  radius-pill: "100px"
spacing:
  spacing-1: "2px"
  spacing-2: "3px"
  spacing-3: "4px"
  spacing-4: "5px"
  spacing-5: "6px"
  spacing-6: "7px"
  spacing-7: "8px"
  spacing-8: "10px"
  spacing-9: "12px"
  spacing-10: "15px"
  spacing-11: "16px"
  spacing-12: "20px"
  spacing-13: "29px"
  spacing-14: "30px"
  spacing-15: "35px"
  spacing-16: "40px"
---

## Overview

Typography baseline relies on Avenir Next, Helvetica, sans-serif for hero/display-level headings.

This system uses a 4px base grid with scale values 2, 3, 4, 5, 6, 7, 8, 10, 12, 15, 16, 20, 29, 30, 35, 40, 43.

**Signature traits:**
- Core token rhythm: Token evidence indicates consistent color, spacing, and radius rhythm across visible UI.

## Colors

The palette uses 16 validated color tokens across 2 theme profiles. Semantic roles stay attached to observed usage so generation agents can choose accents without inventing new color meaning.

**Semantic naming:**
- **surface-background** maps to `page-background`: Role "background" is grounded by usage context "Main page background, nav background, card surfaces".
- **action-text** maps to `primary-action-button-bg`: Role "text" is grounded by usage context "Primary button backgrounds (Download, Snapchat Ads), nav surface button bg".
- **content-text** maps to `brand-yellow`: Role "text" is grounded by usage context "Snapchat brand color, ghost gradient, footer accents, logo context".
- **action-border** maps to `nav-border`: Role "border" is grounded by usage context "Navigation bar bottom border, secondary button hover state".

### Dark Theme

### Text Scale
- **Body Text** (#53575b): Nav labels, body copy. Role: text. {authored: rgb(83, 87, 91), space: rgb}
- **Brand Yellow** (#fffc00): Brand accent, logo, footer highlights. Role: text. {authored: rgb(255, 252, 0), space: rgb}
- **Primary Action / Button BG** (#121314): Primary button backgrounds. Role: text. {authored: rgb(18, 19, 20), space: rgb}
- **Primary Text** (#000000): Headings, strong text. Role: text. {authored: rgb(0, 0, 0), space: rgb, alpha: 0.05}

### Surface & Shadows
- **Action Blue** (#0096e5): Log in button, highlight action. Role: background. {authored: rgb(0, 150, 229), space: rgb}
- **Page Background** (#ffffff): Main page background (dark theme shares same CSSOM data — no distinct dark surface detected). Role: background. {authored: rgb(255, 255, 255), space: rgb}

### Light Theme

### Text Scale
- **Body Text / Secondary** (#53575b): Nav labels, body copy, secondary text throughout. Role: text. {authored: rgb(83, 87, 91), space: rgb}
- **Brand Yellow** (#fffc00): Snapchat brand color, ghost gradient, footer accents, logo context. Role: text. {authored: rgb(255, 252, 0), space: rgb}
- **Button Text / White** (#ffffff): Text on dark primary buttons, overlaid card headlines. Role: text. {authored: rgb(255, 255, 255), space: rgb}
- **Primary Action / Button BG** (#121314): Primary button backgrounds (Download, Snapchat Ads), nav surface button bg. Role: text. {authored: rgb(18, 19, 20), space: rgb}
- **Primary Text / Near Black** (#000000): Headings, strong text, icon fills, footer text. Role: text. {authored: rgb(0, 0, 0), space: rgb, alpha: 0.05}

### Interactive
- **Nav Border** (#e9eaeb): Navigation bar bottom border, secondary button hover state. Role: border. {authored: rgb(233, 234, 235), space: rgb}

### Surface & Shadows
- **Action Blue** (#0096e5): Primary alt button bg (Log in CTA), highlight action color, links. Role: background. {authored: rgb(0, 150, 229), space: rgb}
- **Card / Feed Background** (#f8f9fb): Card backgrounds, feed surface. Role: background. {authored: rgb(248, 249, 251), space: rgb}
- **Page Background** (#ffffff): Main page background, nav background, card surfaces. Role: background. {authored: rgb(255, 255, 255), space: rgb}
- **Secondary Button BG** (#f0f1f2): Secondary/disabled button backgrounds, input fill. Role: background. {authored: rgb(240, 241, 242), space: rgb}

## Typography

Typography uses Avenir Next, Helvetica, sans-serif, Graphik, Helvetica, sans-serif across extracted hierarchy roles. Keep hierarchy mapped to these token rows before adding decorative type styles.

Mixes Avenir Next, Helvetica, sans-serif and Graphik, Helvetica, sans-serif for visual contrast. Weight range spans semi-bold, bold, regular, medium. Sizes range from 12px to 48px.

### Font Roles
- **Headline Font**: Avenir Next
- **Body Font**: Avenir Next

### Type Scale Evidence
| Role | Font | Size | Weight | Line Height | Letter Spacing | Stack / Features | Notes |
|------|------|------|--------|-------------|----------------|------------------|-------|
| Hero/display-level headings | Avenir Next, Helvetica, sans-serif | 48px | 600 | 60px | normal | Avenir Next, Helvetica, sans-serif | Extracted token |
| Section titles, card overlay headlines | Avenir Next, Helvetica, sans-serif | 28px | 700 | 36px | normal | Avenir Next, Helvetica, sans-serif | Extracted token |
| Sub-section headings, feature titles | Avenir Next, Helvetica, sans-serif | 22px | 600 | 28px | normal | Avenir Next, Helvetica, sans-serif | Extracted token |
| Primary body copy, login form labels | Avenir Next, Helvetica, sans-serif | 16px | 400 | normal | normal | Avenir Next, Helvetica, sans-serif | Extracted token |
| Secondary body text, descriptions | Avenir Next, Helvetica, sans-serif | 14px | 400 | 17px | normal | Avenir Next, Helvetica, sans-serif | Extracted token |
| Button labels, nav item labels, interactive labels | Avenir Next, Helvetica, sans-serif | 14px | 500 | 18px | normal | Avenir Next, Helvetica, sans-serif | Extracted token |
| Strong labels, emphasized UI text | Avenir Next, Helvetica, sans-serif | 14px | 700 | normal | normal | Avenir Next, Helvetica, sans-serif | Extracted token |
| Captions, badges, small labels | Avenir Next, Helvetica, sans-serif | 12px | 600 | normal | normal | Avenir Next, Helvetica, sans-serif | Extracted token |
| Navigation item text, secondary UI labels | Graphik, Helvetica, sans-serif | 14px | 400 | normal | normal | Graphik, Helvetica, sans-serif | Extracted token |
| Medium-emphasis body text, feature descriptions | Avenir Next, Helvetica, sans-serif | 16px | 500 | 24px | normal | Avenir Next, Helvetica, sans-serif | Extracted token |

## Layout

Responsive system uses 1 breakpoint tier(s): mobile.

### Responsive Strategy
- **mobile (<= 767px)**: Constrain layout for small viewports and prioritize vertical stacking.

### Spacing System
| Token | Value | Px | Notes |
|------|-------|----|-------|
| spacing-1 | 2px | 2 | Extracted spacing token |
| spacing-2 | 3px | 3 | Extracted spacing token |
| spacing-3 | 4px | 4 | Extracted spacing token |
| spacing-4 | 5px | 5 | Extracted spacing token |
| spacing-5 | 6px | 6 | Extracted spacing token |
| spacing-6 | 7px | 7 | Extracted spacing token |
| spacing-7 | 8px | 8 | Mapped to --search-bar-margin |
| spacing-8 | 10px | 10 | Extracted spacing token |
| spacing-9 | 12px | 12 | Extracted spacing token |
| spacing-10 | 15px | 15 | Extracted spacing token |
| spacing-11 | 16px | 16 | Extracted spacing token |
| spacing-12 | 20px | 20 | Extracted spacing token |
| spacing-13 | 29px | 29 | Extracted spacing token |
| spacing-14 | 30px | 30 | Extracted spacing token |
| spacing-15 | 35px | 35 | Extracted spacing token |
| spacing-16 | 40px | 40 | Extracted spacing token |
| spacing-17 | 43px | 43 | Extracted spacing token |

## Elevation & Depth

Keep depth flat unless validated shadow or interaction evidence appears in the extraction payload. Do not invent shadows beyond this evidence boundary.

### Shadow Evidence
| Shadow Token | Layers | Details |
|--------------|--------|---------|
| nav-shadow | 1 | 0px 6px 12px 4px rgba(0, 0, 0, 0.1) |

### Interaction Signals
| Theme | Signal | Evidence |
|-------|--------|----------|
| Light | outline-color | rgb(83, 87, 91) ; rgb(0, 0, 0) ; rgb(255, 255, 255) |
| Light | outline-width | 3px |
| Light | outline-offset | 0px |
| Light | transform | matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1) ; matrix(1, 0, 0, 0.95, 0, 0) |
| Dark | outline-color | rgb(83, 87, 91) ; rgb(0, 0, 0) ; rgb(255, 255, 255) |
| Dark | outline-width | 3px |
| Dark | outline-offset | 0px |
| Dark | transform | matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1) ; matrix(1, 0, 0, 0.95, 0, 0) |

## Shapes

Shape language maps directly to rounded tokens. Keep component corners consistent with the role mapping below before introducing bespoke geometry.

### Radius Roles
| Token | Value | Px | Role Mapping |
|------|-------|----|--------------|
| radius-input | 5px | 5 | Subtle corner |
| radius-nav | 6px | 6 | Subtle corner |
| radius-card | 8px | 8 | Control corner |
| radius-tag | 20px | 20 | Card corner |
| radius-pill | 100px | 100 | Large surface corner |

### Geometry Evidence
| Radius Token | Shape | Units |
|--------------|-------|-------|
| radius-input | 5px | px |
| radius-nav | 6px | px |
| radius-card | 8px | px |
| radius-tag | 20px | px |
| radius-pill | 100px | px |

## Components

(none detected)

## Do's and Don'ts

Guardrails protect Core token rhythm without adding unsupported visual claims.

| Do | Don't |
|----|---------|
| Do maintain consistent spacing using the base grid | Don't make unsupported claims about absent visual features |
| Do maintain WCAG AA contrast ratios (4.5:1 for normal text) | Don't mix rounded and sharp corners in the same view |
| Do use the primary color only for the single most important action per screen |  |
| Do verify evidence before writing new design-system guidance |  |

## Responsive Evidence

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <= 767px | (max-width: 767px) |

## Agent Prompt Guide

### Example Component Prompts
- Create button component using validated primary color role and spacing tokens.
- Create card component with mapped radius role and evidence-backed elevation.
- Create form input component using inferred typography hierarchy and border roles.

### Iteration Guide
1. Start with extracted palette and typography roles only.
2. Map spacing and radius directly from token tables before visual polish.
3. Apply component patterns one section at a time and compare against source intent.
4. Keep elevation claims tied to explicit evidence in output.
5. Iterate with smallest diffs and re-check section hierarchy after each change.