Skip to main content
Back to Gallery

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.

brex.com/Added
Brex Full Page — desktop screenshot

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.

Mode strategylight-first
  • 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

Save PNG
  • foreground_1k5xs26i
    65%
    • HEX#000000
    • RGBrgb(0, 0, 0)
    • HSLhsl(0, 0%, 0%)
    • OKLCHoklch(0.00% 0.0000 0.00)
  • foreground_1k5xs267x
    10%
    • HEX#15191E
    • RGBrgb(21, 25, 30)
    • HSLhsl(213, 18%, 10%)
    • OKLCHoklch(21.15% 0.0117 254.09)
  • brand
    7%
    • HEX#FF5900
    • RGBrgb(255, 89, 0)
    • HSLhsl(21, 100%, 50%)
    • OKLCHoklch(68.03% 0.2144 39.80)
  • foreground
    6%
    • HEX#8B8D98
    • RGBrgb(139, 141, 152)
    • HSLhsl(231, 6%, 57%)
    • OKLCHoklch(64.53% 0.0165 277.70)
  • foreground
    5%
    • HEX#60646C
    • RGBrgb(96, 100, 108)
    • HSLhsl(220, 6%, 40%)
    • OKLCHoklch(50.25% 0.0136 264.44)
  • background
    3%
    • HEX#FCFCFD
    • RGBrgb(252, 252, 253)
    • HSLhsl(240, 20%, 99%)
    • OKLCHoklch(99.13% 0.0013 286.38)
  • background
    2%
    • HEX#FFFFFF
    • RGBrgb(255, 255, 255)
    • HSLhsl(0, 0%, 100%)
    • OKLCHoklch(100.00% 0.0000 89.76)
  • accent
    0%
    • HEX#000710
    • RGBrgb(0, 7, 16)
    • HSLhsl(214, 100%, 3%)
    • OKLCHoklch(12.30% 0.0288 241.36)
  • foreground
    0%
    • HEX#BFBFBF
    • RGBrgb(191, 191, 191)
    • HSLhsl(0, 0%, 75%)
    • OKLCHoklch(80.47% 0.0000 89.76)

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.

PreviewfgbgRatioNormalLargeAPCA LcContext
Aa
#000000#FFFFFF21.00AAAAAA+106foreground on background
Aa
#FFFFFF#00000021.00AAAAAA-108background on foreground
Aa
#000000#FCFCFD20.48AAAAAA+104foreground on background
Aa
#FCFCFD#00000020.48AAAAAA-106background on foreground
Aa
#FFFFFF#00071020.23AAAAAA-108background on accent
Aa
#000710#FFFFFF20.23AAAAAA+106accent on background
Aa
#FCFCFD#00071019.73AAAAAA-106background on accent
Aa
#000710#FCFCFD19.73AAAAAA+104accent on background
Aa
#15191E#FFFFFF17.65AAAAAA+104foreground on background
Aa
#FFFFFF#15191E17.65AAAAAA-107background 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.

Total30Lazy loaded93%unknown54

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
Page type
  • Full Page
Industry
  • fintech
  • saas
Theme
  • both
Added
  • 2026-06-23

Editorial credit

Featured Sponsor slot — your brand here

Dedicated logo placement — no rotation, on every export.

Become a sponsor

COMPARE THIS WITH

See also

Adjacent patterns worth studying.

AI2 Design counts anonymous traffic always — no cookies, no identifiers, no fingerprinting. For optional session insights (PostHog, EU region) — page funnel, performance — turn on opt-in analytics below. Cookie policy.