Software-native fintech on a bright white canvas (not the dark look the category expects): one Inter family capped at weight 500 with negative tracking at every size, a left-aligned 72/72 hero, distinctive blue-tinted hairlines paired with a five-step multi-layer shadow scale, rounded-rectangle controls rather than pills, and exactly one orange accent on the primary button and play link.
Browse Brex in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
| 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 |
| 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 |
| 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.
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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.