# Brex — Marketing site Design Spec

> Source: brex.com (live DOM, computed styles; vanilla-extract hashed token vars), 2026-07-18.
> Coverage: home / product landing. Logged-in finance app not captured (needs login).
> Note: the marketing surface is **light/white, not dark** — the black band is the announcement bar and footer only.

## 1. Visual Theme & Atmosphere

Brex reads as software-first fintech: a bright white canvas, a single Inter family at a restrained weight 500, and a hero headline set left-aligned at 72/72 with a hard -1.44px track — no serif, no illustration, no gradient. Hierarchy is built almost entirely from size and a cool blue-gray text ladder (`#15191e` → `#60646c` → `#8b8d98`), which keeps the page feeling like a product surface rather than a brochure. Exactly one accent, Brex orange `#ff5900`, appears on the primary button, the play-link and nothing else. The distinguishing detail is the border colour: hairlines are `rgba(67,87,141,.15)` — a blue-tinted rule, not a neutral gray — paired with a five-step near-invisible shadow scale that gives cards a soft physical lift. Feels: precise, modern, restrained, software-native.

## 2. Color Palette & Roles

### Text

| Token | Hex | Role / usage |
|---|---|---|
| `ink` | `#15191e` | Headlines, primary UI text |
| `text-2` | `#60646c` | Sub-headlines, supporting copy |
| `muted` | `#8b8d98` | Meta / tertiary copy (the most common text colour on the page) |
| `muted-2` | `#6f737b` | Secondary muted |
| `on-dark` | `#fcfcfd` | Text on the black announcement bar |
| `on-dark-2` | `#b9bbc6` | Muted text on dark |
| `white` | `#ffffff` | Text on the orange button |

### Surfaces & borders

| Token | Hex | Role / usage |
|---|---|---|
| `canvas` | `#ffffff` | Page background, cards |
| `surface` | `#f3f3f7` | Section band, circular carousel controls |
| `surface-2` | `#f9f9fb` | Palest inset, inactive carousel control |
| `black` | `#000710` | Announcement bar + footer (a blue-black, not pure black) |
| `black-2` | `#15191e` | Deep ink surface |
| `border` | `rgba(67,87,141,.15)` | THE hairline — a blue-tinted rule, used on cards, fields and buttons |

### Accent

| Token | Hex | Role / usage |
|---|---|---|
| `brex-orange` | `#ff5900` | The only accent: primary button fill, play-link text/icon |

**Rules.** One accent only. Orange is a fill and a link colour — it is never a background band, never a text colour in body copy, and there is no secondary or semantic palette on the marketing surface. Borders are blue-tinted `rgba(67,87,141,.15)`, never neutral gray.

## 3. Typography Rules

- One family: `inter, "inter Fallback", sans-serif` — no display face, no mono, no serif.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero h1 | 72/72 | 500 | -1.44px |
| Section h2 | 48/48 | 500 | -0.96px |
| Card / article h3 | 24/29 | 500 | -0.48px |
| Sub-headline (h2/h3 role) | 20/24 | 500 | -0.4px (`#60646c`) |
| Body | 16/24 | 400 | -0.32px |
| Nav dropdown label | 14/21 | 400 | -0.28px |
| Nav link | 14/20 | 600 | -0.14px |
| Small label / h4 | 14/21 | 500 | -0.28px (`#60646c`) |
| Button label | 14 | 400 | normal |
| Announcement bar | 12/18 | 400 | -0.24px |

Patterns: the weight ceiling is **500** — nothing on the page is bold except a 600 nav link. Tracking is negative at *every* size, scaling roughly with type size (-1.44px at 72px, -0.96px at 48px, -0.48px at 24px, -0.32px at 16px); line-height is set to exactly 1.0 for both display roles. All sentence case.

## 4. Component Stylings

**Nav** — white bar, wordmark then five links (14/600 at -0.14px, chevrons on the three dropdowns), right cluster of two text links plus a filled orange pill-ish button. The announcement bar above it is `#000710` with 12/18 white text and an emoji.

**Buttons** — small, low-height, rounded-rectangle (never a full pill):

| Variant | Fill | Text | Border | Radius | Height | Padding | Type |
|---|---|---|---|---|---|---|---|
| Primary (nav) | `#ff5900` | `#fcfcfd` | 1px `#ff5900` | 10px | 36px | 0 12px | 14/400 |
| Primary (hero, inset) | `#ff5900` | `#ffffff` | 1px `rgba(67,87,141,.15)` | 8px | 40px | 0 16px | 14/400 |
| Nav link button | transparent | `#15191e` | none | 10px | 30px | 4px 8px | 14/600 |
| Dropdown trigger | transparent | `#15191e` | none | 6px | 31px | 4px 8px | 14/400 |
| Carousel prev | `#f9f9fb` | `#15191e` | none | 50% | 50px | — | 16/400 |
| Carousel next | `#f3f3f7` | `#15191e` | none | 50% | 50px | — | 16/400 |

**Signature hero email capture** — a 58px white card: `#ffffff`, **1px `rgba(67,87,141,.15)`**, **12px** radius, `rgba(0,0,0,.04) 0 1px 1px` shadow, holding a borderless 36px 14px input (placeholder "Enter your work email") and a 40px orange 8px-radius submit button inset on the right.

**Play link** — an outlined circular play glyph plus `#ff5900` 16px label ("See Brex in action"), the only place orange appears as text.

**Cards** — white on the `#f3f3f7` band, 12px radius, blue-tinted hairline, lifted by the shadow scale below.

## 5. Layout Principles

Left-aligned hero (headline, 20/24 sub, email card, play link) — not centered, which is unusual for the category and is part of the brand's software feel. Below, the page alternates white with `#f3f3f7` bands and runs horizontally-scrolling card carousels driven by the two 50px circular controls. Radius scale in use: `6 / 8 / 10 / 12 / 50%`. Nav and section chrome sit on the same white canvas; separation is by hairline and band, not rule lines.

## 6. Depth & Elevation

Radius scale: `6px` (dropdown) / `8px` (inset button) / `10px` (button) / `12px` (card, field) / `50%` (circular controls).

A published five-step shadow scale, all built from `rgba(16,24,40,…)`:

- `0 1px 1px rgba(0,0,0,0.04)` — field/card resting
- `0px 1px 1px -2px rgba(16,24,40,.12), 0px 3px 2px -2px rgba(16,24,40,.11), 0px 0px 0px 1px rgba(16,24,40,.04)`
- `0px 0px 6px rgba(16,24,40,.05), 0px 6px 10px -4px rgba(16,24,40,.1), 0px 0px 2px 1px rgba(16,24,40,.02)`
- `0px 12px 20px -14px rgba(16,24,40,.09), 0px 4px 12px 2px rgba(16,24,40,.1), 0px 2px 4px -4px rgba(16,24,40,.14)`
- `0px 14px 20px -11px rgba(16,24,40,.16), 0px 6px 20px 4px rgba(16,24,40,.12), 0px 4px 8px -8px rgba(16,24,40,.14)`

Every step is multi-layer and very low-opacity — the effect is a soft physical lift, never a drop shadow. Shadows and the blue-tinted hairline are used *together*, not as alternatives.

## 7. Motion

Published timing tokens: durations **40ms / 80ms / 180ms**, easing **`cubic-bezier(0, 0, 0.38, 0.9)`** (a fast-out curve), with a font-variation weight token of `750` for animated emphasis. Carousels advance on the circular controls. No scroll-jacking library detected; no entrance animation on the hero.

## 8. Backgrounds, Effects & WebGL

Flat solid surfaces — no gradients, no glass, no grain, no canvas/WebGL, no backdrop-filter on the nav. Depth comes entirely from the shadow scale and the blue-tinted hairline. Product motion is carried by `<video>` inside cards.

## 9. Do's and Don'ts

### Do
- Use one family (Inter) at a weight ceiling of **500** and let size carry hierarchy.
- Apply negative tracking at every size, scaled to the type (-1.44px at 72px down to -0.32px at 16px).
- Set display roles at a 1.0 line-height (72/72, 48/48).
- Left-align the hero.
- Use `rgba(67,87,141,.15)` blue-tinted hairlines, not neutral gray borders.
- Reach for the multi-layer low-opacity shadow scale for lift, alongside the hairline.
- Keep orange `#ff5900` to the primary button and the play link.

### Don't
- Don't render this brand dark — the canvas is white; `#000710` is only the announcement bar and footer.
- Don't use bold (600+) for headlines.
- Don't make buttons full pills — they are 8-10px rounded rectangles at 36-40px.
- Don't add a second accent or a semantic colour palette.
- Don't use orange as a section background.
- Don't center the hero.

## 10. Responsive Behavior

Published breakpoint tokens: `max-width: 600px`, `766px`, `900px`, `960px`, `1023px`, `1200px`, `1800px`, plus `min-width: 1024px`, `min-width: 1366px` and a banded `(min-width: 961px) and (max-width: 1365px)` rule. The 960/1023px pair drives the mega-menu &rarr; drawer switch. Exact mobile type scale-down: not captured.

## 11. Agent Prompt Guide

- Canvas `#ffffff` · Band `#f3f3f7` · Text `#15191e` · Secondary `#60646c` · Muted `#8b8d98` · Border `rgba(67,87,141,.15)` · Accent `#ff5900`
- Font: Inter only · Body: 16/24 at -0.32px · Radius: 8-10px control / 12px card · Control height: 36-40px
- Focus: not captured · Field: 58px card, 12px radius, `rgba(0,0,0,.04) 0 1px 1px` · Hover fill: not captured (durations 40/80/180ms, `cubic-bezier(0,0,.38,.9)`)

<brex_design_language>
Software-native fintech on a bright white canvas broken by pale #f3f3f7 bands, with a blue-black #000710 announcement bar and footer. One family only — Inter — at a strict weight ceiling of 500, with negative tracking at every size: a left-aligned hero at 72/72 and -1.44px, sections at 48/48 and -0.96px, cards at 24/29 and -0.48px, body 16/24 at -0.32px. Text steps down a cool blue-gray ladder: ink #15191e, secondary #60646c, muted #8b8d98. Exactly one accent, Brex orange #ff5900, used only for the primary button fill and the play link — never a band, never body text, with no semantic palette at all. Controls are small rounded rectangles, not pills: 36-40px tall at 8-10px radius. The signature component is the hero email capture — a 58px white card at 12px radius with a 1px rgba(67,87,141,.15) blue-tinted hairline and a rgba(0,0,0,.04) 0 1px 1px shadow, holding a borderless input and an inset orange submit button. Depth comes from a five-step multi-layer rgba(16,24,40,...) shadow scale used together with that hairline; surfaces are otherwise flat — no gradients, glass, grain or WebGL. Motion is fast and short: 40/80/180ms on cubic-bezier(0,0,.38,.9). Feels: precise, modern, restrained, software-native. Avoid: rendering the brand dark, bold headline weights, full-pill buttons, neutral gray borders, a second accent colour, and centering the hero.
</brex_design_language>