--- 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 | Role | Value | Where | |------|-------|-------| | Blue-violet | `#434fcf`, deep `#3a2ecd` | Buttons, links, bands | | Ink | `#1c1c1d` | Titles and body | | Charcoal | `#252527` | Dark bands | | Page | `#fafafb`, `#ffffff` | Surfaces | | Peach and sky | `#ffe1d4`, `#e9f3ff` | Feature cards | | Text on dark | `#e4e4e5`, `#c9c9ca` | Dark 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.