Brave Design System Deep Dive

1. Brand Overview

Brave’s visual language is unapologetically bold. This is a browser brand built on the promise of privacy, speed, and a user-first philosophy — and the design system reflects that attitude.

The site feels confident. Dark, high-contrast surfaces dominate. Primary actions pop in saturated blues (#434fcf), while the brand’s lion logo sits as a strong icon without text, leaning into recognition over explanation. They’re not trying to look friendly or soft — the brand is about strength, trust, and control.

Typography choices reinforce this. Headlines use FlechaM at massive sizes — 120px for hero statements — giving a sense of authority and impact. Body and UI text relies on Poppins and Inter Variable, modern sans-serifs with clean geometry. No decorative fluff. Just clarity.

The color palette is extensive. Brave uses not just brand primaries but a dense set of functional and state colors: purples for Tor windows, greens for success, oranges for warnings, deep neutrals for backgrounds. This isn’t a stripped-down minimal palette — it’s a toolkit for a complex product with multiple modes and features.

The spacing system is strictly 8px-based, with occasional odd values like 3.2px and 7px, hinting at fine-tuned adjustments for specific components. Rounded corners range from subtle 8px on inputs to absurdly large 1000px pills on buttons. They know when to go sharp and when to go friendly.

Overall, Brave’s design system is for a privacy-focused, tech-savvy audience. It’s not chasing aesthetic minimalism — it focuses on functional clarity, strong brand presence, and a UI that feels like it means business. This works because Brave isn’t trying to be “just another browser.” They want to be immediately recognizable and convey trust through visual weight and deliberate design choices.

2. Color System

2.1 Primary Colors

The primary brand color is a rich, saturated blue: #434fcf (rgb(67, 79, 207)). This is used for CTAs, download buttons, and interactive states. It’s cooler than Brave’s logo orange, which is reserved for brand identity rather than UI actions.

Psychologically, this blue communicates reliability and security — perfect for a privacy-first product. Compared to competitors like Chrome (light blues and neutrals) or Firefox (warm oranges/purples), Brave’s primary blue stands out as more assertive. It avoids the typical orange-heavy UI, keeping the warm hues for branding, not interface.

2.2 Complete Palette

Brave’s palette is huge. Here’s the table of ALL extracted colors:

Brave uses dozens of --leo-color-* variables for functional contexts: private windows (#22044b), Tor windows (#ecdff3), system feedback colors, brand-specific BAT token colors, etc.

2.3 Color Relationships

Contrast is high — dark #1c1c1d backgrounds with #ffffff text hit WCAG AAA easily. Primary blue on white is also safe, though text on blue needs white or very light #e4e4e5 to maintain accessibility.

Dark mode is native here — most surfaces are dark neutrals, with light mode not appearing in the extracted data. The palette supports multiple "window modes" with unique colors (Tor: purples, Private: deep violet, etc.), creating clear visual separation.

2.4 Usage Guide

• Primary Blue (#434fcf) — Only for primary interactive elements. Avoid using for text-heavy sections.
• Dark Neutral (#1c1c1d) — Use for global backgrounds and header bars.
• White (#ffffff) — Text on dark backgrounds, iconography.
• Mode Colors — Use only in their respective contexts (e.g., Tor window purple in Tor mode).
• Avoid mixing warm oranges with primary blue in the same UI element — Brave keeps warm hues for branding and alert states, not CTAs.

3. Typography

3.1 Font Families

• FlechaM — Custom serif-like headline font. Used at very large sizes for hero headings.
• Poppins — Clean geometric sans-serif. Used for headings, links, body text.
• Inter Variable — Highly legible sans-serif. Used for smaller headings, captions, links.
• system-ui stack — For buttons and UI labels, falling back to platform defaults.
• Times — Rarely used, possibly for stylistic captions.

No Google or Adobe font imports were detected. Fonts are likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

Huge hero headings create immediate impact. 120px FlechaM is a statement — you can't ignore it. Poppins steps in for subheads and body, keeping things modern. The tight spacing on large sizes (-2.4px) prevents oversized text from feeling loose.

Small UI text is still bold (600–700 weight), ensuring legibility over dark backgrounds. Uppercase captions (8px, 12px, 15px) add a sense of structure in navigation and component labels.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px. They stick to multiples but have some odd fractional values for micro-adjustments.

4.2 Layout

Breakpoints:

• 550px, 640px, 744px, 885px, 1024px, 1080px, 1280px, 1300px, 1536px.

This is a fine-grained responsive system — they’re designing for many device widths, not just mobile/tablet/desktop.

5. Visual Elements

Border Radius

Shadows

Mostly absent — Brave is a flat design brand with occasional soft shadows:

• rgba(0, 0, 0, 0.2) 0px 8px 40px — subtle depth for overlays.
• Rare rgba(117, 117, 117, 0.5) small shadows for focus.

Borders are preferred for depth cues.

6. Components

6.1 Buttons

Primary Filled (isFilled)
Default:

• Background: #434fcf
• Text: #ffffff
• Padding: 0 12px
• Border radius: 1000px
• No border, no shadow.

Hover:

• Color changes to neutral (var(--tw-color-neutral-50))
• Background to white
• Opacity: 0.3

Active:

• Opacity: 0.75

Focus:

• Border: 1px solid rgba(var(--tw-color-text-primary),1)
• Background: var(--tw-color-primitive-blurple-35)

Secondary Outline (isOutline)
Default:

• Background: transparent
• Border: 1px solid rgba(28,28,29,0.7)
• Text: #1c1c1d

States mirror primary, but with border emphasis.

6.2 Links

Multiple variants:

• Blue (#434fcf) with underline — for inline links.
• White, bold — for nav on dark backgrounds.
• Dark neutral (#1c1c1d) bold — for text on light backgrounds.
• Light blue (#bcc6f3) underlined — for secondary CTAs.

Hover states mostly remove underline and shift color via var(--color-hover).

6.3 Forms

Select fields:

• Background: #252527
• Text: #c9c9ca
• Border radius: 8px
• Padding: 6px 32px 6px 16px

No hover/focus styles in extracted data — possibly handled via JavaScript.

6.4 Cards

Borders:

• 2px solid #1c1c1d
  Radius: 16px
  Shadows rare — mostly flat.

7. Design Tokens

:root {
  /* Colors */
  --color-primary-semantic: #e4e4e5;
  --color-neutral-dark: #1c1c1d;
  --color-neutral-light-transparent: #c9c9ca;
  --color-blue-primary: #434fcf;
  --color-white: #ffffff;
  --color-neutral-mid: #878da6;
  --color-deep-blue-hover: #271e93;
  --color-neutral-hover: #8a8a8c;
  --color-neutral-hover-mid: #838385;

  /* Typography */
  --font-flechaM: "FlechaM";
  --font-poppins: "Poppins";
  --font-inter: "Inter Variable";
  --font-system-ui: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial;
  --font-times: "Times";

  /* Spacing */
  --space-1: 1px;
  --space-3_2: 3.2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-154_406: 154.406px;

  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-pill: 1000px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-lg: rgba(0, 0, 0, 0.2) 0px 8px 40px;
}

8. AI Coding Assistant Prompt

# Brave Design System Specification

You are a Brave design expert. Build UIs matching their visual language exactly.

## Brand Context
Brave’s design language is bold, high-contrast, and functional. It uses dark surfaces with saturated accent colors, large impactful typography, and a strict 8px spacing system. The brand prioritizes clarity, trust, and mode-specific visual cues.

## Color Palette
- Primary Blue: #434fcf — CTAs, filled buttons, primary links
- Neutral Dark: #1c1c1d — Backgrounds, header bars
- Neutral Light Transparent: #c9c9ca — Dividers, secondary text
- White: #ffffff — Text on dark, icons
- Neutral Mid: #878da6 — Secondary text
- Deep Blue Hover: #271e93 — Hover states for links/buttons
- Neutral Hover: #8a8a8c — Subtle hover on neutral elements
- Mode Colors: Various `--leo-color-*` variables — Use only for their specific contexts (Tor, Private, etc.)

## Typography
- Headings: FlechaM — Hero headlines
- Subheadings: Poppins — Section titles, UI headings
- Body: Inter Variable — Paragraphs, labels
- UI: system-ui stack — Buttons, system text
- Special: Times — Occasional captions

| Level | Font | Size | Weight | Line Height | Use For |
|-------|------|------|--------|-------------|---------|
| H1 Hero | FlechaM | 120px | 500 | 0.86 | Main hero titles |
| H1 Large | FlechaM | 70px | 500 | 1.00 | Section hero |
| H2 | Poppins | 40px | 600 | 1.10 | Large headings |
| Subhead | Poppins | 30px | 600 | 1.33 | Section headings |
| Body | Inter Variable | 20px | 400 | 1.50 | Paragraphs |
| Button | system-ui | 18px | 600 | 1.33 | Primary buttons |
| Caption | Poppins | 15px | 700 | 2.67 | Uppercase labels |

## Spacing & Grid
Base: 8px grid.
Scale: 1px, 3.2px, 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 80px, 154.406px.
Use multiples of 8px for layout. Odd values only for fine-tuning.

## Border Radius
- none: 0 — sharp corners
- sm: 8px — inputs, selects
- md: 16px — cards, sections
- pill: 1000px — buttons
- full: 9999px — extreme pill shapes

## Shadows & Depth
- Minimal shadows: `rgba(0,0,0,0.2) 0px 8px 40px` for overlays
- Prefer borders for depth cues

## Component Specifications

### Primary Button
Default:
```css
background: #434fcf;
color: #ffffff;
padding: 0 12px;
border-radius: 1000px;
font-weight: 600;
font-size: 12px;
border: none;

Hover: background: #ffffff; opacity: 0.3; color: var(--tw-color-neutral-50). Active: opacity: 0.75. Focus: border: 1px solid rgba(var(--tw-color-text-primary),1); background: var(--tw-color-primitive-blurple-35).

Secondary Button

Default:

background: transparent;
color: #1c1c1d;
border: 1px solid rgba(28,28,29,0.7);
border-radius: 1000px;
padding: 0 12px;

States mirror primary.

Navigation Links

• Blue underlined: #434fcf, underline stays on hover.
• White bold: #ffffff, no underline.
• Dark bold: #1c1c1d, no underline.

Input Fields

background: #252527;
color: #c9c9ca;
border-radius: 8px;
padding: 6px 32px 6px 16px;
border: none;

Cards

border: 2px solid #1c1c1d;
border-radius: 16px;
background: var(--color-primary-semantic);

Layout & Responsive Rules

Max content width: 1536px breakpoint. Page padding: multiples of 8px. Breakpoints: 550px, 640px, 744px, 885px, 1024px, 1080px, 1280px, 1300px, 1536px.

Interaction Rules

• Transition: 150ms ease for hover/focus changes
• Focus indicators: solid border, high-contrast color

DO List

• Use only specified hex values
• Maintain 8px grid
• Keep pill buttons at 1000px radius
• Use FlechaM for hero headings
• Reserve mode colors for their contexts

DON'T List

• Don't mix warm oranges with primary blue in same button
• Don't invent new shades
• Don't use large shadows
• Don't break grid spacing

Code Examples

Primary button:

.btn-primary {
  background: #434fcf;
  color: #ffffff;
  padding: 0 12px;
  border-radius: 1000px;
  font-weight: 600;
  font-size: 12px;
}
.btn-primary:hover { background: #ffffff; opacity: 0.3; }
.btn-primary:focus { border: 1px solid rgba(255,255,255,1); background: #3a2ecd; }

Card:

.card {
  border: 2px solid #1c1c1d;
  border-radius: 16px;
  padding: 24px;
  background: #e4e4e5;
}

Input:

.select {
  background: #252527;
  color: #c9c9ca;
  border-radius: 8px;
  padding: 6px 32px 6px 16px;
}

---

## 9. Summary

**TL;DR** — Brave’s design system is bold, dark, and functional. Massive typography, a saturated blue primary, and a strict 8px grid define the look. Shadows are rare; depth comes from borders. Mode-specific colors add clarity in complex features.

**Brand Keywords**: bold-functional, privacy-first, tech-confident, high-contrast, mode-driven