Brex Design System Reference

Foundation

Color Tokens

The complete color palette extracted from Brex's design system, including brand primaries, interactive states, neutrals, and semantic backgrounds.

Primary Brand Black

#15191E

Primary text · Structural elements · Authority

Pure Black

#000000

Maximum contrast · Critical typography · Emphasis

Primary Action Orange

#FF5900

Primary CTA · Key interactive elements · Urgency

Bright Orange

#FF3D00

Error states · Destructive actions · Warnings

Warm Yellow

#FFA500

Secondary emphasis · Data visualization · Highlights

Primary Blue

#006EF5

Secondary actions · Links · Interactive feedback

Royal Purple

#3C16D5

Tertiary accent · Special states · Elevation · Branded highlights

Success Green

#0D9926

Successful completion · Confirmations · Positive feedback

Bright Success Green

#1EC425

Success badges · Positive indicators · Light variant

Error Red

#EE2929

Critical errors · Destructive warnings · Failure states

Secondary Gray

#60646C

Secondary text · Labels · Disabled states · Mid-tone

Tertiary Gray

#8B8D98

Tertiary content · Placeholders · Subtle dividers

Light Gray

#B9BBC6

Subtle borders · Low-emphasis dividers · Light neutral

Warm Gray

#6F737B

Contextual text · Secondary navigation · Alternative mid-tone

Off-White

#FCFCFD

Primary surface background · Cards · Containers

Pure White

#FFFFFF

Secondary surface · Overlays · Elevated containers

Light Background

#F3F3F7

Subtle background tint · Grouped content · Secondary sections

Blue Tint Light

#ECF4FD

Informational content · Secondary alerts · Light blue background

Success Background Light

#D1F4D2

Success notifications · Positive alerts · Light green background

Blue Background Light

#D5E8FB

Informational backgrounds · Secondary alerts · Light blue variant

Purple Background Light

#E6E2FF

Special notifications · Feature highlights · Light purple background

Typography

Type Scale

Inter powers Brex's modern, geometric design system. Clean weights (400 and 500) enable sharp typographic hierarchy with precision and confidence.

Primary Inter UI · Headings · Body · Buttons

Display 1 Build what matters 72px · 500 · 72px line

Display 2 The quick brown fox 48px · 500 · 48px line

Heading 1 The quick brown fox jumps 36px · 500 · 36px line

Heading 2 The quick brown fox 30px · 500 · 36px line

Heading 3 The quick brown fox jumps 24px · 500 · 29px line

Body Large The quick brown fox jumps over the lazy dog 16px · 400 · normal

Body Regular The quick brown fox jumps over the lazy dog 14px · 400 · 21px line

Body Small The quick brown fox jumps over the lazy dog 12px · 400 · 18px line

Layout

Spacing & Shapes

8px base grid — every spacing token is a multiple of 8. Border radii range from sharp (0) to circular (50%) to match component context and fintech precision.

Spacing Scale

4px xs

8px sm

12px sm+

16px md

20px md+

24px lg

32px xl

48px 2xl

72px 3xl

80px 4xl

Border Radius

None 0px

SM 6px

MD 8px

LG 10px

Circular 50%

Border Widths

Thin 1px

Medium 2px

Thick 3px

Shadows

Level 0 Base · no elevation

Level 1 Standard cards · subtle lift

Level 2 Elevated cards · floating elements

Level 3 Modals · dropdown menus

Level 4 Sticky headers · critical modals

Opacity

Full 100%

Disabled 50%

Semi-transparent 20%

Z-index / Layering

Base 1

Sticky 5

Dropdown 10

Modal Overlay 100

Toast 200

Elevation

Depth & Surfaces

Three primary surfaces create spatial hierarchy. Off-White (L0) and Pure White (L1) provide comfortable contrast with subtle shadow elevation to guide focus.

Off-White Surface

Primary surface background — cards, containers, and content areas

L0 · #FCFCFD

Pure White Surface

Secondary surface for overlays, modals, and elevated containers

L1 · #FFFFFF

Light Background

Subtle background tint for grouped content and secondary sections

L2 · #F3F3F7

Off-White #FCFCFD

Pure White #FFFFFF

Light Background #F3F3F7

Border Light #B9BBC6

Success Light #D1F4D2

Blue Light #D5E8FB

Purple Light #E6E2FF

Blue Tint #ECF4FD

Components

Component Library

Core interactive elements rendered at their exact design-system specifications — colors, radii, shadows, and states aligned with Brex's fintech precision.

Buttons

Interactive triggers — Primary, Secondary, Ghost, Disabled

.btn

Primary: #FF5900 bg · #FFFFFF text · 8px radius · 16px horizontal padding · 40px height. Secondary: transparent bg · #15191E border. Ghost: link-style, no border, underline on hover.

Text Input

Form control — Default and Focused states

.input

Default: #FFFFFF bg · #B9BBC6 border · 6px radius · 40px height · 12px padding. Focus: #006EF5 border · 3px focus ring rgba(0,110,245,.12).

Card

Content container — elevated surface with shadow

.card

Repository name

A brief description of this project. It's modern and financial.

#FFFFFF bg · #B9BBC6 border · 8px radius · L1 shadow (0px 2px 8px rgba(0,0,0,0.08)). Title: 14px/600/#15191E. Body: 13px/#60646C. CTA: primary orange button.

Badges

Status indicators — Success, Error, Info

.badge

Open Closed Draft

12px/600 · 4/8px padding · 6px radius. Success: #0D9926. Error: #FF3D00. Info: #006EF5.

Guidelines

Do's & Don'ts

Principles for consistent application of the Brex design language across surfaces and contexts.

Do — Embrace

Use Primary Action Orange (#FF5900) for all primary call-to-action buttons — it commands attention and drives conversions
Maintain consistent 24px padding in cards and containers to ensure visual rhythm
Apply 16px horizontal padding inside buttons for comfortable tap and click targets
Use #15191E for all body text; it provides sufficient contrast while softening pure black's harshness
Layer components with subtle shadows (Level 1–2) to establish depth without visual clutter

Don't — Avoid

Never apply the orange accent to non-interactive elements or decorative items
Avoid using pure #000000 for body text; use #15191E for softer, more accessible contrast
Don't mix border-radius values on related components inconsistently
Never apply more than one shadow level to a single component; maintain hierarchy
Avoid nested shadows or custom opacity values outside the defined scale

www.brex.com

Preview