---
title: "Brex design system"
variant: extended
source: https://www.brex.com/
captured_at: 2026-10-12
theme: light
industry: fintech
generator: Design DNA (https://four.wiralomi.com/style/brex-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Brex · Design System

> Calm, confident finance with a sharp orange signal.

**Theme:** light · **Industry:** fintech · **Source:** https://www.brex.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Brex pairs a restrained monochrome interface with vivid orange actions and polished finance-product imagery. Spacious editorial sections give way to compact product cards, customer proof, and a high-contrast dark closing area.

## North star

Keep the canvas quiet and spacious, then use Brex orange only where the user should act or follow a link.

## Overview

The page builds its identity from a near-white canvas, ink-dark headlines, muted gray supporting text, and a concentrated Brex orange accent. Orange is reserved for primary actions and occasional text links, keeping the interface calm while giving conversion points a clear visual signal. Inter carries nearly all of the typography: headlines are large, medium-weight, tightly tracked, and left-aligned in the hero, while centered headings organize many later sections. The layout alternates broad open white areas with pale lavender-gray bands, using centered trust and solution blocks to break up the long scroll. Product-interface visuals and card photography are set beside concise copy in alternating two-column feature rows; customer portraits and editorial imagery add human warmth. Cards and controls use modest corner rounding, light hairlines, and very restrained shadows rather than deep elevation. A near-black CTA and footer create a deliberate high-contrast finish.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Brex Signal | `#ff3d00` | `--color-brex-signal` | accent | Primary CTA fill, button border, and select “Learn more” links. |
| Pure Canvas | `#ffffff` | `--color-pure-canvas` | surface | Main page background and light content surfaces; also appears in button text. |
| Quiet Silver | `#b9bbc6` | `--color-quiet-silver` | neutral | Muted navigation and footer text, especially low-emphasis labels. |
| Lavender Mist | `#f3f3f7` | `--color-lavender-mist` | surface | Pale section bands, trust-logo backdrop, and subtle borders. |
| Midnight Ink | `#000710` | `--color-midnight-ink` | brand | Dark closing CTA and footer backgrounds, with light text and content. |
| Graphite Ink | `#15191e` | `--color-graphite-ink` | semantic | Primary headings, body copy, and high-emphasis navigation on light surfaces. |
| Slate Gray | `#60646c` | `--color-slate-gray` | neutral | Secondary copy, descriptions, and subdued links on white backgrounds. |
| Cool Edge | `#e3e6ee` | `--color-cool-edge` | semantic | Measured control and button border color; not a defining page-wide surface. |
| Soft Pewter | `#8b8d98` | `--color-soft-pewter` | neutral | Low-emphasis navigation and button text in selected interface states. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Pure Canvas) · `--color-surface` → `#000710` (Midnight Ink) · `--color-surface-2` → `#f3f3f7` (Lavender Mist) · `--color-text` → `#15191e` (Graphite Ink) · `--color-text-muted` → `#b9bbc6` (Quiet Silver) · `--color-text-subtle` → `#60646c` (Slate Gray) · `--color-border` → `#f3f3f7` (Lavender Mist) · `--color-accent` → `#ff3d00` (Brex Signal) · `--color-on-accent` → `#fcfcfd`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#15191e` | `#ffffff` | 17.65:1 | AAA |
| `#15191e` | `#000710` | 1.15:1 | fail |
| `#15191e` | `#f3f3f7` | 15.95:1 | AAA |
| `#b9bbc6` | `#ffffff` | 1.91:1 | fail |
| `#b9bbc6` | `#000710` | 10.59:1 | AAA |
| `#b9bbc6` | `#f3f3f7` | 1.73:1 | fail |
| `#60646c` | `#ffffff` | 5.94:1 | AA |
| `#60646c` | `#000710` | 3.41:1 | AA-large |
| `#60646c` | `#f3f3f7` | 5.36:1 | AA |
| `#ff3d00` | `#ffffff` | 3.55:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| inter | `--font-body` | webfont | 400, 500, 600 | Primary typeface for navigation, headlines, body text, links, buttons, and captions. | Inter |
| flecha | `--font-flecha` | webfont | 500 | Small editorial serif accent, most visibly in customer-story quotation styling. | Literata |

- **inter:** Use measured 400–600 weights; headlines are medium weight with tight negative tracking, while nav remains untracked.
- **flecha:** Measured at weight 500 with minimal use; reserve for occasional quote or editorial emphasis, not interface text.

### Type scale — Perfect Fourth (ratio ≈ 1.351, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 500 | 1 | -0.02em | — | inter | Oversized hero or campaign headline. |
| h1 | 48px | 500 | 1 | -0.02em | — | inter | Primary page or section headline. |
| h2 | 36px | 500 | 1 | -0.02em | — | inter | Major section titles, often centered. |
| h3 | 24px | 500 | 1.21 | -0.02em | — | inter | Feature titles and prominent card headings. |
| h4 | 20px | 500 | 1.2 | -0.02em | — | inter | Smaller feature and subsection headings. |
| body | 16px | 400 | 1.5 | -0.02em | — | inter | Supporting descriptions and standard explanatory copy. |
| caption | 12px | 400 | 1.33 | -0.02em | — | inter | Fine print, image notes, and compact metadata. |
| button | 14px | 600 | 1.43 | -0.01em | — | inter | Primary action labels such as “Get started”. |
| nav | 16px | 400 | 1.5 | 0 | — | inter | Header and footer navigation links. |
| link | 16px | 400 | 1.5 | -0.02em | — | inter | Inline actions such as “Learn more” and feature links. |

OpenType features in use: `"calt" 0, "cv01", "cv05" 0, "cv10", "liga" 0, "ss01" 0, "ss03", "zero" 0`.

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 1, 4, 8, 16, 20, 24, 32, 48, 72, 80 px.
- Section rhythm 48px · element gap 8px · card padding — · max content width 1296px.

Use a centered content frame capped at the measured 1296px maximum, with broad page margins and comfortable density. The homepage alternates a two-column hero and feature splits with centered logo, product, and solution sections; several feature rows reverse image and text placement. The 8px-based spacing system creates generous separation between sections and compact relationships within controls. Preserve broad white intervals, align copy consistently within each grid cell, and use pale or dark full-width bands as occasional rhythm changes.

## Shape & elevation

- Radius: button `10px` · xs `6px` · sm `10px` · md `12px`
- Shadow `hairline` (other): `rgba(66, 87, 138, 0.15) 0px 1px 0px 0px`
- Shadow `hairline-2` (other): `rgba(0, 0, 0, 0.04) 0px 1px 1px 0px`
- Motion: standard transition `0.5s ease` on interactive elements.

The interface is mostly flat: white and pale gray surfaces, subtle hairline borders, and only faint measured shadows. Use modest rounded corners on buttons and media cards, without floating-panel effects. Treat product imagery as its own visual layer, and reserve strong contrast for the dark CTA and footer rather than adding extra depth.

## Imagery

Use crisp product photography and realistic device mockups for cards, phones, and finance interfaces. Place visuals large beside concise copy, or arrange interface previews in compact product tiles. Customer-story photography and editorial cards add human context; warm orange tones may appear inside imagery, but should not be mistaken for the interface palette. Avoid decorative gradients or busy illustration styles.

## Components

### Header navigation

A white horizontal header with the Brex mark, grouped product navigation, utility links, and a right-aligned orange “Get started” action.

### Hero email form

A two-column hero pairs a bold left-aligned headline and muted copy with a compact email field and orange submit button; a secondary video link sits below.

### Primary CTA

Use #ff3d00 fill, light label text, and measured button corner variants of 8px or 10px; keep the treatment simple and flat.

### Product feature row

Alternate product or interface imagery and text in two columns, with a concise heading, subdued description, and orange inline link.

### Solution cards

Three audience cards combine cropped people photography, compact headings, short copy, and small orange links on a pale section band.

### Logo and proof band

Center a trust headline above a grid of subdued customer marks on a #f3f3f7 background.

### Dark closing panel

Use a #000710 CTA and footer area with light text, muted footer links, and a product image beside the final action.

### Measured component styles

- **Primary button** (“Get started”): background #ff3d00 · text #fcfcfd · border 1px solid #ff3d00 · radius 10px · padding 0px 12px · 400 14px inter
- **Secondary button** (“Customers”): transparent background · text #15191e · border 1px solid · radius 10px · padding 4px 8px · 600 14px inter
- **Link** (“Corporate cards Spend smart globally wit”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px inter
- **Input**: transparent background · text #15191e · radius 0px · padding 8px 2px · 400 14px inter
- **Navigation item** (“Corporate card”): transparent background · text #8b8d98 · radius 0px · padding 0px · 400 16px inter

## Do

- Use Inter for the main interface typography.
- Keep headlines dark, prominent, and tightly tracked.
- Reserve #ff3d00 for primary actions and selected links.
- Alternate open white areas with occasional pale or dark section bands.
- Pair feature copy with authentic product imagery.
- Use muted gray for secondary information.
- Keep shadows subtle and borders quiet.

## Don't

- Do not add unmeasured palette colors to the interface.
- Do not use orange as a large page background.
- Do not crowd the page with dense copy blocks.
- Do not give every section a colored background.
- Do not use heavy shadows or dramatic elevation.
- Do not turn product photography into decorative illustration.
- Do not apply serif typography to navigation or controls.

## Agent prompt

Build a new Brex-style fintech SaaS page using a quiet white canvas (#ffffff), Graphite Ink (#15191e) headlines, and Slate Gray (#60646c) supporting text. Reserve Brex Signal (#ff3d00) for the main CTA and selected links. Use Inter throughout the interface, with large medium-weight, tightly tracked headlines and readable body copy; use Flecha only as a restrained editorial accent. Create a spacious centered content frame with alternating two-column feature rows, centered proof or product sections, and occasional Lavender Mist (#f3f3f7) bands. Use realistic finance-product photography or interface mockups, not decorative illustrations. Keep controls softly rounded and mostly flat, with light borders and minimal shadow. End with a Midnight Ink (#000710) CTA or footer section, using muted light text for secondary details.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero with left-aligned headline, email form, and product image on the right. | email capture, primary CTA, play-video link | large dark headline, orange button, device photography |
| 2 | logo-cloud | Centered headline and customer logos across a pale full-width band. | social proof | pale band, muted logos, centered heading |
| 3 | product-grid | Centered introduction above five compact product cards. | product discovery, category links | five-column card row, product previews, pale card surfaces |
| 4 | feature-grid | Centered heading above three image-led audience cards. | audience selection, learn-more links | three-column grid, cropped portraits, orange text links |
| 5 | feature-split | Centered section introduction followed by a two-column product feature. | feature explanation, explore link | alternating split, interface mockup, orange inline link |
| 6 | feature-split | Two-column feature row with copy left and product preview right. | feature explanation, explore link | reversed split, compact interface preview, white canvas |
| 7 | feature-split | Two-column row with product visualization beside descriptive copy. | financial benefit, learn-more link | interface mockup, white space, orange inline link |
| 8 | feature-split | Two-column feature row with copy and vendor payment interface. | payment feature explanation, explore link | alternating imagery, dashboard mockup, minimal framing |
| 9 | integrations | Two-column integration row with copy beside a line of accounting logos. | integration discovery, learn-more link | partner logos, soft image panel, orange inline link |
| 10 | stats | Centered headline above three evenly spaced metric columns. | outcome proof | large orange figures, three-column metrics, small footnote |
| 11 | testimonials | Two-column story panel with customer image left and quote right. | customer stories, testimonial tabs, case-study link | pale background, photo panel, serif quote accent |
| 12 | cta | Dark two-column CTA with copy on the left and product imagery on the right. | final conversion, get-started CTA | #000710 background, light text, orange button, product image |
| 13 | content-feed | Centered title above a horizontal grid of editorial article cards. | browse insights, article links | thumbnail cards, compact headlines, horizontal card row |
| 14 | footer | Dark multi-column footer with brand, product links, company links, and resources. | footer navigation, social links | #000710 background, muted link columns, brand mark |
| 15 | footer | Dense legal and regulatory disclosures arranged in small text across the dark footer. | legal disclosures | small muted text, dark background, multi-column details |

## Source CSS custom properties (selected)

```css
--_1k5xs26bg: 12px;
--font-inter: 'inter', 'inter Fallback';
--font-flecha: 'flecha', 'flecha Fallback';
--font-bronzea: 'bronzea', 'bronzea Fallback';
--font-space-mono: 'Space Mono', 'Space Mono Fallback';
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/brex-com