# Brex — DESIGN.md

## Overview
Brex evolved from neon-startup to dark editorial — the marketing canvas is now a deep coffee-black (`#0e0e0c`) with a warm amber accent (`#e8a14f`) for CTAs and brand voltage. Display is a serif (GT Super Display) at large scale; body is a humanist sans (Söhne). The brand reads as a financial-magazine for ambitious mid-market companies, intentionally separated from both Mercury (smaller) and Ramp (mass-market) territory.

## Color
- **Primary:** `#e8a14f` — Brex Amber
- **Primary deep:** `#c48438`
- **Canvas:** `#0e0e0c` — Coffee Near-Black
- **Surface card:** `#1c1c19` — Elevated Coffee
- **Surface alt (light bands):** `#f5f1e8` — Warm Cream
- **Ink (on dark):** `#f5f1e8` — Cream Ink
- **Ink (on light):** `#0e0e0c`
- **Body muted:** `#9c9890`
- **Hairlines:** `rgba(245,241,232,0.10)` on dark, `rgba(14,14,12,0.10)` on light

## Typography
- **Display:** GT Super Display / Tiempos, weight 400-500 (serif), tracking -0.01em, sizes 64-104px hero
- **Body:** Söhne / Inter, weight 400-500, 16-18px base, 1.55 line-height
- **Mono (financial figures):** Söhne Mono, 14-16px tabular figures

## Spacing & rhythm
8-base (8/16/24/32/48/64/96/128). Section padding 96-128px — editorial breathing. Hero band uses asymmetric 7/5 grid with type left, photographic art-direction right. Card padding 32-40px.

## Motion signature
220ms ease-out on hover; signature is the amber CTA glow on hover (soft outer ring). Photographic hero imagery has a slow parallax shift on scroll (40% velocity), never aggressive.

## Components observed
- `hero-band-coffee-with-photo` (full-bleed art-directed photography)
- `pricing-band-cream` (cream surface for pricing tables — surface flip)
- `feature-card-dark` (elevated coffee with amber accent line)
- `cta-button-amber-fill` (amber on coffee, modest 6px radius)
- `quote-band-large-serif` (massive serif quote, editorial weight)
- `dashboard-mockup-dark`

## Trademark signals
- Coffee-black canvas with amber accent — a maturation move away from earlier neon-yellow Brex
- Photographic art direction — real founders, real offices, never stock photography
- Massive serif display headlines at 80-104px — magazine cover scale
- Surface flip between coffee bands and cream pricing — the rhythm is the brand
- Tabular figures on every dollar amount in product chrome

## What they DON'T do
- No light-mode hero — coffee canvas is the entry point
- No emoji in product UI or marketing
- No saturated rainbow gradients
- No mascot characters or playful illustrations
- No bold-weight serif display — weight 500 max

## Exemplar pages
- https://www.brex.com/
- https://www.brex.com/product/spend-management
- https://www.brex.com/customers
- https://www.brex.com/journal

## When to reference
Reach for Brex when the user wants a fintech surface for sophisticated mid-market — series B+ founders, finance directors, growth-stage operators. The coffee + amber + serif-display combination reads as "premium but operating, not aspiring." Especially appropriate for B2B financial products that want editorial weight rather than developer-tools precision.
