# Design System Inspired by Snap

## 1. Visual Theme & Atmosphere

Snap's web presence is camera-first augmented-reality chrome — Snap Yellow (#fffc00) as the brand voltage, a clean white canvas, and a layout grammar that puts the camera at the center of every page. The atmosphere is youthful camera-tech. Snap's positioning is "the camera company" — Snapchat (the app), Spectacles (the AR hardware), AR Lenses (the developer platform), Snap Map (location social) — all unified by the philosophy that the camera is the new input device for social, creative, and augmented experiences. The chrome reflects that camera-first commitment.

The Snapchat ghost is the brand mark — the white ghost silhouette on the saturated yellow background. The ghost is one of the most-recognized social-app icons in the world, and the chrome treats it with reverence. The ghost appears as the app icon, as a brand-mark accent, and occasionally in product illustrations (the ghost holding a phone, the ghost wearing Spectacles).

Snap Yellow (#fffc00) is the chromatic voltage. The specific hex — a true saturated yellow, nearly pure spectral — is the most-recognized brand color in social apps. It appears as the app icon background, on the chrome wordmark, on CTAs ("Get the Snapchat App"), and as a generous brand-presence band on certain pages.

**Key Characteristics:**
- Snap Yellow (#fffc00) — chromatic voltage on chrome and ghost mascot
- Snapchat ghost mascot — iconic brand-mark anchor
- White canvas with soft rounded cards (8–24px radius)
- Camera-first layout — every page leads with the camera
- AR Lens previews auto-play in product mockups
- Avenir Next typography — geometric humanist sans with personality

## 2. Color Palette & Roles

### Primary
- **Snap Yellow** (`#fffc00`): The brand voltage — chrome accent, ghost mascot background, CTA fill (with dark text)
- **Pure White** (`#ffffff`): The ghost mascot color, the canvas
- **Pure Black** (`#0c0d10`): The ink color

### Surface & Background
- **Pure White** (`#ffffff`): Page canvas
- **Surface Soft** (`#f7f8fa`): Alternating section bands
- **Surface Card** (`#f0f2f5`): Card hover state
- **Hairline** (`#e0e3e8`): 1px borders

### Neutrals & Text
- **Ink** (`#0c0d10`): Primary text
- **Body** (`#2c2f36`): Default body text
- **Muted** (`#6c6f74`): Captions
- **Muted Soft** (`#9da0a6`): Fine-print

### Semantic
- **Success** (`#22c55e`): Green
- **Warning** (`#f59e0b`): Amber
- **Error** (`#ef4444`): Red

## 3. Typography Rules

### Font Family
- **Display + Body**: `Avenir Next, Inter, system-ui, sans-serif` — geometric humanist sans with personality

### Hierarchy
- **Hero h1** — 48–80px Avenir Next weight 700, line-height 1.05
- **Section h2** — 32–48px weight 700
- **Card title** — 20–24px weight 600
- **Body** — 16–18px weight 400, line-height 1.5
- **Caption** — 14px weight 400
- **Button label** — 14–16px weight 600

### Principles
- Weight 700 for hero h1
- Avenir Next's slightly geometric proportions match the youth-tech aesthetic
- Body sits at 16–18px

## 4. Layout & Spacing

The site uses a 12-column grid with a max content width of 1280–1440px. Section padding is 80–120px vertical. Feature card grids run 3-up at desktop.

## 5. Componentry Feel

- **Ghost mascot illustration** — The white Snapchat ghost on yellow, often shown in playful poses
- **Primary CTA (yellow pill)** — Snap Yellow fill, dark text, full-pill radius, 44px height, weight-600 label
- **Secondary CTA** — Transparent fill, 2px dark border, dark text
- **AR Lens preview card** — Soft-rounded card showing an AR Lens effect auto-playing (face filters, world AR)
- **Camera mockup hero** — Phone mockup showing the Snapchat camera interface with a featured AR Lens active
- **Spectacles hardware card** — Product mockup of the AR glasses with feature callouts

## 6. Voice / Microcopy Do's & Don'ts

**Do.** Use youthful camera-tech language ("Create. Share. Discover."). Reference camera and AR contexts. Use sentence case for chrome.

**Don't.** Don't write enterprise-formal copy. Don't sanitize the playful ghost personality. Don't translate "Snap", "Snapchat", or product names.

## 7. Motion Vocabulary

Camera-grade motion. AR Lens previews auto-play in product mockups. Hero photography may have subtle ken-burns pans (5-second cycles). Hover lift on cards (1.03 scale + 200ms ease). The motion is camera-shutter snappy.

## 8. Anti-patterns to Avoid

- **Don't replace the Snapchat ghost with a generic icon.** It is brand identity
- **Don't tint Snap Yellow.** The specific saturated #fffc00 is brand
- **Don't sharpen card radii below 8px.** Youth-tech softness
- **Don't sanitize the camera-first layout.** AR is the brand category
- **Don't pair the yellow with a second saturated brand accent.** The yellow is the voltage
- **Don't write enterprise-corporate microcopy.** Snap is youth-friendly
- **Don't use weight 600 for hero h1.** Weight 700 is the brand standard
