Brex DESIGN.md

Intelligent finance for high-speed companies. Brex's current public site pairs deep ink and white surfaces with saturated electric-blue accents, rounded enterprise product cards, AI-forward messaging, and dense-but-structured spend controls that make complex finance software feel fast, modern, and operationally sharp.

1. Visual Theme & Atmosphere

Overall Aesthetic

Brex feels like enterprise finance software with startup velocity. The system is precise, product-heavy, and high-trust, but not stodgy. Hero sections lean dramatic and tech-forward, while product surfaces stay structured, modular, and clearly action-oriented.

Mood & Feeling

• Fast and controlled
• Modern, operational, and AI-forward
• High-trust without old-bank heaviness
• Dense but highly organized
• Confident and software-native

Design Density

Medium to high density. Brex shows many product areas, controls, and proof metrics, but uses clear card boundaries, strong hierarchy, and generous spacing between modules to keep the experience readable.

Visual Character

• Deep navy and white base with vivid blue accents
• Rounded analytics and workflow cards
• Product screenshots positioned as proof, not decoration
• Big statements supported by precise subheads and metrics
• AI and automation framed as practical workflow speedups

2. Color Palette & Roles

Core Foundation

Brand and Support

Utility

3. Typography Rules

Font Stack

css--font-display: "Brex Sans", "Helvetica Neue", Arial, sans-serif;
--font-sans: "Brex Sans", system-ui, -apple-system, sans-serif;
--font-mono: "SF Mono", "Roboto Mono", Menlo, monospace;

Type Scale

Typography Philosophy

Brex typography should feel sharp, scalable, and command-center ready. Headlines can be bold and tech-forward, but the body system needs to support dense operations, metrics, and workflow explanation without fatigue.

4. Component Stylings

Buttons

css.button-primary {
  background: #2f6bff;
  color: #ffffff;
  border: none;
  border-radius: 999px;
  min-height: 48px;
  padding: 0 22px;
  font-size: 16px;
  font-weight: 700;
}

.button-primary:hover {
  background: #1746d1;
}

.button-secondary {
  background: #ffffff;
  color: #0b1020;
  border: 1px solid #d9e1f0;
  border-radius: 999px;
  min-height: 48px;
  padding: 0 22px;
}

Cards and Workflow Panels

css.product-card {
  background: #ffffff;
  border: 1px solid #d9e1f0;
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(11, 16, 32, 0.08);
}

Inputs

css.input {
  background: #ffffff;
  color: #111827;
  border: 1px solid #d9e1f0;
  border-radius: 14px;
  min-height: 48px;
  padding: 12px 14px;
}

.input:focus {
  outline: none;
  border-color: #2f6bff;
  box-shadow: 0 0 0 4px rgba(159, 185, 255, 0.35);
}

Component Notes

• Finance workflows should feel proactive and controlled, not reactive
• Metrics deserve strong typographic emphasis and clear card containment
• AI cues should support concrete actions like approvals, automation, and accounting speed

5. Layout Principles

Spacing Scale

Layout Behavior

• Lead with a bold operational promise, then support with product proof
• Group tools by real finance jobs: cards, expenses, travel, bill pay, accounting
• Let trust metrics and customer proof sit close to product modules
• Prefer broad modular sections over long uninterrupted text blocks

Whitespace Philosophy

Whitespace should feel disciplined and high-performance, giving dense operational content structure without draining urgency or speed from the page.

6. Depth & Elevation

Elevation Strategy

Brex uses soft enterprise elevation. Cards float clearly above light surfaces, while dark sections add gravity and contrast rather than heavy shadows alone.

css--shadow-soft: 0 8px 20px rgba(11, 16, 32, 0.05);
--shadow-card: 0 18px 40px rgba(11, 16, 32, 0.08);
--shadow-focus: 0 0 0 4px rgba(159, 185, 255, 0.35);

Surface Hierarchy

• White base canvas
• Light gray-blue support sections
• Elevated white workflow cards
• Deep ink contrast areas for hero and premium proof sections

7. Do's and Don'ts

Do

• Keep Brex structured, decisive, and software-first
• Use blue to guide action and hierarchy, not to flood every surface
• Make AI and automation concrete and workflow-oriented
• Preserve strong scanability for metrics and product breadth

Don't

• Do not make Brex feel like consumer cashback fintech
• Do not overdecorate with vague abstract gradients
• Do not flatten dense finance content into generic marketing fluff
• Do not make enterprise surfaces feel old-bank or legacy ERP heavy

8. Responsive Behavior

Breakpoints

Responsive Rules

• Keep product clusters clear when cards collapse to one column
• Preserve metric emphasis and CTA visibility on smaller screens
• Stack screenshots and copy before shrinking text too far
• Maintain readable spacing between related finance modules

9. Agent Prompt Guide

Quick Reference

• Deep ink and white surfaces with vivid blue CTAs
• Rounded enterprise product cards and clear finance workflow modules
• Bold headlines, dense but organized body content, metric-rich proof
• AI-native but practical, fast, and operational

Prompt Template

textDesign this like Brex's current public website:
- deep ink and white layout with vivid electric-blue CTA accents
- rounded enterprise software cards for finance workflows and metrics
- bold operational headlines with structured product proof
- AI-powered automation framed as practical speed and control
- modern B2B finance software energy, not legacy banking UI