Brex · Full Page
Brex
A rare fintech landing carrying corporate authority without a single gradient — Flecha serif display, warm-orange accent, zero-gradient discipline. Balance-sheet trust as an aesthetic.

Editorial disclaimer
Editorial noteThis entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm — do not reproduce brand identity, logo, product copy, or proprietary features.
Curator verdict
Why we catalogued it?
Brex is the rare fintech landing that reads like a balance sheet you'd actually trust — corporate authority delivered without a single gradient to hide behind. We catalogued it because it proves the 2026 enterprise-fintech thesis: a near-black canvas, one decisive warm-orange accent, and an editorial serif doing the persuading while a workhorse sans handles the proof. If you're selling a financial stack to CFOs who audit before they admire, this is the reference to keep open while you build.
Design decisions observed
- Flat-fill confidence over gradient theatrics — Brex builds every surface from solid color blocks (near-black, true white, warm orange) with zero gradients. The page feels engineered, not decorated, which is exactly the signal a finance buyer wants.
- A two-voice type system that splits the labor — a serif display face carries the emotional, brand-building headlines while Inter handles dense product copy and numerics. The serif is the warmth, the sans is the spreadsheet.
- Orange as a single load-bearing accent — one saturated warm orange does all the emphasis work (CTAs, highlights) against an otherwise monochrome black-and-gray field. Restraint makes the accent read as a decision, not decoration.
- Borders and hairline shadows do the structural speaking — elevation is a faint blue-tinted 1px shadow and solid hairline borders, never a heavy bloom. Cards delimit themselves quietly, the way ledger rows do.
- Density tuned for scanning, not skimming — tight 8px-anchored spacing, a generous 1680px wide rail, and a compact heading scale let a finance audience parse a lot of information without feeling marketed at.
What to study
- How a fintech earns premium feel WITHOUT gradients — most SaaS landings lean on mesh gradients for depth; Brex gets there with flat fills, disciplined contrast, and a serif. Steal the discipline: depth from typography and contrast, not from color ramps.
- The serif-plus-sans labor split — study which content gets the editorial serif (emotional headlines) versus the neutral sans (product proof, numbers, UI). The boundary is the whole craft.
- Single-accent governance — orange appears only where action or emphasis genuinely earns the spotlight, against a black/white/gray base. Learn how one warm hue against a cool-neutral field becomes a brand fingerprint.
- Wide-rail enterprise layout — Brex pushes its bounded container to 1680px for data-dense sections. Study how a fintech uses horizontal real estate the way a dashboard would, not the way a consumer page would.
What to avoid
- Don't reach for a gradient to add the depth Brex deliberately omits — the flat-fill discipline is the point. A gradient here would read as decoration on a page that sells trust through restraint.
- Don't let the serif leak into product copy or numerics — its job is emotional headlines only. Mixed into dense UI text it slows the scan and erodes the spreadsheet credibility the sans is protecting.
- Don't dilute the single-accent system by introducing a second brand hue — the warm orange is load-bearing precisely because nothing competes with it.
Taste notes
The page behaves like a well-kept ledger — flat fills instead of gradients, hairline borders instead of bloom, and a single warm orange that lands like a highlighter on an otherwise monochrome statement. The serif display face supplies all the warmth the palette withholds, while Inter and a touch of Space Mono keep the numbers honest. You're being underwritten, not sold to: every decision reads as a position the brand is willing to defend in an audit.
Lineage & references
- The corporate-card archetype that taught fintech to market like enterprise software — Brex sits at the front of the spend-management category it helped define for venture-backed companies.
- Shoulder-to-shoulder with its closest peers Ramp and Mercury — the trio that re-set how modern financial-stack startups present themselves: confident, dense, and allergic to consumer-app gloss. Brex is Ramp's principal rival and shares Mercury's restrained, typography-led register.
- Part of the 2024+ enterprise-fintech sophistication wave (Brex, Ramp, Mercury, Stripe, Rippling) — landing pages that treat financial credibility as a design constraint, where restraint reads as rigor.
Design language brief
Paste-ready for your agent.
A typed design system transfer brief — philosophy, tokens, rules, techniques, and fitness checks. Your agent reads the whole language, not just the pixels.
Philosophy
Corporate-fintech sophistication built from flat fills, not gradients. A near-black #000000 / #15191e canvas pairs with true-white #ffffff surfaces; a single saturated warm orange #ff5900 carries every accent and CTA. Two type voices split the labor — an editorial serif (Flecha) for emotional headlines, Inter Variable for dense product copy and tabular numerics, with Space Mono for code and metadata. Elevation is a faint blue-tinted 1px shadow plus solid hairline borders — never a bloom. Discipline reads as rigor; restraint is the brand.
Main prompt
Use this capture as a design language transfer brief for my project. Adopt the palette (near-black #000000/#15191e canvas + true-white #ffffff surfaces + a single warm-orange #ff5900 accent used sparingly + cool grays #8b8d98/#60646c for de-emphasis), the two-voice typography (a serif display family for emotional headlines, Inter for product copy and tabular numerics, Space Mono for code/metadata), the 8px-anchored spacing scale on a wide 1680px rail, flat-fill surfaces with NO gradients, hairline-border + faint-shadow elevation, and a moderate Framer Motion vocabulary (0.125s / 0.2s / 0.5s on linear / cubic-bezier(0,0,0.38,0.9) / ease-in-out) across every page and component I ship. Treat this as my project's constitution — any new component should pass as if crafted in the same studio. Apply the language, not the source brand's specific copy or identity. Never introduce a gradient — flat fill is the discipline. When I ask you to build a page or component, enforce these rules by default and call out any decision that deviates.
Overview
- Layout
- Grid
- Content width
- Bounded
- Framing
- Flat
- Grid strength
- Strong
Color philosophy
Monochrome enterprise field with one warm accent. Near-black #000000 (the dominant text/ink color, 1277 measured occurrences) and panel-black #15191e anchor the canvas; true-white #ffffff and near-white #fcfcfd carry surfaces. A single saturated warm orange #ff5900 (HSL 21,100,50) is the only brand-tier color and is reserved for accents/CTAs. Cool grays #8b8d98 and #60646c descend for captions and de-emphasized labels. Critically: NO gradients — every surface is a flat fill.
- Ink #000000 (1277 occurrences) is the dominant text color; panel-black #15191e (200 occurrences) for darker surfaces and secondary text
- Surfaces are flat white #ffffff (background) and near-white #fcfcfd — paired against near-black ink for ~18:1 contrast
- Warm orange #ff5900 is the ONLY brand-tier color (144 occurrences, accent usage) — restrict to CTAs, key emphasis, and active states; keep surface area under ~5%
- Cool gray descender #8b8d98 then #60646c for captions, metadata, and de-emphasized labels — never for primary reading text
- Hairline border tint #42578a (blue-gray) appears only inside the faint elevation shadow — not as a fill
Typography rules
- Two-voice system. Display/emotional headlines: Flecha (serif, self-hosted woff2, display: optional) — observed at 36px/40px weight 500. Body + product copy + UI: Inter (self-hosted woff2, display: swap). Code/metadata: Space Mono (monospace).
- Weight ladder: 400 (body reading) / 500 (headings + UI labels) / 600 (bold emphasis, via font-variation 'wght' 600). Do not reach past 600 — Brex stays restrained.
- Inter heading scale (observed): 72px hero (lh 72px, tracking -1.44px) / 48px (lh 48px, -0.96px) / 36px (lh 36px, -0.72px) / 24px (lh 29px, -0.48px) / 20px (lh 24px, -0.4px). Negative px tracking tightens as size grows.
- Body Inter 16px weight 400 line-height normal; small 14px (lh 20-21px, -0.28px); caption 10-12px. Tracking is px-based and negative at every step.
- Serif (Flecha) is reserved for emotional/brand headlines ONLY — never product copy, never numerics, never dense UI. The serif supplies warmth the flat palette withholds.
- Tabular numerals on Inter for any aligned financial column: `font-variant-numeric: tabular-nums`. Space Mono handles inline code and kbd.
- Paragraph max ~50-60 ch at 16px body; dense data rows may run wider on the 1680px rail at 14px.
Spacing rules
- Dominant base is 8px (130 measured occurrences) with a 4px micro-step. Scale: 4 / 8 / 12 / 16 / 20 / 24 / 28 / 32 / 48 / 72 px — 8/16/24/32/48/72 carry the rhythm.
- Container max-width 1680px (the observed container-md) for data-dense enterprise sections; narrow content clusters bound to ~400px (container-sm).
- Section vertical rhythm leans on the larger steps: 48 / 72px desktop blocks; smaller 24/32px between grouped elements.
- Card padding: 16-24px typical; tighter 12px on dense rows. Always pick from the scale — no magic numbers.
- Gutter values for flex/grid: 4 / 8 / 16 / 20 / 24 px (8 and 16 dominate). 1px is reserved for hairline insets only.
Design tokens
Palette, type, and space — all agent-readable.
11 colors · hex / rgb / hsl / oklch
- foreground_1k5xs26i65%
- HEX
#000000 - RGB
rgb(0, 0, 0) - HSL
hsl(0, 0%, 0%) - OKLCH
oklch(0.00% 0.0000 0.00)
- HEX
- foreground_1k5xs267x10%
- HEX
#15191E - RGB
rgb(21, 25, 30) - HSL
hsl(213, 18%, 10%) - OKLCH
oklch(21.15% 0.0117 254.09)
- HEX
- brand7%
- HEX
#FF5900 - RGB
rgb(255, 89, 0) - HSL
hsl(21, 100%, 50%) - OKLCH
oklch(68.03% 0.2144 39.80)
- HEX
- foreground6%
- HEX
#8B8D98 - RGB
rgb(139, 141, 152) - HSL
hsl(231, 6%, 57%) - OKLCH
oklch(64.53% 0.0165 277.70)
- HEX
- foreground5%
- HEX
#60646C - RGB
rgb(96, 100, 108) - HSL
hsl(220, 6%, 40%) - OKLCH
oklch(50.25% 0.0136 264.44)
- HEX
- background3%
- HEX
#FCFCFD - RGB
rgb(252, 252, 253) - HSL
hsl(240, 20%, 99%) - OKLCH
oklch(99.13% 0.0013 286.38)
- HEX
- background2%
- HEX
#FFFFFF - RGB
rgb(255, 255, 255) - HSL
hsl(0, 0%, 100%) - OKLCH
oklch(100.00% 0.0000 89.76)
- HEX
- accent0%
- HEX
#000710 - RGB
rgb(0, 7, 16) - HSL
hsl(214, 100%, 3%) - OKLCH
oklch(12.30% 0.0288 241.36)
- HEX
- foreground0%
- HEX
#BFBFBF - RGB
rgb(191, 191, 191) - HSL
hsl(0, 0%, 75%) - OKLCH
oklch(80.47% 0.0000 89.76)
- HEX
Inspector
Tab through the captured artifacts.
Six observable layers — page structure, fonts, breakpoints, z-index, gradients, motion — kept paste-ready alongside the tokens above.
Page structure
Semantic hierarchy at a glance.
Depth-first walk of meaningful sections — header, navigation, main regions, articles, footer. 19 nodes captured; depth capped at 6 for readability.
- body
- └─ div
- └─ div
- ├─ div (×2)
- │ └─ Section
- ├─ Main
- │ └─ Section
- │ ├─ div
- │ │ └─ Section
- │ ├─ Section (×5)
- │ ├─ div
- │ │ └─ Section
- │ ├─ Section
- │ ├─ div (×2)
- │ │ └─ Section
- │ └─ [+13 more]
- └─ div
- └─ Footer
- └─ Nav
Accessibility
WCAG contrast matrix.
92 combinations · 44 pass AA · 26 pass AAA · APCA Lc shown alongside WCAG 2.1 ratio for draft WCAG 3 awareness.
| Preview | fg | bg | Ratio | Normal | Large | APCA Lc | Context |
|---|---|---|---|---|---|---|---|
Aa | #000000 | #FFFFFF | 21.00 | AAA | AAA | +106 | foreground on background |
Aa | #FFFFFF | #000000 | 21.00 | AAA | AAA | -108 | background on foreground |
Aa | #000000 | #FCFCFD | 20.48 | AAA | AAA | +104 | foreground on background |
Aa | #FCFCFD | #000000 | 20.48 | AAA | AAA | -106 | background on foreground |
Aa | #FFFFFF | #000710 | 20.23 | AAA | AAA | -108 | background on accent |
Aa | #000710 | #FFFFFF | 20.23 | AAA | AAA | +106 | accent on background |
Aa | #FCFCFD | #000710 | 19.73 | AAA | AAA | -106 | background on accent |
Aa | #000710 | #FCFCFD | 19.73 | AAA | AAA | +104 | accent on background |
Aa | #15191E | #FFFFFF | 17.65 | AAA | AAA | +104 | foreground on background |
Aa | #FFFFFF | #15191E | 17.65 | AAA | AAA | -107 | background on foreground |
Image strategy
Asset loading & format policy.
Observable image posture — total count, lazy-loading ratio, and format mix. Hero image is measured above the fold.
Hero image
https://www.brex.com/_next/image?url=https%3A%2F%2Fbrand.brex.com%2Ftransform%2F34b1e6c6-3bd8-4879-96e8-8f85c550c68a%2FHP-Hero-Desktop&w=1920&q=85- Format
- UNKNOWN
- Dimensions
- 1799×867
- Loading
- eager
- srcset
- yes
- srcset descriptor
- /_next/image?url=https%3A%2F%2Fbrand.brex.com%2Ftransform%2F34b1e6c6-3bd8-4879-96e8-8f85c550c68a%2FHP-Hero-Desktop&w=640&q=85 640w, /_next/image?url=https%3A%2F%2Fbrand.brex.com%2Ftransform%2F34b1e6c6-3bd8-4879-96e8-8f85c550c68a%2FHP-Hero-Desktop&w=750&q=85 750w, /_next/image?url=https%3A%2F%2Fbrand.brex.com%2Ftransform%2F34b1e6c6-3bd8-4879-96e8-8f85c550c68a%2FHP-Hero-Desktop&w=828&q=85 828w, /_next/image?url=https%3A%2F%2Fbrand.brex.com%2Ftransform%2F34b1e6c6-3bd8-4879-96e8-8f85c550c68a%2FHP-Hero-Desktop&w=1080&q=85 1080w, /_next/image?url=https%3A%2F%2Fbrand.brex.com%2Ftransform%2F34b1e6c6-3bd8-4879-96e8-8f85c550c68a%2FHP-Hero-Desktop&w=1200&q=85 1200w, /_next/image?url=https%3A%2F%2Fbrand.brex.com%2Ftransform%2F34b1e6c6-3bd8-4879-96e8-8f85c550c68a%2FHP-Hero-Desktop&w=1920&q=85 1920w, /_next/image?url=https%3A%2F%2Fbrand.brex.com%2Ftransform%2F34b1e6c6-3bd8-4879-96e8-8f85c550c68a%2FHP-Hero-Desktop&w=2048&q=85 2048w, /_next/image?url=https%3A%2F%2Fbrand.brex.com%2Ftransform%2F34b1e6c6-3bd8-4879-96e8-8f85c550c68a%2FHP-Hero-Desktop&w=3840&q=85 3840w
- Full Page
- fintech
- saas
- both
- 2026-06-23
Editorial credit
Featured Sponsor slot — your brand here
Dedicated logo placement — no rotation, on every export.
COMPARE THIS WITH
Side-by-side reads sharing this design signal.
See also


