---
version: alpha
name: Brex
description: A crisp near-white fintech canvas where Inter handles the tight, tracked-in headlines and a Flecha serif slips in for editorial moments, slate-blue grays do the structural work, and a single vivid orange is the only saturated color on the page — spent entirely on the primary CTA and the spark of an icon accent.

colors:
  # Surface / canvas
  background: "#fcfcfd"          # near-white page canvas
  surface: "#ffffff"            # cards, panels, raised tiles
  surface-dark: "#15191e"       # dark footer / contrast sections, logo plate

  # Ink / text
  ink: "#15191e"                # near-black slate headings and body
  ink-secondary: "#60646c"      # supporting copy
  ink-muted: "#8b8d98"          # captions, metadata, muted labels
  ink-faint: "#b9bbc6"          # placeholder text, disabled, faint helper
  on-dark: "#ffffff"            # text on dark sections
  on-accent: "#ffffff"          # text on the orange CTA

  # Brand accent — the singular Brex orange
  primary: "#ff5900"            # primary CTA, icon spark, the one saturated hit
  primary-hover: "#ff6915"      # CTA hover
  primary-strong: "#ff6b18"     # pressed / deepened accent

  # Borders
  border: "#d0d2dd"             # card edges, dividers, input outlines
  border-soft: "#42578a"        # was rgba(66,87,138,0.15) — Google format requires hex

  # Shadow tints (opaque approximations for the elevation table)
  shadow-soft: "#000000"        # was rgba(0,0,0,0.04) — Google format requires hex
  shadow-accent: "#42578a"      # was rgba(66,87,138,0.15) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 72px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -1.44px
    fontFeature: "'cv01', 'cv10', 'ss03'"
  display-serif:
    fontFamily: "Flecha, Georgia, 'Times New Roman', serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.11
    letterSpacing: 0px
  heading:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -0.96px
    fontFeature: "'cv01', 'cv10', 'ss03'"
  heading-sub:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -0.72px
    fontFeature: "'cv01', 'cv10', 'ss03'"
  title:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.21
    letterSpacing: -0.48px
    fontFeature: "'cv01', 'cv10', 'ss03'"
  title-sub:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.4px
    fontFeature: "'cv01', 'cv10', 'ss03'"
  body-large:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: -0.2px
    fontFeature: "'cv01', 'cv10', 'ss03'"
  body:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.32px
    fontFeature: "'cv01', 'cv10', 'ss03'"
  body-small:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.28px
    fontFeature: "'cv01', 'cv10', 'ss03'"
  link:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.43
    letterSpacing: -0.14px
    fontFeature: "'cv01', 'cv10', 'ss03'"
  label:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: -0.28px
    fontFeature: "'cv01', 'cv10', 'ss03'"
  caption:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.24px
    fontFeature: "'cv01', 'cv10', 'ss03'"

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 80px
  5xl: 160px

rounded:
  sm: 4px
  md: 6px
  lg: 10px
  xl: 12px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-accent}"
    typography: "{typography.link}"
    rounded: "{rounded.md}"
    padding: 10px 18px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-accent}"

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.link}"
    rounded: "{rounded.md}"
    padding: 10px 18px
  button-secondary-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.link}"
    rounded: "{rounded.md}"
    padding: 10px 18px
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 24px
  card-selected:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 24px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 10px 14px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    padding: 16px 32px

  nav-link:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label}"
    padding: 8px 12px
  nav-link-hover:
    textColor: "{colors.ink}"

  link:
    textColor: "{colors.primary}"
    typography: "{typography.link}"
    padding: 0px

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.md}"
    padding: 4px 10px

  eyebrow:
    textColor: "{colors.ink-muted}"
    typography: "{typography.label}"
    padding: 0px
---

# Brex Design System

## Overview

Brex sells corporate cards and spend management, and its marketing site dresses the way a well-run finance team wants to feel: clean, exact, quietly confident. The canvas is a near-white `{colors.background}` — not flat `#ffffff`, but a faintly cool off-white that reads as paper rather than screen — with cards floating a half-shade brighter on pure white (`{colors.surface}`). There is no clutter, no gradient noise, no decorative texture. The hierarchy is built almost entirely from a slate-blue gray ladder, `{colors.ink}` down through `{colors.ink-faint}`, so the page feels like a balance sheet that learned restraint.

The signature move is a two-typeface conversation. The workhorse is **Inter** (`{typography.display-hero}`), set at weight 500 with tight negative tracking (-1.44px at 72px) and the brand's OpenType character variants (cv01, cv10, ss03) that swap the single-story 'a' and straighten the 'l' — small typographic tells that keep it from looking like default Inter. Then, at editorial moments — a pull-quote, a section lead — a **Flecha serif** (`{typography.display-serif}`) slips in, lending warmth and a human, almost magazine-like cadence against all that engineered sans. The pairing signals "serious about money, but not cold about it."

And then there's the orange. Brex orange (`{colors.primary}`) is a vivid, almost safety-cone `#ff5900` — and it is the *only* saturated color anywhere on the page. Everything else is grayscale slate. That single orange is spent with extreme discipline: the primary CTA ("Get started"), and the occasional icon spark or active-state highlight. Against the cool near-white and slate grays, it reads like a struck match. The whole impression is fintech-premium — the polish of a product that handles your company's money, with one warm orange flare to keep it from feeling clinical. Cards carry a modest 12px radius and the faintest hairline border (`{colors.border}`), with shadows so soft they barely register — depth here is suggested, not shouted.

**Key Characteristics:**
- Cool near-white canvas (`{colors.background}`) with cards a half-shade brighter on pure white (`{colors.surface}`)
- Hierarchy built from a slate-blue gray ladder (`{colors.ink}` → `{colors.ink-faint}`), not from color
- **Inter** at weight 500 with tight negative tracking (-1.44px at 72px) and cv01/cv10/ss03 character variants
- **Flecha serif** (`{typography.display-serif}`) reserved for editorial pull-quotes and leads — the warm counterpoint
- Brex orange (`{colors.primary}`) is the *only* saturated color — a struck-match `#ff5900`
- Orange spent with discipline: primary CTA, icon sparks, active highlights — never a background wash
- Modest 12px card radius (`{rounded.xl}`); buttons sit tighter at `{rounded.md}` (6px)
- Whisper-soft shadows (`{colors.shadow-soft}`) — depth is suggested, not announced
- Hairline borders (`{colors.border}`) do most of the structural separation
- Light-first throughout; the only dark surfaces are footer / logo-plate contrast sections (`{colors.surface-dark}`)

## Colors

### Surface & Canvas
- **Near-White** (`{colors.background}`): The page canvas — a faintly cool off-white that reads as paper.
- **White** (`{colors.surface}`): Cards, panels, and raised tiles, a half-shade brighter than the canvas.
- **Slate Black** (`{colors.surface-dark}`): Dark contrast sections, footer, and logo plates.

### Ink / Text
- **Slate Black** (`{colors.ink}`): Headings and body — a near-black with a cool blue cast, never pure black.
- **Slate Gray** (`{colors.ink-secondary}`): Supporting paragraph copy.
- **Muted Slate** (`{colors.ink-muted}`): Captions, metadata, eyebrows.
- **Faint Slate** (`{colors.ink-faint}`): Placeholder text, disabled states, faint helpers.

### Brand Accent
- **Brex Orange** (`{colors.primary}`): The singular saturated color — the primary CTA, icon sparks, active highlights. Used sparingly to keep its charge.
- **Orange Hover / Strong** (`{colors.primary-hover}`, `{colors.primary-strong}`): Hover and pressed states for the orange CTA.

### Borders & Shadow Tints
- **Hairline** (`{colors.border}`): Card edges, dividers, and input outlines — the primary structural device.
- **Soft Blue Border** (`{colors.border-soft}`): A faint blue-tinted edge on accent containers (flattened from rgba).
- **Soft / Accent Shadow** (`{colors.shadow-soft}`, `{colors.shadow-accent}`): Opaque stand-ins for the whisper shadows (originals were rgba — flattened for the Google spec).

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks `ui-sans-serif, system-ui, -apple-system, sans-serif`. Set at weight 500 for headlines, 400 for body. Carries the bulk of the system.
- **Editorial serif**: `Flecha` (with `Georgia, Times New Roman, serif` fallbacks). Reserved for pull-quotes and section leads — the warm, magazine counterpoint.
- **OpenType Features**: `cv01` (single-story 'a' → double-story alternate), `cv10`, and `ss03` are applied across Inter to give it the custom Brex character set and keep it from reading as stock Inter.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 72px / Inter 500 / -1.44px — the marquee headline |
| `display-serif` | 36px / Flecha 500 — editorial pull-quotes and leads |
| `heading` | 48px / Inter 500 / -0.96px — section headings |
| `heading-sub` | 36px / Inter 500 / -0.72px — sub-section headings |
| `title` | 24px / Inter 500 / -0.48px — card and feature titles |
| `title-sub` | 20px / Inter 500 / -0.4px — smaller titles |
| `body-large` | 20px / Inter 600 — lead paragraphs |
| `body` | 16px / Inter 400 — standard body |
| `body-small` | 14px / Inter 400 — dense supporting copy |
| `link` | 14px / Inter 600 — links and button labels |
| `label` | 14px / Inter 500 — nav links, UI labels |
| `caption` | 12px / Inter 400 — metadata, tags |

### Principles
- **Inter for structure, Flecha for warmth**: the sans does the work; the serif appears only when a moment wants a human, editorial voice.
- **Character variants are the signature**: cv01/cv10/ss03 keep Inter from looking default — always carry them.
- **Tight tracking on big type**: -1.44px at 72px scaling toward zero; body sits at a gentle -0.32px.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px. The rhythm is generous but orderly — `{spacing.4xl}` (80px) and `{spacing.5xl}` (160px) separate major sections, while card internals stay tidy at `{spacing.xl}` (24px). Nothing is cramped; nothing is loose.

### Grid & Container
- Max content width: ~1200px, centered
- Common pattern: a centered headline over a row of evenly-weighted feature cards (4-up on desktop)
- A logo cloud of customer marks sits beneath the nav as a trust band

### Whitespace Philosophy
- **Calm and ordered**: even spacing and aligned columns make the page feel auditable, like a clean ledger
- **Cards float, page breathes**: cards carry tight internal padding but sit in generous surrounding space
- **One accent, lots of air**: the orange has room to land precisely because everything around it is restrained

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; `{colors.border}` hairline only | Section bands, most page content |
| Whisper (Level 1) | `0 1px 1px` at ~4% black (`{colors.shadow-soft}`) | Resting cards |
| Card (Level 2) | `0 1px 3px` soft ambient | Raised feature tiles |
| Accent edge | `0 1px 0` at ~15% blue (`{colors.shadow-accent}`) | The faint blue keyline under accent containers |
| Selected | `0 0 0 1px` (`{colors.primary}`) ring | The selected card outlined in orange |
| Focus Ring | `0 0 0 3px` faint orange | Keyboard focus on inputs and controls |

**Shadow Philosophy**: Brex's elevation is almost subliminal. Cards carry a 4%-black whisper shadow that you feel more than see — depth is implied by a hairline border and a faint lift, never by a heavy cast. The one expressive elevation moment is the *selected* state: a card outlined in a 1px orange ring (`{colors.primary}`), which is how the brand uses its accent to signal "this one" without filling the surface. It's restraint as a depth strategy.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 4px | Small inner chips, tags |
| `md` | 6px | Buttons — the default interactive radius |
| `lg` | 10px | Inputs, menu items |
| `xl` | 12px | Cards — the workhorse container radius |
| `pill` | 9999px | Avatars, circular icon buttons, status dots |

The radius personality is tidy and conservative: a compact 6px on buttons, 12px on cards, with pills reserved for genuinely circular elements. No oversized pill buttons — the geometry signals precision and trust, exactly what a financial product wants to project.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Brex orange (`{colors.primary}`) fill, white label, 6px radius. The one place the brand spends its color. Hover deepens to `{colors.primary-hover}`.
- **`button-secondary`** — White (`{colors.surface}`) fill, slate text, hairline border. The neutral action. Hover settles to the canvas tone.
- **`button-ghost`** — Transparent / canvas fill, slate-gray label. Tertiary, low-emphasis actions.

### Cards
- **`card`** — White surface, hairline border (`{colors.border}`), 12px radius, whisper shadow. The feature-tile building block.
- **`card-selected`** — Same geometry, but outlined with a 1px orange (`{colors.primary}`) ring to mark the chosen option.

### Inputs
- **`input`** — White fill, hairline border, 10px radius. **`input-focus`** adds a faint orange ring — the accent's only appearance in form chrome.

### Navigation
- **`nav-bar`** — Near-white, sits flush at the top with no heavy shadow, customer logo cloud beneath. **`nav-link`** is slate-gray, darkening to slate-black on hover.

### Links, Badges & Eyebrows
- **`link`** — Orange (`{colors.primary}`) text for inline links, weight 600.
- **`badge`** — White pill-less tag, slate-gray text, 6px radius.
- **`eyebrow`** — Muted-slate (`{colors.ink-muted}`) label above headings.

## Do's and Don'ts

### Do
- Keep the canvas a cool near-white (`{colors.background}`) — not flat `#ffffff` — and float cards on pure white (`{colors.surface}`)
- Build hierarchy from the slate-gray ladder (`{colors.ink}` → `{colors.ink-faint}`), not from color
- Set Inter at weight 500 for headlines with tight negative tracking (-1.44px at 72px) and always carry cv01/cv10/ss03
- Use Flecha serif (`{typography.display-serif}`) only for editorial pull-quotes and section leads
- Spend Brex orange (`{colors.primary}`) only on the primary CTA, icon sparks, and active/selected states
- Mark a selected card with a 1px orange ring (`{components.card-selected}`), not an orange fill
- Keep shadows to a whisper (`{colors.shadow-soft}`); let hairline borders (`{colors.border}`) do the structural work
- Keep button radius compact at `{rounded.md}` (6px) and card radius at `{rounded.xl}` (12px)

### Don't
- Don't introduce a second saturated color — orange is the only chromatic hit; everything else is slate
- Don't wash a surface or a whole card in orange; it's a precision accent, not a background
- Don't use stock Inter without the cv01/cv10/ss03 variants — the character set is the signature
- Don't reach for the serif as body copy — Flecha is for editorial moments only
- Don't pile on heavy drop shadows; depth here is implied, never announced
- Don't use pill-shaped buttons — the system stays at 6px buttons, 12px cards; pills are for circular elements only
- Don't use pure black (`#000000`) for text — the ink is a cool slate (`{colors.ink}`)

---

## Responsive Behavior

### Breakpoints
*(Observed stops from extraction; treated as the layout breakpoints the site behaves to.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <767px | Single column; hero scales 72px → ~36px; feature cards stack; nav collapses to a menu |
| Mobile | 767–829px | Single column with tighter padding; logo cloud wraps |
| Tablet | 830–1023px | Two-column feature grid; hero text scales down |
| Desktop | 1024–1679px | Full layout; 4-up feature card row; centered ~1200px container |
| Large | ≥1680px | Wide container; generous `{spacing.5xl}` section padding |

### Touch Targets
- Buttons run ~40px tall with `10px 18px` padding — comfortable for thumbs
- Nav links and card tap areas carry generous padding; labels stay legible at 14px

### Collapsing Strategy
- **Navigation**: full horizontal nav → menu toggle on mobile; the orange "Get started" CTA persists
- **Feature grid**: 4-up → 2-up → single column
- **Hero**: headline drops from 72px toward ~36px keeping proportional negative tracking
- **Spacing**: section padding compresses from 160px toward ~48px

### Image Behavior
- Card illustrations and product screenshots scale as contained children and reflow within the grid
- The customer logo cloud wraps to multiple rows on narrow viewports

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Near-White (`{colors.background}`)
- Text: Slate Black (`{colors.ink}`)
- Brand accent: Brex Orange (`{colors.primary}`) — the only saturated color
- Secondary text: Slate Gray (`{colors.ink-secondary}`)
- Border: Hairline (`{colors.border}`)
- Primary CTA: Brex Orange (`{colors.primary}` fill, white label)

### Example Component Prompts

- "Create a hero on near-white (`{colors.background}`) with a 72px slate-black (`{colors.ink}`) headline in Inter weight 500, letter-spacing -1.44px, cv01/cv10/ss03 features on; place an orange primary button (`{colors.primary}` fill, white label, `{rounded.md}` radius, 10px 18px padding) beside a white secondary button (`{colors.surface}` fill, slate text, hairline border)"
- "Build a feature card: white (`{colors.surface}`) surface, 1px hairline border (`{colors.border}`), `{rounded.xl}` radius, whisper shadow (`{colors.shadow-soft}`, `0 1px 1px` at 4%), 24px padding, a slate-black title (`{typography.title}`) and slate-gray body (`{typography.body}`)"
- "Render a selected card: same as the feature card but replace the border with a 1px orange (`{colors.primary}`) ring to mark it chosen — no orange fill"
- "Design an input: white (`{colors.surface}`) fill, 1px hairline border, `{rounded.lg}` radius, 10px 14px padding; on focus add a faint orange (`{colors.primary}`) ring"
- "Create an editorial pull-quote in Flecha serif (`{typography.display-serif}`) at 36px weight 500, slate-black (`{colors.ink}`), as the one warm typographic moment amid Inter"

### Iteration Guide

1. Start on cool near-white (`{colors.background}`), cards on pure white (`{colors.surface}`). If you used flat `#ffffff` for both, cool the canvas a half-shade.
2. Build hierarchy from slate grays. If color is doing the separating, replace it with the gray ladder.
3. Inter at weight 500 for headlines, tight tracking (-1.44px at 72px), cv01/cv10/ss03 always on.
4. The serif (`{typography.display-serif}`) is editorial-only. If Flecha is in body copy, switch it back to Inter.
5. Orange (`{colors.primary}`) appears only on the primary CTA, icon sparks, and active/selected states — never a surface fill.
6. Keep shadows a whisper (`{colors.shadow-soft}`); reach for hairline borders (`{colors.border}`) first.
7. Keep radii tight: `{rounded.md}` (6px) on buttons, `{rounded.xl}` (12px) on cards. No pill buttons.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Brex. Brand names and trademarks belong to their respective owners.