The browser that puts you first | Brave — Design Report

Detected Language

Design Style

glassmorphism

2 backdrop-filter rules + 8 translucent white fills

gradient-rich / aurora

many gradient definitions

technical / mono accents

monospace font in use

dark-mode aware

prefers-color-scheme: dark media query

Palette

Colors

primary

#A0A5EB

2.31 on white · 9.08 on black · 236° 65% 77%

secondary

#000000

21 on white · 1 on black · 0° 0% 0%

accent

#EA3A0D

4.11 on white · 5.11 on black · 12° 89% 48%

Token Roles 13 tokens

background

#FFFFFF · 21:1 vs black

surface

#F0F2FF · 18.85:1 vs black

text-primary

#000000 · 21:1 vs white

text-secondary

#9CA3AF · 2.54:1 vs white

border

#46464A · 9.39:1 vs white

on-primary

#000000 · 21:1 vs white

on-secondary

#FFFFFF · 21:1 vs black

on-accent

#FFFFFF · 21:1 vs black

surface-container-lowest

#FFFFFF · 21:1 vs black

surface-container-low

#F8F9FA · 19.92:1 vs black

surface-container

#EBEEF0 · 18.02:1 vs black

surface-container-high

#E9E9F4 · 17.43:1 vs black

surface-container-highest

#DADCE8 · 15.38:1 vs black

Detected Palette 24 colors by frequency in source CSS

#000000

used 97× · 0° 0% 0%

#FFFFFF

used 38× · 0° 0% 100%

#0D1214

used 8× · 197° 21% 6%

#21272A

used 6× · 200° 12% 15%

#A0A5EB

used 4× · 236° 65% 77%

#EA3A0D

used 4× · 12° 89% 48%

#FB542B

used 4× · 12° 96% 58%

#FF7654

used 4× · 12° 100% 66%

#353DAB

used 4× · 236° 53% 44%

#4C54D2

used 4× · 236° 60% 56%

#737ADE

used 4× · 236° 62% 66%

#212529

used 4× · 210° 11% 15%

#F0F2FF

used 4× · 232° 100% 97%

#9CA3AF

used 4× · 218° 11% 65%

#46464A

used 4× · 240° 3% 28%

#767680

used 4× · 240° 4% 48%

#EBEEF0

used 4× · 204° 14% 93%

#F8F9FA

used 2× · 210° 17% 98%

#DADCE8

used 2× · 231° 23% 88%

#E9E9F4

used 2× · 240° 33% 94%

#AEB1C2

used 2× · 231° 14% 72%

#495057

used 2× · 210° 9% 31%

#868E96

used 2× · 210° 7% 56%

#1E2029

used 2× · 229° 15% 14%

Surface Treatments

Gradients

radial-gradient(at 2% 78%, #b8b7e1 0px, transparent 50%), radial-gradient(at 50% 7%, #f4c071 0px, transparent 50%), radial-gradient(at 89% 10%, #ff8a66 0px, transparent 50%), radial-gradient(at 77% 85%, #413ee5 0px, transparent 50%), radial-gradient(at 0% 100%, #9999ff 0px, transparent 50%), radial-gradient(at 0% 0%, #f4f4f6 0px, transparent 50%)

linear-gradient(305.95deg,#bf14a2 0%,#f73a1c 98.59%)

linear-gradient(to right,#fad3e5,#d3ccf5,#d4e3fc)

Type System

Typography

display

inherit

100px · 100 · LH 1 · LS -.0875rem

The browser that puts you first | Brave

headline-lg

inherit

40px · 100 · LH 1 · LS -.0875rem

The browser that puts you first | Brave

headline-md

inherit

30px · 100 · LH 1 · LS -.0875rem

The browser that puts you first | Brave

title-lg

inherit

20px · 100 · LH 1.4

Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.

body-lg

inherit

18px · 100 · LH 1.4

Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.

body-md

inherit

16px · 100 · LH 1.4

Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.

label-md

inherit

14px · 100 · LH 1.4

Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.

Detected Font Stacks

FlechaMpoppinsPoppinsInter Variableinter variablePoppins,Inter Variable,Helvetica,ui-sans-serif,system-ui,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emojiui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,liberation mono,courier new,monospaceinherit

Structure

Layout

Container

Section padding: — · card padding: —

Grid

12-column reference grid · gap —

Spacing Scale

unit

4px

xs

3px

sm

8px

md

16px

lg

32px

xl

64px

detected

.1875rem

detected

.25rem

detected

.5rem

detected

.65rem

detected

.75rem

detected

1rem

detected

1.25rem

detected

1.5rem

detected

1.8rem

detected

2rem

Breakpoints

550px640px744px1024px1280px1536px

Geometry

Shapes

md

8px

lg

16px

pill

9999px

r4

1rem

r5

.5rem

r6

20%

Tokens in Context

Components

button-primary

transitionopacity 500ms cubic-bezier(0.4, 0, 0.2, 1)

button-secondary

padding10px 20px

navigation-link

padding0px 0px

card

background{colors.surface}

border1px solid {colors.border}

radius16px

Animation

Motion

Keyframes 4 found

@keyframes fade-in

0%{opacity:0}100%{opacity:1}

@keyframes fade-out

0%{opacity:1}100%{opacity:0}

@keyframes pulse

50%{content:var(--tw-content);opacity:.5}

@keyframes fade-appear

from{opacity:0}to{opacity:1}

Applied Animations

.3s ease 0s 1 normal forwards running fade-in.15s ease 0s 1 normal forwards running fade-out

Easing Curves

cubic-bezier(.4,0,.2,1)cubic-bezier(.4,0,1,1)cubic-bezier(0,0,.2,1)

Transitions

padding-top .3s ease-outbox-shadow 0.12s ease-in-out, color 0.12s ease-in-out, border-color 0.12s ease-in-out, opacity 0.12s ease-in-out, transform 0.12s ease-in-outbackground .12s ease-in-out,var(--default-transition)var(--default-transition)all .3s ease-in-out.15s step-startmax-height .5s ease-out,opacity .5s ease-outopacity .3s ease-in,display .3s,overlay .3s

Proof

Live Preview

Complete Reference

Full design.md Specification

Design Specification — The browser that puts you first | Brave

Field	Value
Site / Project	https://brave.com/
Analyzed on	2026-08-25
Analysis mode	Automated code extraction (no AI)

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#EA3A0D). All type is set in FlechaM. Detected font weights: 100, 200, 300, 400, 500, 600, 700, 800, 900. Detected style signatures: glassmorphism; gradient-rich / aurora; technical / mono accents; dark-mode aware.

Logo asset(s): https://brave.com/static-assets/images/brave-logo-sans-text.svg · https://brave.com/static-assets/images/brave-logo-text-only.svg

Color System

Detected palette (by frequency)

Hex	RGB	HSL	Count
`#000000`	0, 0, 0	0° 0% 0%	97
`#FFFFFF`	255, 255, 255	0° 0% 100%	38
`#0D1214`	13, 18, 20	197° 21% 6%	8
`#21272A`	33, 39, 42	200° 12% 15%	6
`#A0A5EB`	160, 165, 235	236° 65% 77%	4
`#EA3A0D`	234, 58, 13	12° 89% 48%	4
`#FB542B`	251, 84, 43	12° 96% 58%	4
`#FF7654`	255, 118, 84	12° 100% 66%	4
`#353DAB`	53, 61, 171	236° 53% 44%	4
`#4C54D2`	76, 84, 210	236° 60% 56%	4
`#737ADE`	115, 122, 222	236° 62% 66%	4
`#212529`	33, 37, 41	210° 11% 15%	4
`#F0F2FF`	240, 242, 255	232° 100% 97%	4
`#9CA3AF`	156, 163, 175	218° 11% 65%	4
`#46464A`	70, 70, 74	240° 3% 28%	4
`#767680`	118, 118, 128	240° 4% 48%	4
`#EBEEF0`	235, 238, 240	204° 14% 93%	4
`#F8F9FA`	248, 249, 250	210° 17% 98%	2
`#DADCE8`	218, 220, 232	231° 23% 88%	2
`#E9E9F4`	233, 233, 244	240° 33% 94%	2

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Token	Hex	RGB	HSL
`--color-primary`	`#A0A5EB`	160, 165, 235	236° 65% 77%
`--color-accent`	`#EA3A0D`	234, 58, 13	12° 89% 48%
`--color-background`	`#FFFFFF`	255, 255, 255	0° 0% 100%
`--color-surface`	`#F0F2FF`	240, 242, 255	232° 100% 97%
`--color-text-primary`	`#000000`	0, 0, 0	0° 0% 0%
`--color-secondary`	`#000000`	0, 0, 0	0° 0% 0%
`--color-text-secondary`	`#9CA3AF`	156, 163, 175	218° 11% 65%
`--color-border`	`#46464A`	70, 70, 74	240° 3% 28%
`--color-on-primary`	`#000000`	0, 0, 0	0° 0% 0%
`--color-on-secondary`	`#FFFFFF`	255, 255, 255	0° 0% 100%
`--color-on-accent`	`#FFFFFF`	255, 255, 255	0° 0% 100%

Surface ramp (derived from detected light neutrals)

Token	Hex
`--color-surface-container-lowest`	`#FFFFFF`
`--color-surface-container-low`	`#F8F9FA`
`--color-surface-container`	`#EBEEF0`
`--color-surface-container-high`	`#E9E9F4`
`--color-surface-container-highest`	`#DADCE8`

Gradients

radial-gradient(at 2% 78%, #b8b7e1 0px, transparent 50%), radial-gradient(at 50% 7%, #f4c071 0px, transparent 50%), radial-gradient(at 89% 10%, #ff8a66 0px, transparent 50%), radial-gradient(at 77% 85%, #413ee5 0px, transparent 50%), radial-gradient(at 0% 100%, #9999ff 0px, transparent 50%), radial-gradient(at 0% 0%, #f4f4f6 0px, transparent 50%)
linear-gradient(305.95deg,#bf14a2 0%,#f73a1c 98.59%)
linear-gradient(to right,#fad3e5,#d3ccf5,#d4e3fc)

> 1 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: FlechaM — stack: FlechaM

Font stacks (most used first)

FlechaM
poppins
Poppins
Inter Variable
inter variable
Poppins,Inter Variable,Helvetica,ui-sans-serif,system-ui,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji
ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,liberation mono,courier new,monospace
inherit
system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Helvetica,Arial,sans-serif
Inter Variable,Poppins,Helvetica,ui-sans-serif,system-ui,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji

Derived type scale

Token	Size
display	100px
headline-lg	40px
headline-md	30px
title-lg	20px
body-lg	18px
body-md	16px
label-md	14px

Font sizes (by frequency)

Size	Count
1.875rem	14
4.375rem	13
1.25rem	12
1.5rem	9
1.125rem	7
5rem	6
6.25rem	6
2.5rem	5
.875rem	4
2.25rem	3
8px	3
15px	2
20px	2
.9375rem	2
1em	1
16px	1
14px	1
30px	1
3.375rem	1
1rem	1

Weights in use: 100, 200, 300, 400, 500, 600, 700, 800, 900

Line heights (by frequency)

Value	Count
1	124
1.2	115
2.5rem	16
1.875rem	12
4.6875rem	9
1.25rem	7
5.9375rem	6
2.1875rem	5
1.5625rem	4
2.8125rem	3

Letter spacing (by frequency)

Value	Count
-.0875rem	11
-.06rem	9
-.1rem	8
-.075rem	7
-.0375rem	7
-.125rem	6
-.05rem	5
-.045rem	5

Spacing

Derived spacing scale

Token	Value
unit	4px
xs	3px
sm	8px
md	16px
lg	32px
xl	64px

Raw values (by frequency)

Value	Count
1rem	5
1.5rem	5
.75rem	4
2rem	3
.25rem	2
.1875rem	1
2.5rem	1
.5rem	1
1.25rem	1
.65rem	1
42px	1
1.8rem	1
4rem	1

Borders & Radius

Derived radius tokens

Token	Value
md	`8px`
lg	`16px`
pill	`9999px`

Raw values (resolved, by frequency)

Radius	Count
`16px`	5
`8px`	3
`1rem`	2
`0`	2
`.5rem`	1
`20%`	1
`9999px`	1

Layout

Container max-width: 1280px

Grid columns (largest detected grid): 3

Breakpoints

550px
640px
744px
1024px
1280px
1536px

Animation & Motion

Transitions

padding-top .3s ease-out
`box-shadow 0.12s ease-in-out, color 0.12s ease-in-out,

border-color 0.12s ease-in-out, opacity 0.12s ease-in-out,

transform 0.12s ease-in-out`

background .12s ease-in-out,
all .3s ease-in-out
.15s step-start
max-height .5s ease-out,opacity .5s ease-out
opacity .3s ease-in,display .3s,overlay .3s

Easing curves

cubic-bezier(.4,0,.2,1)
cubic-bezier(.4,0,1,1)
cubic-bezier(0,0,.2,1)

Keyframes

@keyframes fade-in { 0%{opacity:0}100%{opacity:1} }
@keyframes fade-out { 0%{opacity:1}100%{opacity:0} }
@keyframes pulse { 50%{content:var(--tw-content);opacity:.5} }
@keyframes fade-appear { from{opacity:0}to{opacity:1} }

Animations

.3s ease 0s 1 normal forwards running fade-in
.15s ease 0s 1 normal forwards running fade-out

Components

Extracted from the page's own interactive elements (classes → resolved CSS values).

button-primary — sample text: “Get Brave”

Property	Value
transition	`opacity 500ms cubic-bezier(0.4, 0, 0.2, 1)`

button-secondary — sample text: “vs Brave vs Chrome”

Property	Value
padding	`10px 20px`

navigation-link

Property	Value
padding	`0px 0px`

CTA labels found on page

Yes
Dismiss
Desktop
Android
iOS
Shields adblocker
VPN
Privacy features

Effects

backdrop-filter: blur(16px)

Source Design Tokens (CSS custom properties)

:root {
  --footnotes: "Footnotes";
  --leo-color-legacy-background1: #fff;
  --leo-color-legacy-background2: #f8f9fa;
  --leo-color-legacy-disabled: #dadce8;
  --leo-color-legacy-divider1: #e9e9f4;
  --leo-color-legacy-focus-border: #a0a5eb;
  --leo-color-legacy-interactive1: #ea3a0d;
  --leo-color-legacy-interactive2: #fb542b;
  --leo-color-legacy-interactive3: #ff7654;
  --leo-color-legacy-interactive4: #353dab;
  --leo-color-legacy-interactive5: #4c54d2;
  --leo-color-legacy-interactive6: #737ade;
  --leo-color-legacy-interactive7: #212529;
  --leo-color-legacy-interactive8: #aeb1c2;
  --leo-color-legacy-text1: #212529;
  --leo-color-legacy-text2: #495057;
  --leo-color-legacy-text3: #868e96;
  --leo-color-blue-10: var(--leo-color-primitive-blue-95);
  --leo-color-blue-20: var(--leo-color-primitive-blue-90);
  --leo-color-blue-30: var(--leo-color-primitive-blue-60);
  --leo-color-blue-40: var(--leo-color-primitive-blue-50);
  --leo-color-blue-5: var(--leo-color-primitive-blue-98);
  --leo-color-blue-50: var(--leo-color-primitive-blue-40);
  --leo-color-blue-60: var(--leo-color-primitive-blue-25);
  --leo-color-blue-70: var(--leo-color-primitive-blue-10);
  --leo-color-blurple-10: var(--leo-color-primitive-blurple-95);
  --leo-color-blurple-20: var(--leo-color-primitive-blurple-90);
  --leo-color-blurple-30: var(--leo-color-primitive-blurple-60);
  --leo-color-blurple-40: var(--leo-color-primitive-blurple-50);
  --leo-color-blurple-5: var(--leo-color-primitive-blurple-98);
  --leo-color-blurple-50: var(--leo-color-primitive-blurple-40);
  --leo-color-blurple-60: var(--leo-color-primitive-blurple-25);
  --leo-color-blurple-70: var(--leo-color-primitive-blurple-10);
  --leo-color-button-background: var(--leo-color-schemes-primary);
  --leo-color-button-disabled: rgba(70, 70, 74, 0.2);
  --leo-color-button-error-background: var(--leo-color-primitive-red-40);
  --leo-color-button-error-text: var(--leo-color-primitive-red-100);
  --leo-color-button-hover: rgba(0, 0, 0, 0.05);
  --leo-color-button-success-background: var(--leo-color-primitive-green-40);
  --leo-color-button-success-text: var(--leo-color-primitive-green-100);
  --leo-color-container-background: var(--leo-color-primitive-neutral-100);
  --leo-color-container-disabled: var(--leo-color-primitive-neutral-90);
  --leo-color-container-highlight: var(--leo-color-primitive-neutral-95);
  --leo-color-container-interactive: var(--leo-color-primitive-primary-95);
  --leo-color-desktopbrowser-chrome-background-desktop: var(--leo-color-primitive-neutral-100);
  --leo-color-desktopbrowser-menu-background: var(--leo-color-primitive-neutral-100);
  --leo-color-desktopbrowser-menu-background-hover: var(--leo-color-primitive-neutral-95);
  --leo-color-desktopbrowser-menu-divider: var(--leo-color-primitive-neutral-90);
  --leo-color-desktopbrowser-omnibar-background-active: var(--leo-color-primitive-neutral-100);
  --leo-color-desktopbrowser-omnibar-background-desktop: var(--leo-color-primitive-neutral-95);
  --leo-color-desktopbrowser-omnibar-background-hover-item: var(--leo-color-primitive-neutral-95);
  --leo-color-desktopbrowser-omnibar-background-selected-item: var(--leo-color-primitive-neutral-95);
  --leo-color-desktopbrowser-omnibar-button-active: var(--leo-color-primitive-neutral-90);
  --leo-color-desktopbrowser-omnibar-button-hover: var(--leo-color-primitive-neutral-98);
  --leo-color-desktopbrowser-omnibar-divider: var(--leo-color-primitive-neutral-95);
  --leo-color-desktopbrowser-omnibar-split-view-icon-active: var(--leo-color-primitive-neutral-100);
  --leo-color-desktopbrowser-omnibar-split-view-icon-background: var(--leo-color-primitive-neutral-90);
  --leo-color-desktopbrowser-tabbar-active-button-background: var(--leo-color-primitive-neutral-100);
  --leo-color-desktopbrowser-tabbar-active-tab-horizontal: var(--leo-color-primitive-neutral-98);
  --leo-color-desktopbrowser-tabbar-active-tab-vertical: var(--leo-color-primitive-neutral-95);
}

Do's and Don'ts

Do

Do reserve the accent #EA3A0D for interactive highlights and key moments — it is used sparingly on the source page.
Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
Do stick to the detected font weight(s): 100, 200, 300, 400, 500, 600, 700, 800, 900.
Do align spacing to the 4px base unit derived from the page.

Don't

Don't introduce colors outside the detected palette — every hue above was found in the source.
Don't add drop shadows; the source page relies on borders and surface shifts for depth, not elevation.

Design Tokens (copy-paste)

:root {
  --color-primary: #A0A5EB;
  --color-accent: #EA3A0D;
  --color-background: #FFFFFF;
  --color-surface: #F0F2FF;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #9CA3AF;
  --color-border: #46464A;
  --color-on-primary: #000000;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F8F9FA;
  --color-surface-container: #EBEEF0;
  --color-surface-container-high: #E9E9F4;
  --color-surface-container-highest: #DADCE8;
  --font-sans: FlechaM;
  --font-size-display: 100px;
  --font-size-headline-lg: 40px;
  --font-size-headline-md: 30px;
  --font-size-title-lg: 20px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
  --space-xs: 3px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --tracking-display: -.0875rem;
  --container-max: 1280px;
}