Brex
A precise, fintech-confident interface anchored on white canvas with near-black Inter headlines and a single high-voltage orange accent (#ff5900). The system reads as modern enterprise-finance — tight negative letter-spacing on a very large display headline, small-radius cards holding real product UI fragments, soft pastel tints (mint, sky, violet) carried only inside in-card status chips, and pure-black CTA and footer bands that close the page. Brand voltage comes from the orange accent and the oversized 72px Inter display headline rather than from decoration.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display-xl
72px · 500 · 1.0
The quick brown fox jumps
title
20px · 500 · 1.2
The quick brown fox jumps
label
14px · 500 · 1.5
The quick brown fox jumps
body
16px · 400 · 1.5
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 8px | |
| sm | 12px | |
| md | 16px | |
| lg | 24px | |
| xl | 32px | |
| xxl | 48px | |
| section | 72px | |
| section-lg | 80px | |
| section-xl | 160px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| xs | 4px | |
| sm | 6px | |
| md | 8px | |
| lg | 10px | |
| xl | 12px |
FAQ
- What colors does Brex use?
- Brex's core palette includes #ff5900, #15191e, #60646c, #8b8d98, #6f737b. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Brex DESIGN.md.
- What font does Brex use?
- Brex's primary typeface is Inter. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the Brex design system?
- A precise, fintech-confident interface anchored on white canvas with near-black Inter headlines and a single high-voltage orange accent (#ff5900). The system reads as modern enterprise-finance — tigh…