Finance platform design system

Finance built for speed and control.

Brex's visual system is precise, operational, and screenshot-led: white modular surfaces, tightly tracked Inter, restrained neutrals, and a sharp orange action language.

Search Ctrl+K

Expense inbox

AI matched

99%policy compliance

4,250hours saved

120+countries

A Anthropic

$248.00Approved

D DoorDash

$67.42Receipt matched

S SeatGeek

$1,280.00In policy

25Colors

13Type Levels

16Components

60+Tokens

01 / Colors

Action orange, enterprise neutrals.

primary#FF5900

CTAs, icons, active intelligence.

accentHover#E65000

Primary hover state.

ink#15191E

Headlines, nav, dark footer.

body#33383F

Dense product copy.

muted#60646C

Captions and metadata.

canvas#FCFCFD

Near-white page base.

surfaceAlt#F6F7F9

Product bands and panels.

border#E6E8EB

Quiet module structure.

soft-orange-surface#FFF3EC

AI and active badges.

success#138A43

Approved and compliant states.

warning#B35C00

Pending finance review.

error#C92A2A

Blocked or missing items.

02 / Typography

Tight Inter with operational confidence.

Modern cards, expenses, accounting.

Display — 72px / 600 / 0.96 / -0.04em / Inter

Spend smarter with speed and control.

Hero — 56px / 600 / 1.02 / -0.035em / Inter

Supercharge financial operations.

Headline-lg — 40px / 600 / 1.08 / -0.03em / Inter

$12 user/month

Pricing-display — 32px / 600 / 1.13 / -0.025em / Inter

Corporate cards

Title-md — 24px / 600 / 1.21 / -0.02em / Inter

AI-powered compliance audit detection

Title-sm — 18px / 600 / 1.28 / -0.015em / Inter

Trusted by 35,000+ top companies

Label — 12px / 600 / 1.33 / 0.02em / Inter

Brex auto-enforces spend controls with every purchase.

Body — 16px / 400 / 1.5 / -0.02em / Inter

03 / Buttons

Compact actions with one orange lead.

button-primary

button-primary-active

button-secondary

button-ghost

button-link-arrow

button-icon

04 / Cards & Surfaces

White modules, pale panels, rare shadow.

Corporate cards

Spend globally with powerful cards and built-in controls.

AI compliance

Highlight intelligent automation without flooding the page in orange.

Footer surface

Dark ink sections carry launch, footer, and high-contrast messaging.

Editorial card

Insight cards use compact media radius and tight body rhythm.

Metric panel

4,250 hours
Average time saved per year with expense automation.

Pricing plan

$0
Plan cards stay plain, border-led, and content-differentiated.

05 / Brand-Specific Product Patterns

Spend controls, approvals, receipts, APIs.

Budget program

$42.8kof $63k monthly travel budget

Auto-enforce meal limit

Require memo over $500

Receipt match assistant

SMS receipt detected

AI matched to DoorDash $67.42

Approval inbox

Marketing offsite

$1,240 · needs manager approval

Vendor card

Per-transaction limit requested

Developer portal

APIGuidesExamplesSearch Ctrl+K

GET /v1/expenses/card
{
  "status": "approved",
  "receipt_match": true
}

Pricing comparison

Essentials$0

Premium$12

EnterpriseCustom

Trust logo strip

YCstartup proof

OpenAIenterprise proof

DoorDashcase study

06 / Forms

Quiet fields for finance workflows.

Company name

Focused input

Plan

Spend limit

Enter a limit greater than zero.

Expense memo

Controls

Auto-enforce policy

Manager approval required

07 / Spacing

An 8px rhythm with generous sections.

8px

16px

24px

32px

80px

section

120px

08 / Radius

Controlled rounding, never bubbly.

6px

Editorial media

8px

Inputs and controls

12px

Cards and panels

16px

Large grouped surfaces

pill

9999px

Buttons and badges

09 / Elevation

Flat by default, soft hover when clickable.

Flat surface

Depth comes from border, contrast, and spacing.

box-shadow: none

Feature hover

Only interactive feature cards lift.

0px 4px 16px rgba(0,0,0,.12)

Panel depth

Pale neutral panels separate workflows without shadow.

surfaceAlt + border

10 / Extracted Component Tokens

CSS custom properties.

:root {
  --brand-primary: #FF5900;
  --brand-ink: #15191E;
  --brand-body: #33383F;
  --brand-muted: #60646C;
  --brand-canvas: #FCFCFD;
  --brand-surface: #FFFFFF;
  --brand-surface-alt: #F6F7F9;
  --brand-border: #E6E8EB;
  --brand-soft-orange: #FFF3EC;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-section: 120px;
  --font-sans: "Inter", system-ui, sans-serif;
  --shadow-card: 0px 4px 16px rgba(0, 0, 0, 0.12);
}

Finance built for speed and control.

Expense inbox

Action orange, enterprise neutrals.

Tight Inter with operational confidence.

Compact actions with one orange lead.

White modules, pale panels, rare shadow.

Corporate cards

AI compliance

Footer surface

Editorial card

Metric panel

Pricing plan

Spend controls, approvals, receipts, APIs.

Budget program

Receipt match assistant

Approval inbox

Developer portal

Pricing comparison

Trust logo strip

Quiet fields for finance workflows.

An 8px rhythm with generous sections.

Controlled rounding, never bubbly.

Flat by default, soft hover when clickable.

CSS custom properties.

See what intelligent finance can do for your team.