Security & Privacy / iOS / Android / Web

Brave

Brave sounds like a magazine about privacy: an off-white page, a big serif headline, one blue-violet for action and round pills with pastel cards around them.

Download
  • #434FCF
  • #1C1C1D
  • #FAFAFB
  • #FFE1D4
  • #E9F3FF
  • #252527

Color

Every color token in the file, grouped by role.

Brand

  • primary#434FCF
  • on primary#FFFFFF

Surfaces

  • canvas#FFFFFF

Text

  • ink#1C1C1D
  • text on dark#E4E4E5
  • text on dark muted#C9C9CA

More

  • violet deep#3A2ECD
  • charcoal#252527
  • page#FAFAFB
  • peach#FFE1D4
  • sky#E9F3FF

Typography

Each style is set with the file's own family, size, weight and spacing.

  • FlechaMFlechaM is private and not available in open fonts. Shown in Crimson Pro, the closest open match.
  • PoppinsOpen font, shown as published.
  • display80px / 500 / 75px

    Brave

  • headline30px / 600 / 40px

    Brave

  • title18px / 600 / 24px

    The quick brown fox jumps over the lazy dog

  • body16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • button14px / 600 / 20px

    Continue to checkout

Shape

Corner radius tokens.

  • sm8px
  • lg16px
  • pill1000px

Spacing

The spacing scale, drawn to size.

  • sm8px
  • md11px
  • base16px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button large
    button-large
  • link pill
    link-pill
  • peach card
    peach-card
  • sky card
    sky-card
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 96 lines
version: alpha
name: Brave-design-analysis
description: "A privacy browser with an editorial home page: an off-white ground (#fafafb), charcoal ink (#1c1c1d), one blue-violet (#434fcf) for action, a high-contrast serif headline in Flecha, Poppins for text and fully round pills."
status: Draft
appVersion: "measured in a browser, 2026-10-06"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#434fcf"
  on-primary: "#ffffff"
  violet-deep: "#3a2ecd"
  ink: "#1c1c1d"
  charcoal: "#252527"
  canvas: "#ffffff"
  page: "#fafafb"
  peach: "#ffe1d4"
  sky: "#e9f3ff"
  text-on-dark: "#e4e4e5"
  text-on-dark-muted: "#c9c9ca"

typography:
  # Font note: "FlechaM" is a private font and is not available in open fonts. Closest open alternative: "Crimson Pro".
  display:
    fontFamily: "FlechaM, 'Crimson Pro', Georgia, serif"
    fontSize: 80px
    fontWeight: 500
    lineHeight: 75px
    letterSpacing: -1.6px
  headline:
    fontFamily: "Poppins, 'Inter Variable', Helvetica, ui-sans-serif, system-ui, sans-serif"
    fontSize: 30px
    fontWeight: 600
    lineHeight: 40px
    letterSpacing: -1.2px
  title:
    fontFamily: "Poppins, 'Inter Variable', Helvetica, ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 24px
  body:
    fontFamily: "Poppins, 'Inter Variable', Helvetica, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  button:
    fontFamily: "Poppins, 'Inter Variable', Helvetica, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 20px

rounded:
  sm: 8px
  lg: 16px
  pill: 1000px

spacing:
  sm: 8px
  md: 11px
  base: 16px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 36px
    padding: 0 12px
  button-large:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.title}"
    rounded: "{rounded.pill}"
    height: 60px
    padding: 16px
  link-pill:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 44px
    padding: 11px 16px
  peach-card:
    backgroundColor: "{colors.peach}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 24px
  sky-card:
    backgroundColor: "{colors.sky}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 24px

Overview

Brave is a privacy browser with a clean marketing site. The look is friendly and a little editorial: an off-white page, charcoal ink, one blue-violet for action and large serif headlines over Poppins text. [Observed]

What defines the look:

  1. Off-white and charcoal. Page #fafafb, ink #1c1c1d and dark bands #252527. [Measured]
  2. One blue-violet. #434fcf for buttons and links, with #3a2ecd for bands. [Measured]
  3. An editorial serif headline. Flecha at 80 on 75 at 500 with -1.6px tracking. [Measured]
  4. Poppins for everything else. 400 for text and 600 for section titles at 30. [Measured]
  5. Pills and pastel cards. 1000px pills with peach #ffe1d4 and sky #e9f3ff cards at 16px. [Measured]

Source for this file: the brave.com home page measured in a browser at 1440 and 390 wide, read on 2026-10-06. The Leo design system site was not read. The browser's own interface was not captured. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Blue-violet#434fcf, deep #3a2ecdButtons, links, bands
Ink#1c1c1dTitles and body
Charcoal#252527Dark bands
Page#fafafb, #ffffffSurfaces
Peach and sky#ffe1d4, #e9f3ffFeature cards
Text on dark#e4e4e5, #c9c9caDark bands

Typography

Flecha Medium sets the hero: 80 on 75 at 500 with -1.6px tracking. Poppins sets the rest: 30 on 40 at 600 with -1.2px for section titles, 16 on 24 at 400 for body and 12 to 18 at 600 for buttons. Inter Variable is also loaded. [Measured]

Shape and spacing

Buttons and links are 1000px pills, 36 to 60 high. Cards use 16, small parts 8, and some media use a 20 percent corner. [Measured]

Iconography and motion

Not measured in this pass. [Inferred]

Themes

Light with dark bands on the page measured. [Observed]

Platform: iOS

The Brave iOS app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Chevron plus previous title and the edge swipe, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

The browser's own bottom toolbar and tab switcher. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

The address bar is the main action. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The browser interface was not captured, so only the brand layer on the web is described. [Inferred]

Platform: Android

The Brave Android app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

System back and gesture, with an up arrow in the top bar, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

The browser's own toolbar and tab switcher. [Inferred]

Main action

Expected on Android: Floating action button.

The address bar is the main action. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The browser interface was not captured, so only the brand layer on the web is described. [Inferred]

Platform: Web

The brave.com home page, measured at 1440 and 390 wide. The browser interface was not measured.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A top bar with product links, a Search the Web pill and a Get Brave button. [Observed]

Main action

Expected on Web: Page-level button.

A blue-violet pill, 36 high with white semibold text. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Pills in solid and text-link forms, 36 to 60 high. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values at each breakpoint. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Pills measure 36 to 60 high. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Not applicable to the public pages measured. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

The responsive page keeps type and color and changes layout. [Measured]

Cross-platform consistency

Consistent across platforms: the blue-violet, Poppins and pill shapes. [Measured for web, Inferred for the apps]

Intentionally different: the browser interface was not measured. [Inferred]

Do's and Don'ts

Do

  • Use one blue-violet for buttons and links.
  • Set the hero in the serif.
  • Use pills for every button.
  • Use pastel cards for features.

Don't

  • Don't use the serif for body text.
  • Don't add a second action color.
  • Don't use sharp corners on buttons.

Known Gaps

  • The browser interface, settings and the Leo assistant were not measured.
  • The iOS and Android apps were not captured. Their sections are inferred from the web design and platform conventions.
  • Icons, motion and exact breakpoints were not measured.
  • Account deletion and store policy rules were not verified.
  • The Flecha alternative is a judgement call because its high contrast and tight setting are matched only roughly.
  • The Leo design system site was not read, so role names are not given.