# Brex · Design system migration spec

> Source: https://www.brex.com  ·  Curated by OpenDesign  ·  en

> A perfect example of modern fintech branding that balances corporate authority with aggressive startup energy through precise typography and bold color usage.

## 1. Identity DNA

Brex's design system functions as a high-performance financial operating system for modern enterprises, where every typographic weight and color choice serves operational clarity. The identity merges the authority of corporate finance with the speed of AI-driven automation, creating a visual language that feels both controlled and decisive.

**One-liner:** Enterprise-grade financial software combining cards, banking, and AI-powered expense management.
**Keywords:** corporate finance · modern banking · speed · control · AI automation
**Analogy:** A high-performance financial operating system for modern enterprises.

## 2. Color

The palette operates on a high-contrast foundation: a monochromatic base of deep neutrals and clean whites provides the stage, while a single aggressive orange accent drives all conversion actions. This dual strategy ensures readability while directing attention with surgical precision.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F3F3F7` | card background |
| `--ink` | `#15191E` | body text |
| `--muted` | `#8B8D98` | placeholder |
| `--accent` | `#FF5900` | single accent |
| `--line` | `rgba(21, 25, 30, 0.1)` | divider |

**Color principle:** High-contrast foundation with a single aggressive accent to drive conversion actions.

The system's integrity relies on this disciplined two-part logic, where neutrality establishes trust and accent isolates action.

## 3. Typography

Typography is split between a tight grotesque-sans for display headlines, tracking tightly to convey precision, and a highly readable humanist-sans for body copy, prioritizing scanability. The consistent use of weight 400 across the scale creates a unified, calm authority that avoids visual noise.

- **Display:** grotesque-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.0 | 400 | -0.96px | Hero headlines and primary section headers |
| heading | 36px | 1.1 | 400 | -0.72px | Section titles and feature headers |
| body | 16px | 1.5 | 400 | -0.28px | General copy and descriptions |

**Type rules:**
- Tight negative letter-spacing on display text for premium feel
- Consistent weight 400 for maximum readability across all sizes
- Generous line-height on body text for improved scanning

## 4. Spacing

Spacing adheres to a strict 4px grid, with generous horizontal padding on containers establishing a clean, breathable rhythm.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px grid with generous whitespace padding (72px horizontal containers) to maintain clean alignment.

## 5. Surfaces

Surfaces are defined by minimal, structural borders and soft, recessive shadows that create depth without decoration. Card backgrounds use a light grey to subtly lift content from the primary white canvas.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 1px 0px 0px rgba(66, 87, 138, 0.15)
  - 0px 1px 1px 0px rgba(0, 0, 0, 0.04)
- **Borders:** Minimal 1px solid borders in dark neutral (#15191E) for structural elements.

## 6. Layout

The layout skeleton begins with a single-column hero section dominated by large display typography and high-fidelity 3D product renders. This leads into alternating rows of text and illustration, following a strict 12-column grid with generous gutter spacing.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Single-column hero leading into alternating text/illustration feature rows.

## 7. Motion & Interaction

Motion is minimal and purposeful, favoring fast, linear transitions that reflect the platform's core value of speed. The philosophy is to provide immediate, clear feedback through subtle state changes rather than elaborate animations.

- **Durations:** micro 125ms · small 200ms · medium 500ms
- **Easing:** `cubic-bezier(0, 0, 0.38, 0.9)`
- **Patterns:**
  - Subtle linear transitions for state changes
  - Standard ease-in-out for complex visual shifts

- **Hover:** Subtle opacity or color shifts on interactive elements.
- **Click:** Immediate state change with minimal animation delay.
- **Transition:** Fast 0.125s linear transitions for UI feedback.
- **Keyboard:** Standard tab-based navigation with clear focus states.

## 8. Voice & Don'ts

The editorial voice is authoritative, efficient, and highly professional, using direct, benefit-driven statements to emphasize scale and control. Every piece of copy must deliver a specific value proposition, avoiding vague promises or passive phrasing.

- **Tone:** Authoritative, efficient, and highly professional.
- **Headline style:** Direct, benefit-driven statements emphasizing speed and scale.
- **CTA style:** Action-oriented and concise (e.g., 'Get started', 'See a demo').
- **Avoid:** Playful or overly casual language / Unnecessary jargon or complex financial terminology / Passive phrasing or weak verbs / Vague promises without specific value propositions

### Don'ts
- ❌ Don't use warm or playful color palettes — screenshot shows a strict black/white/orange scheme.
- ❌ Don't apply excessive drop shadows or 3D effects to UI cards — screenshot shows flat, clean surfaces.
- ❌ Don't use decorative or serif fonts for display text — screenshot uses a clean, tight sans-serif.
- ❌ Don't clutter the layout with multiple competing accent colors — screenshot uses orange as the sole highlight.
- ❌ Don't use low-contrast text for important information — screenshot maintains high legibility with dark ink.
- ❌ Don't create loose, airy letter-spacing in headers — screenshot uses tight tracking (-0.96px) for impact.

The system deliberately excludes playful tones, decorative typography, and competing accent colors to maintain its singular focus on corporate-grade performance.

## System Prompt (paste into AI tool)

```
This is a premium fintech SaaS design for Brex, characterized by a clean white (#FFFFFF) background, deep neutral ink (#15191E), and a single aggressive orange accent (#FF5900) for conversion points. Typography relies on a clean, tight grotesque-sans for display headlines (size 48, weight 400, ls -0.96px) and a highly readable humanist-sans for body copy. The layout follows a strict 12-column grid with 24px gutters and 72px horizontal padding, emphasizing generous whitespace and high-fidelity 3D product renders. Critical design constraints include avoiding playful tones, maintaining the single-accent color strategy, and using tight letter-spacing on all display text to convey speed and precision.
```
