# Design System Inspired by Brave

## 1. Visual Theme & Atmosphere

Brave's web presence is privacy-first browser chrome — Brave Orange (#fb542b) as the brand voltage on CTAs, dark canvas (#13141b) on the marketing surface, and a typography stack that leans modern-sans confident. The atmosphere is privacy-as-feature. Where mainstream browsers (Chrome, Safari, Firefox) lean into general-purpose marketing surfaces, Brave leans into the specific positioning: a browser built around the message "the web you deserve, without the surveillance." The dark canvas, the orange voltage, and the shield iconography all signal "privacy-first" without falling into security-thriller alarmism.

The lion brand mark is Brave's mascot — a stylized illustrated lion head, often shown protectively guarding the user's data. The lion is the privacy-protective character, and it appears in onboarding moments, in the "Shields" privacy chrome inside the product, and as occasional brand presence on marketing pages. Replacing the lion with a generic shield icon flattens the brand voice.

The Brave Orange (#fb542b) is the chromatic voltage. It is a specific saturated tomato-orange — not pure red, not amber — and pairs against the dark canvas to create the brand's high-contrast signal. The orange appears on CTAs ("Download Brave"), on the lion mark's accent, and as syntax inside browser feature explanations.

**Key Characteristics:**
- Brave Orange (#fb542b) — chromatic voltage on CTAs and accents
- Dark canvas (#13141b) — privacy-as-feature backdrop
- Lion brand mark — the privacy-protective character
- Inter typography across chrome
- Browser-mockup heroes with shields/privacy chrome highlighted
- Soft rounded cards (8–12px radius)
- Privacy-first messaging hierarchy on every page

## 2. Color Palette & Roles

### Primary
- **Brave Orange** (`#fb542b`): The brand voltage — CTAs, lion mark accent, syntax
- **Orange Hover** (`#c84321`): Press state

### Surface & Background
- **Dark Canvas** (`#13141b`): Page background
- **Surface 1** (`#1f2030`): Card backgrounds
- **Surface 2** (`#2a2d40`): Hover state, elevated panels
- **Hairline Dark** (`#3a3d52`): 1px borders in dark mode

### Light-mode (download page, support)
- **Light Canvas** (`#ffffff`)
- **Light Surface** (`#f7f8fa`)

### Neutrals & Text (on dark)
- **Ink** (`#ffffff`): Primary text
- **Body** (`#d2d4dd`): Default body text
- **Muted** (`#8c8fa0`): Captions
- **Muted Soft** (`#5e6172`): Fine-print

### Semantic
- **Success** (`#3fb95e`): Green
- **Warning** (`#ffb84a`): Amber
- **Error** (`#fb542b`): Brave Orange doubles as error
- **Shield Green** (`#1fc16b`): Used on the Shields chrome to indicate protection active

## 3. Typography Rules

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

### Hierarchy
- **Hero h1** — 48–72px Inter 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
- Body sits at 16–18px for considered reading
- Tracking slightly negative at display sizes (-0.5px)

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

- **Browser mockup hero** — Full-bleed Brave browser screenshot showing the Shields chrome and orange accent details, with the privacy-positioning headline overlaid
- **Primary CTA (orange pill)** — Brave Orange fill, white text, full-pill radius, 44–48px height, weight-600 label
- **Secondary CTA** — Transparent fill, 2px Brave Orange border, orange text
- **Feature card (dark)** — Dark surface, 8–12px radius, hairline border, internal padding 24px. Icon, headline, description
- **Lion brand mark** — Illustrated lion head used in onboarding moments and brand presence
- **Shields privacy callout** — Section showing the Brave Shields feature with a small mockup of the privacy panel

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

**Do.** Use privacy-confident language ("The web you deserve", "Faster, safer, ad-free"). Quantify benefit ("Brave is 3x faster than Chrome"). Reference specific privacy features (Shields, Tor, BAT rewards).

**Don't.** Don't use scare-tactic security copy. Don't sanitize the contrarian positioning. Don't write enterprise-formal microcopy.

## 7. Motion Vocabulary

Confident product-led motion. Browser screenshot mockups have subtle scroll-reveal animations. The lion brand mark has occasional idle paw gestures on landing pages. Hover lift on cards (1.02 scale + 200ms ease). The motion is restrained-confident.

## 8. Anti-patterns to Avoid

- **Don't replace the dark canvas with white.** Privacy-as-feature brand lives on dark
- **Don't sanitize the lion brand mark to a generic shield.** The lion is brand voice
- **Don't tint Brave Orange to a softer coral.** The specific saturated orange is brand
- **Don't add saturated brand-blue accents.** The chrome is dark + orange
- **Don't write scare-tactic security copy.** The brand is privacy-confident, not security-thriller
- **Don't use weight 600 for hero h1.** Weight 700 is the brand standard
- **Don't drop the browser-mockup hero treatment.** It demonstrates the product
