---
version: alpha
name: Brave
description: Near-white canvas, indigo-blurple primary CTAs, a bold editorial serif display font (FlechaM), thick 2px dark borders, and pill-shaped buttons — a newspaper-meets-browser aesthetic that communicates trust through typographic confidence.

colors:
  # Surfaces
  background: "#fafafb"
  surface: "#ffffff"
  surface-dark: "#252527"

  # Text / ink
  ink: "#1c1c1d"
  ink-secondary: "#464649"
  ink-muted: "#909093"
  on-background: "#1c1c1d"
  on-surface: "#1c1c1d"

  # Brand accent — Leo/Blurple
  primary: "#434fcf"
  primary-deep: "#3a2ecd"
  primary-container: "#d7dbff"
  on-primary: "#ffffff"

  # Interactive / states
  focus-ring: "#a0a5eb"
  link: "#434fcf"
  link-visited: "#6c355b"
  link-dark: "#bcc6f3"

  # Feedback
  success: "#268f4f"
  warning: "#b08c00"
  error: "#b4020e"
  info: "#066cff"

  # Borders
  border: "#1c1c1d"
  border-subtle: "#c9c9ca"  # was rgba(201,201,202,0.4) — flattened over #fafafb
  border-muted: "#e4e4e5"

  # Gradient orbs (hero atmosphere — approximate opaque from radial stops)
  orb-orange: "#ff8a66"   # was rgb(255,138,102) radial stop
  orb-warm: "#f4c071"     # was rgb(244,192,113) radial stop
  orb-blurple: "#413de5"  # was rgb(65,62,229) radial stop
  orb-lavender: "#b8b7e1" # was rgb(184,183,225) radial stop
  orb-soft-purple: "#9999ff" # was rgb(153,153,255) radial stop

  # Shadow tints
  shadow-soft: "#000000"  # shadows use black-based rgba — see elevation

typography:
  display-hero:
    fontFamily: "FlechaM, Georgia, 'Times New Roman', serif"
    fontSize: 120px
    fontWeight: 500
    lineHeight: 0.86
    letterSpacing: -2.4px
  display:
    fontFamily: "FlechaM, Georgia, 'Times New Roman', serif"
    fontSize: 70px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -1.4px
  heading-section:
    fontFamily: "Poppins, 'Inter Variable', Helvetica, ui-sans-serif, system-ui, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -1.6px
  heading-sub:
    fontFamily: "Poppins, 'Inter Variable', Helvetica, ui-sans-serif, system-ui, sans-serif"
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: -1.2px
  body-large:
    fontFamily: "'Inter Variable', Poppins, Helvetica, ui-sans-serif, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "'Inter Variable', Poppins, Helvetica, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-medium:
    fontFamily: "Poppins, 'Inter Variable', Helvetica, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "Poppins, 'Inter Variable', Helvetica, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Poppins, 'Inter Variable', Helvetica, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0px
  label:
    fontFamily: "Poppins, 'Inter Variable', Helvetica, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0px
  caption-overline:
    fontFamily: "Poppins, 'Inter Variable', Helvetica, ui-sans-serif, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 2.67
    letterSpacing: -0.3px
  caption:
    fontFamily: "-apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: -0.36px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 80px

rounded:
  none: 0px
  sm: 8px
  md: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  button-primary-hover:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  button-primary-focus:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 20px

  button-secondary-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary-deep}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 20px

  button-ghost:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 7px 16px

  button-ghost-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary-deep}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 7px 16px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 12px 32px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px

  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.border-muted}"
    rounded: "{rounded.md}"
    padding: 24px

  input:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.border-subtle}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 6px 16px

  input-focus:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 6px 16px

  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary-deep}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  badge-neutral:
    backgroundColor: "{colors.border-muted}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
---

# Brave Design System

## Overview

Brave's homepage is an argument made in type. The canvas opens at a cool near-white (`{colors.background}`) that hovers just off pure white — airy, clean, and deliberately unadorned. What immediately catches the eye is not a hero gradient or a product screenshot, but a display typeface that doesn't look like a tech company's font: **FlechaM**, a high-contrast serif at display scale, renders the headline "The browser that puts you first" with the confidence of a newspaper masthead. This is an intentional act of differentiation in a sea of geometric sans-serif browser marketing, and it works — FlechaM's wedge serifs and editorial warmth carry Brave's privacy-first message as a statement of principle, not a pitch.

Beneath the serif drama, the color system is restrained and purposeful. The primary accent is **Leo Blurple** (`{colors.primary}`) — a deeply saturated blue-purple that Brave's in-house Leo design system uses for all interactive elements: CTAs, links, focus rings, and selected states. It appears in two weights: the standard button indigo and a slightly deeper `{colors.primary-deep}` for hover and active states. The border regime is equally uncompromising: thick **2px solid `{colors.border}`** lines frame cards, segment navigation, and outline interactive controls. These dark borders read as editorial rigor — the visual equivalent of a bold rule in print design, asserting structure without softening it.

The hero section layers a quiet atmospheric gradient beneath the product message: five radial orb stops in warm orange (`{colors.orb-orange}`), golden amber (`{colors.orb-warm}`), deep blurple (`{colors.orb-blurple}`), and muted lavender (`{colors.orb-lavender}`) create a subtle aura without competing with the typography. Below, feature cards present in clean white with rounded-md corners and bold 2px borders — a disciplined grid that lets the content breathe while maintaining the editorial structural grid. Brave reads as a privacy brand that has earned confidence, and the design earns that same confidence through systematic restraint.

**Key Characteristics:**
- Near-white `{colors.background}` canvas — barely off pure white, not warm cream, not gray
- **FlechaM** as the display typeface — high-contrast serif at 120px with 0.86 line-height; the brand's strongest visual differentiator
- **Leo Blurple** `{colors.primary}` for all interactive states — buttons, links, focus, active
- Thick **2px `{colors.border}` border** on cards and controls — editorial newspaper rigor, not minimalism
- Pill-shaped CTAs (`{rounded.pill}`) — the one soft gesture in an otherwise structured system
- **Poppins** as the workhorse UI sans — heavy semibold weights (600–700) for all interface copy
- **Inter Variable** for body and running text — weight 400, generous 1.6 leading
- Atmospheric hero: five overlapping radial orb gradients (orange, amber, blurple, lavender, soft purple) layered behind flat type
- Feature card grid: white `{colors.surface}` with 16px radius and 2px dark borders
- No imagery in hero — typography carries the full brand weight

## Colors

### Primary
- **Near-White** (`{colors.background}`): The canvas. `#fafafb` — not pure white, just cool enough to give white elements (`{colors.surface}`) a subtle lift.
- **Pure White** (`{colors.surface}`): Card and panel fills. Contrasts cleanly against the near-white background.
- **Near-Black** (`{colors.ink}`): The dominant text color, used at 376 instances. Applied to headings, body, nav, and borders alike.

### Brand Accent
- **Leo Blurple** (`{colors.primary}`): All interactive elements — download CTAs, pill buttons, links. The Leo design system's `--leo-color-*` family is built around this blue-purple.
- **Deep Blurple** (`{colors.primary-deep}`): Hover and active states for the primary. Slightly shifted toward violet.
- **Blurple Container** (`{colors.primary-container}`): Tinted background for secondary elements, focus halos, and selection surfaces.

### Text Hierarchy
- **Ink Secondary** (`{colors.ink-secondary}`): `--leo-color-text-secondary` — paragraph text where full `{colors.ink}` is too heavy.
- **Ink Muted** (`{colors.ink-muted}`): Captions, meta labels, helper text.
- **Link Dark** (`{colors.link-dark}`): Links on dark/colored backgrounds.

### Interactive States
- **Focus Ring** (`{colors.focus-ring}`): `--leo-color-legacy-focus-border` — soft periwinkle ring, 3px offset.

### Semantic
- **Success** (`{colors.success}`): Confirmation states.
- **Warning** (`{colors.warning}`): `--leo-color-systemfeedback-warning-text` — amber on white.
- **Error** (`{colors.error}`): `--leo-color-button-error-background`.
- **Info** (`{colors.info}`): `--leo-color-primitive-blue-50`.

### Borders & Dividers
- **Border** (`{colors.border}`): Thick 2px dark stroke — the signature structural element.
- **Border Subtle** (`{colors.border-subtle}`): Light gray dividers at 1px.
- **Border Muted** (`{colors.border-muted}`): The lightest divider tier.

### Gradient Orbs (hero atmosphere)
The hero uses five overlapping radial gradients fading to transparent. These are atmospheric, not structural:
- `{colors.orb-orange}`, `{colors.orb-warm}`, `{colors.orb-blurple}`, `{colors.orb-lavender}`, `{colors.orb-soft-purple}`

## Typography

### Font Family
- **Display**: `FlechaM` — a high-contrast editorial serif. Self-hosted (FlechaM-Medium.woff2). Fallbacks: `Georgia, 'Times New Roman', serif`.
- **UI / Marketing**: `Poppins` — geometric sans, weights 400/500/600/700. Self-hosted across latin + latin-ext.
- **Body / Running Text**: `Inter Variable` — full variable axis, weights 400–600. Self-hosted.

### Hierarchy

The complete type scale lives in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | Main hero headlines — FlechaM 120px, line-height 0.86 |
| `display` | Section display headings — FlechaM 70px |
| `heading-section` | Feature section titles — Poppins 40px 600 |
| `heading-sub` | Card headings, feature titles — Poppins 30px 600 |
| `body-large` | Lead paragraphs, intros — Inter 20px 400 |
| `body` | Running text — Inter 16px 400 |
| `body-medium` | Emphasized body — Poppins 16px 500 |
| `nav-link` | Primary navigation — Poppins 16px 600 |
| `button-ui` | Button labels, CTAs — Poppins 14px 600 |
| `label` | Form labels, card labels — Poppins 14px 600 |
| `caption-overline` | Section labels, overlines — Poppins 15px 700 uppercase |
| `caption` | Meta, footnotes — system-ui 12px 600 |

### Principles
- **FlechaM is the editorial voice**: the display serif at 120px with 0.86 leading creates a newspaper-masthead gravity that no geometric sans can replicate at this scale.
- **Negative letter-spacing scales with size**: -2.4px at 120px, -1.6px at 40px — tight optical compensation for display sizes.
- **Poppins semibold is the UI workhorse**: weight 600 for nav, headings, buttons, labels. Never weight 400 for interface copy.
- **Inter Variable for reading copy**: 400 weight, generous 1.6 line-height — legibility-optimized for paragraphs.
- **No mixing display roles**: FlechaM leads heroes, Poppins owns UI, Inter owns body. Three families with distinct roles.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

`{spacing.md}` (16px) is the internal padding workhorse. `{spacing.lg}` (24px) governs card internal padding and column gutters. Sections use 80px vertical breathing room.

### Grid & Container
- Max content width: ~1300px (breakpoint `1300px`)
- Desktop: centered multi-column feature grid (3 cards), single-column hero
- Navigation: horizontal, sticky, logo-left / nav-center / CTA-right with border-bottom at scroll

### Whitespace Philosophy
- **Typography-led density**: the FlechaM hero is densely set (0.86 line-height), then generous whitespace follows in feature sections — a push-and-release rhythm.
- **Cards breathe with 24px internal padding** and clear 2px border framing.
- **Section-level vertical rhythm uses 64–80px separators**.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Navigation, text, inline elements |
| Ambient (Level 1) | `0 8px 40px 0 rgba(0,0,0,0.2)` | Feature cards, modal-adjacent panels |
| Deep (Level 2) | `0 8px 40px 0 rgba(0,0,0,0.35)` | High-prominence floating elements |
| Layered (Level 3) | `0 8px 10px -6px rgba(0,0,0,0.33), 0 25px 50px -12px rgba(0,0,0,0.33)` | Deep modals, dropdowns |
| Focus Ring | `0 0 0 3px {colors.focus-ring}` | Keyboard focus — periwinkle halo |

**Shadow Philosophy**: Brave uses **pure black rgba shadows** with no brand-color tinting. The approach is pragmatic and functional — shadows are elevation signals, not brand expressions. Cards use a soft single-layer diffuse drop (8px+40px spread), not the stacked multi-shadow approach. The overall effect is unobtrusive: shadows announce layer without drawing attention to themselves.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Section edges, nav bar, structural dividers |
| `sm` | 8px | Inputs, dropdowns, small interactive chips |
| `md` | 16px | Feature cards, panels, images |
| `pill` | 9999px | Buttons — all CTA buttons are pill-shaped |

Brave operates a **binary radius system**: either 16px for containers or fully pill for buttons. There is no intermediate (e.g., 4px or 24px). The pill button is the soft-gesture counterpoint to the system's structural 2px dark borders — together they create a deliberate contrast: hard frames, soft actions.

## Components

The complete component spec lives in the `components:` token block above.

### Button Variants
- **`button-primary`** — Leo Blurple fill (`{colors.primary}`), white text, pill radius, Poppins 14px 600. The primary CTA. "Get Brave →" and "Download" use this style.
- **`button-secondary`** — Transparent background, Leo Blurple text, 1px blurple border, pill radius. Comparison CTAs ("vs Chrome", "vs Edge").
- **`button-ghost`** — White fill, Leo Blurple text, blurple border. Used in nav and comparison tables.

### Cards
- **`card`** — White `{colors.surface}`, 16px radius, 2px `{colors.border}` stroke, 24px padding. The core feature card for the product grid.
- **`card-dark`** — Dark `{colors.surface-dark}` for dark sections (comparison tables, footer areas).

### Inputs
- **`input`** — Dark-surface background, subtle text, 8px radius, generous left padding for icon space. No visible border at rest.
- **`input-focus`** — Same structure with active text color on focus.

### Badges
- **`badge`** — Blurple-tinted container, deep blurple text, pill radius. Category labels and feature flags.
- **`badge-neutral`** — Light border-color fill, dark ink. Neutral classification.

### Navigation
**`nav-bar`** — Sticky near-white bar, Poppins 16px 600 nav links in `{colors.ink}`, Leo Blurple pill CTA right-aligned. Gains a 1px `{colors.border-subtle}` bottom border on scroll.

## Do's and Don'ts

### Do
- Use `FlechaM` at weight 500 for hero display — its editorial authority is Brave's primary visual differentiator
- Use **2px solid `{colors.border}`** on feature cards and comparison tables — the thick dark border is structural, not decorative
- Keep buttons pill-shaped (`{rounded.pill}`) in all interactive contexts — it's the system's one consistent softening gesture
- Use Leo Blurple (`{colors.primary}`) exclusively for interactive states: CTAs, links, focus rings, active indicators
- Set display text with negative letter-spacing: -2.4px at 120px, -1.6px at 40px — optical compensation at display scale
- Layer hero gradients as fading radial orbs (not flat fills) — orange, amber, and blurple at <50% opacity over `{colors.background}`
- Use `{colors.surface}` (white) for card fills over `{colors.background}` (near-white) — the contrast is subtle but intentional
- Apply `{typography.body}` (Inter Variable 400) for running paragraphs — never Poppins 400 for extended reading

### Don't
- Don't use FlechaM for body or UI text — it's a display-only voice; scale below 40px loses its authority
- Don't use thin 1px borders for card frames — the 2px dark border is the system's structural signature
- Don't use rounded corners between `{rounded.sm}` (8px) and `{rounded.md}` (16px) — the system is binary
- Don't add brand-tinted shadows — Brave's shadows are pure black rgba, not blurple or warm-tinted
- Don't stack more than two gradient orbs visibly — the hero atmosphere should feel ambient, not chromatic
- Don't use Poppins weight 400 for UI copy — semibold (600) is the minimum weight for any interface element
- Don't use `{colors.primary}` for decorative elements — reserve Leo Blurple strictly for interactive signaling
- Don't flatten the type scale below heading-sub (30px) with FlechaM — switch to Poppins for anything that isn't a headline

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <550px | Single column, hero type drops to ~48px, gradient orbs simplify |
| Mobile | 550–744px | Single column, nav collapses to hamburger, pill CTAs stack |
| Tablet | 744–1024px | 2-column feature grid, header nav visible |
| Desktop | 1024–1280px | 3-column feature grid, full hero layout |
| Large Desktop | >1280px | Centered at 1300px max-width, wider margin breathing room |

### Touch Targets
- All pill buttons are 40px+ tall
- Nav items have generous 16px vertical padding
- Cards have 24px padding providing easy tap regions

### Collapsing Strategy
- Hero FlechaM headline: 120px desktop → scales to ~40–48px on mobile, weight 500 maintained
- 3-column feature card grid → 2-column tablet → 1-column mobile
- Navigation: horizontal nav with right CTA → hamburger menu on tablet/mobile
- Gradient orbs in hero: 5 overlapping radial gradients → 2–3 simplified on mobile

### Image Behavior
- Product illustrations and screenshots maintain 16px `{rounded.md}` radius at all sizes
- Hero atmospheric gradient scales proportionally — never tiled
- Comparison screenshots use horizontal scroll on mobile if side-by-side

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (#fafafb)
- Text: `{colors.ink}` (#1c1c1d)
- Secondary text: `{colors.ink-secondary}` (#464649)
- Brand accent / CTA: `{colors.primary}` (#434fcf)
- Hover accent: `{colors.primary-deep}` (#3a2ecd)
- Card fill: `{colors.surface}` (#ffffff)
- Card border: `{colors.border}` (#1c1c1d), 2px solid
- Focus ring: `{colors.focus-ring}` (#a0a5eb)
- Muted border: `{colors.border-muted}` (#e4e4e5)

### Example Component Prompts

- "Create a Brave hero section: `{colors.background}` canvas. Behind the headline, layer five faint radial gradients fading to transparent: orange (`{colors.orb-orange}`) at top-center, amber (`{colors.orb-warm}`) at right, blurple (`{colors.orb-blurple}`) at bottom-right, lavender (`{colors.orb-lavender}`) at bottom-left, soft purple (`{colors.orb-soft-purple}`) at left edge — all at 40–50% opacity. Headline in FlechaM 120px weight 500, line-height 0.86, letter-spacing -2.4px, color `{colors.ink}`. Subhead Poppins 20px weight 400, color `{colors.ink}`. Primary CTA: pill button, `{colors.primary}` fill, white text, Poppins 14px 600."

- "Design a Brave feature card: `{colors.surface}` (white) background, `{rounded.md}` (16px) border-radius, `2px solid {colors.border}` border, 24px padding. Card heading in Poppins 30px 600 `{colors.ink}`, body in Inter 16px 400 `{colors.ink}`. Soft drop shadow: `0 8px 40px 0 rgba(0,0,0,0.2)`."

- "Build a Brave navigation bar: sticky, `{colors.background}` background, 1px `{colors.border-subtle}` bottom border on scroll. Logo left, nav links center in Poppins 16px 600 `{colors.ink}`, right-aligned pill CTA `{colors.primary}` fill, white text, `{rounded.pill}` radius, 12px 24px padding."

- "Create a Brave comparison table row: dark `{colors.surface-dark}` background, `{colors.border-muted}` text, Leo Blurple checkmarks (`{colors.primary}`) for Brave advantages, neutral `{colors.ink-muted}` for competitor columns. Row border: `1px solid {colors.border-subtle}`. Table header: Poppins 14px 700 uppercase, letter-spacing -0.3px."

- "Design a Brave download section banner: full-width, near-white `{colors.background}`, centered FlechaM 70px weight 500 headline in `{colors.ink}`, line-height 1.0, letter-spacing -1.4px. Below: Inter 20px 400 body text in `{colors.ink-secondary}`. Two pill buttons side by side — primary (`{colors.primary}` fill) and ghost (`{colors.surface}` fill, `{colors.primary}` text, 1px border) — both `{rounded.pill}`, Poppins 14px 600."

### Iteration Guide

1. **Start with `{colors.background}`** — not pure white. The `#fafafb` near-white is the system's canvas; `{colors.surface}` (pure white) is reserved for cards that need lift above it.
2. **FlechaM owns every headline above 40px.** Below 40px, switch to Poppins 600. Never mix the two in adjacent headings.
3. **Every interactive element is Leo Blurple** (`{colors.primary}`). Don't let decorative uses dilute its interactive signal.
4. **Pill buttons everywhere, 2px borders on containers.** This contrast — sharp structural frames, soft rounded actions — is Brave's signature tension.
5. **Negative tracking scales with type size**: -2.4px at 120px, -1.6px at 40px, -1.2px at 30px.
6. **Shadows are functional, not tinted**: pure black rgba, soft single-layer diffuse drop. No blurple shadows.
7. **Hero atmosphere = five radial orb gradients at low opacity** fading to `{colors.background}`. Warm-to-cool: orange, amber, blurple, lavender, soft purple. Never solid fills for hero backgrounds.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Brave. Brand names and trademarks belong to their respective owners.