# Design System Inspired by DuckDuckGo

## 1. Visual Theme & Atmosphere

DuckDuckGo's web presence is privacy-search-with-personality chrome — DuckDuckGo Red-Orange (#de5833) as the brand voltage, the duck mascot Dax as the brand character, and a friendly humanist chrome that softens the privacy positioning. The atmosphere is approachable privacy. Where Brave plays "contrarian privacy-as-feature" with a dark canvas, DuckDuckGo plays "friendly privacy-by-default" with a clean white canvas, soft rounded cards, and a smiling duck mascot. The brand wants to be the friendly alternative to Google, not the contrarian alternative to Big Search.

Dax the duck is the brand mascot. He appears in onboarding moments, on the home page hero, in error states, and as a small icon in the privacy-protection chrome inside the product. Dax's personality is friendly-confident — he tips his hat, waves, and occasionally blinks. The mascot is a key differentiator from peers: most privacy brands lean dark-serious, DuckDuckGo leans friendly-warm.

The DuckDuckGo Red-Orange (#de5833) is the chromatic voltage. It is a specific warm hex — neither pure red nor true orange — and pairs against the white canvas with high contrast and warmth. The voltage appears on CTAs, on Dax's accent, and as the privacy-feature accent in product mockups.

**Key Characteristics:**
- DuckDuckGo Red-Orange (#de5833) — chromatic voltage on CTAs and accents
- Dax the duck mascot — friendly brand character
- White canvas with soft rounded cards (8–16px radius)
- Search-bar-as-hero on the home page — every page leads with the search input
- Inter typography across chrome
- Privacy-friendly tone — never contrarian, always approachable

## 2. Color Palette & Roles

### Primary
- **DuckDuckGo Red-Orange** (`#de5833`): The brand voltage — CTAs, Dax accent
- **Red-Orange Hover** (`#b04324`): Press state

### 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** (`#222222`): Primary text
- **Body** (`#3a3a3a`): Default body text
- **Muted** (`#6b6f76`): Captions
- **Muted Soft** (`#9da3ad`): Fine-print

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

## 3. Typography Rules

### Font Family
- **Display + Body**: `Inter, system-ui, sans-serif` — modern humanist sans

### Hierarchy
- **Hero h1** — 48–64px Inter weight 700, line-height 1.1
- **Section h2** — 32–40px 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
- Body sits at 16–18px for friendly reading
- Tracking neutral (0)

## 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

- **Search bar (hero)** — Large rounded-pill search input on the home page, with the DuckDuckGo wordmark + Dax illustration above
- **Dax duck illustration** — Friendly illustrated duck character used as brand mascot
- **Primary CTA (orange pill)** — DuckDuckGo Red-Orange fill, white text, full-pill radius, 44px height, weight-600 label
- **Secondary CTA** — Transparent fill, 2px Red-Orange border, orange text
- **Feature card (soft radius)** — White surface, 12–16px radius, hairline border, internal padding 24px
- **Privacy callout band** — Section showing privacy-protection feature highlights (Tracker Radar, App Tracking Protection, Email Protection)

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

**Do.** Use friendly approachable privacy language ("Privacy, simplified", "We don't track you"). Reference everyday contexts. Use sentence case for chrome.

**Don't.** Don't use scare-tactic copy. Don't sanitize Dax the duck. Don't write enterprise-formal microcopy.

## 7. Motion Vocabulary

Friendly micro-animations — Dax may wave or blink on hero pages. Hover lifts on cards (1.02 scale + 200ms ease). Search bar focus animates with a soft expand. The motion is friendly-confident.

## 8. Anti-patterns to Avoid

- **Don't replace Dax the duck with a generic icon.** The mascot is brand voice
- **Don't tint DuckDuckGo Red-Orange.** The specific saturated hex is brand
- **Don't sharpen card radii below 8px.** Friendly privacy is the brand
- **Don't drop the search-bar-as-hero on the home page.** It is brand IA
- **Don't pair the chrome with a saturated tech-blue accent.** The orange is the voltage
- **Don't write contrarian privacy copy.** DuckDuckGo's brand is friendly, not contrarian
- **Don't use weight 600 for hero h1.** Weight 700 is the brand standard
