What is Brex's primary brand color?

Brex's primary is warm orange `#ff5900` — a saturated red-orange used as the only filled-CTA color across every marketing band. It appears as the `button-primary` background and as inline link emphasis on hover; otherwise it stays scarce. The supporting brand voltage is near-black `#15191e` (frequency 138 across the page), which carries body text and serves as the dark surface fill for the footer band. The cool-blue hairline `rgba(66,87,138,0.15)` edges every card and input — a deliberate chromatic counterpoint to the warm orange anchor.

What typography does Brex use, and what's distinctive about it?

Brex runs Inter across the entire UI tier, with two secondary families layered in: Flecha (a serif used for editorial card titles like 'Modern cards, banking, expenses') and Space Mono (used in numeric callouts and code-style chips). The defining move is weight 500 across the whole display ladder — 72px hero, 48px section, 36px card, 24px sub — never dropping to 400 for display, never climbing to 600/700. Letter-spacing tightens proportionally from -1.44px at 72px down to -0.14px at 14px. The result reads architectural rather than aggressive — confidence through consistent mid-weight rather than bold-weight muscle.

Why is the primary button only 36px tall with 10px radius?

Brex's `button-primary` is intentionally compact: 36px height, 12px horizontal padding, 10px border-radius, 14px Inter at weight 400. The geometry is shorter and tighter than the category default — most fintech CTAs sit at 44–48px tall with a full pill or 6px corners. Brex's 10px sits between the soft full-pill (9999px) and the technical 6px square — a deliberate middle that reads transactional without softening into consumer-marketplace pill territory. The button has no rest-state shadow; visual lift comes from the warm-orange contrast against the off-white `#fcfcfd` canvas.

Why is the card hairline blue instead of gray?

Cards, inputs, and modal chrome edge with `rgba(66,87,138,0.15)` — a desaturated cool blue rather than the neutral gray most card systems default to. The hex traces back to a `--_1k5xs267n` CSS variable used on five distinct border tokens on the homepage. Functionally it's a 15% alpha — soft enough that the border reads as a hairline, not a frame. Chromatically it's the counterpoint to the warm orange CTA: when both appear in the same card (an orange button inside a blue-edged container) the page reads warm with a quiet cool floor underneath.

How do Inter, Flecha, and Space Mono divide work?

Inter does roughly 95% of all rendering — every nav link, body paragraph, hero headline, button label, and form input. Flecha (proprietary serif) is reserved for a single editorial-moment role: feature-card titles that need to break the architectural rhythm with a softer voice, like 'Modern cards, banking, expenses, accounting, and more' rendered at 36px / 500. Space Mono lives in numeric callouts and code-style chips — money amounts, account numbers, transaction codes — where the monospaced rhythm reinforces the financial-data signal. The three-family chord is wider than Stripe's Sohne-only spec but tighter than most marketing sites that scatter four or five families.

What's missing from this DESIGN.md spec?

A handful of areas, captured in the Known Gaps section: precise hover and focus states for the primary button (only the rest state was captured live), the full product-app semantic palette for errors, success, and warning states (which lives inside the authenticated dashboard at `dashboard.brex.com`), the motion specs for the homepage's scroll-triggered card reveals, the dark-mode token set if one exists, and the sub-brand accent palettes for Brex Capital, Brex Travel, and Brex AI Agents. The spec captures roughly the public marketing surface — sub-product systems carry their own token sets.

Brex Design System

Brex's design system as a DESIGN.md file.

About Brex DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source brex.com

Fintech & Crypto
Banking & Payments

Brex's marketing surface is the warmest of the current fintech category. Where Stripe carries indigo `#533afd`, Ramp carries lime, and Mercury carries near-monochrome — Brex commits to a single warm orange `#ff5900` as the sole filled-CTA voltage. The hex hits the page in just three background spots (the "Get started" button, an inline accent dot, and a hover-reveal underline), but every primary action across every band rides that one color. Beneath it sits a near-black ink `#15191e` for type and an off-white canvas `#fcfcfd` for surface — the chromatic system has only one accent and it earns the contrast.

This page packages the full system into a single DESIGN.md file. Inside: 18 colors, 11 type tokens, 5 corner radii, 8 spacing values, and 17 components — primary and secondary buttons, a 60px sticky top-nav with a `--brex-nav-height` token, feature cards with `rgba(66,87,138,0.15)` cool-blue hairlines, the cream-card surface, a 36px-tall text-input, and the eyebrow-cap label pattern with `0.05em` letter-spacing and uppercase text-transform. Every hex is quoted; every token name traces back to a Brex `--_1k5xs26*` CSS custom property captured live from the homepage.

Feed the file to Claude, Cursor, or GitHub Copilot. The AI writes React components and Tailwind classes that match Brex's warm-orange-anchored hierarchy — single-voltage CTA placement, Inter weight-500 display, 10px-radius pill geometry, cool-blue hairlines, the 8/24/72px spacing rhythm — instead of a generic fintech theme. Where most spend-management tools default to bold-weight display headlines at 600 or 700, Brex commits its entire 14–72px display tier to weight 500 — the result reads architectural rather than aggressive.

What makes it distinct

Warm orange CTA voltage`#ff5900` is the only filled button color, three background appearances against forty text/border uses
Inter weight-500 display architecturethe entire 14–72px display tier renders at one weight with negative tracking from -0.14px to -1.44px
Tight 10px-radius pill button36px tall, 12px horizontal padding, no shadow on rest, the brand's whole transactional surface
Cool-blue hairline border`rgba(66,87,138,0.15)` edges every card and input, a chromatic counterpoint to the warm orange
Three-family typographic chordInter for product chrome, Flecha for editorial serif moments, Space Mono for numeric callouts

Live at brex.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

brex.com

Explore Brex

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Brex design system FAQ

Common questions about Brex's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Brex — official site

Brex's finance-software platform for company cards, banking, expenses, and accounting.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Brex in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→