Brex Design System

Overview

Brex's marketing surface opens with a contradiction: a financial-software brand that picks a warm orange #ff5900 over the category-default cool indigo or fintech navy. The hex hits the page in just three background spots — the "Get started" hero CTA, an inline accent on the announcement pill, and a hover-reveal underline — but every primary action across every section rides that one warm voltage. Beneath the orange sits a near-black ink #15191e for type and an off-white canvas #fcfcfd for surface. The palette runs disciplined: 18 documented tokens total, one accent, six neutrals, four hairline alphas, three shadow alphas.

Warm voltage is the brand's signature move. Where Stripe carries electric indigo, Ramp carries lime, and Mercury carries near-monochrome restraint, Brex commits to a single saturated red-orange and lets it carry the page alone. The supporting cast is intentionally cool: hairlines render in rgba(66,87,138,0.15) (a desaturated blue at 15% alpha), the dark footer band fills with pure #000000, and shadows wash in rgba(16,24,40,0.05–0.16) (cool slate). The page therefore reads warm-on-cool — the orange CTA sits at the center of every band, framed by blue-edged cards and slate-shadowed lift.

Weight-500 architecture: the entire display tier (14px through 72px) renders in Inter at weight 500 with proportionally tightening negative letter-spacing — -1.44px at 72px down to -0.14px at 14px. The 72px hero "Finance built for speed and control." sits at one weight; the 48px section openers sit at the same weight; the 36px card titles sit at the same weight. Where most spend-management marketing climbs to weight 600 or 700 for display impact, Brex holds the entire ladder at 500 — confidence through consistent mid-weight rather than bold-weight muscle. A serif (Flecha) and a monospaced family (Space Mono) layer in for two specific roles: editorial card titles and numeric callouts.

Key Characteristics:

• Single warm-orange CTA voltage — #ff5900 is the only filled-button color across every marketing band.
• Inter weight-500 display tier from 14px to 72px — no weight changes across the ladder, only size and tracking.
• 10px-radius pill button at 36px tall — tight transactional geometry between full-pill (9999px) and technical-square (6px).
• Cool-blue hairline rgba(66,87,138,0.15) on every card and input — chromatic counterpoint to the warm orange.
• Three-family typographic chord — Inter for chrome, Flecha for editorial serif, Space Mono for numeric callouts.
• 60px sticky top nav with --brex-nav-height token plus a calc(60px + 24px) scroll-padding compensation.
• Black #000000 dark band for the announcement bar and footer — pure black, never the near-black #15191e ink.

Colors

Source pages: home (/), announcement band, hero, "Trusted by 35,000+" logo strip, "Card is just the start" feature grid.

Brand & Accent

• Orange ({colors.primary} — #ff5900) — frequency 85. Used as text (40), border (42), background (3). The brand's single filled-CTA voltage; reserved for button-primary fills, inline link emphasis on hover, and a small accent dot inside the announcement pill.

Text

• Ink ({colors.ink} — #15191e) — frequency 138. Used as text (71), border (67). The default body-text and heading color across the brand. A near-black with a faint blue undertone (oklch hue 254), warmer than pure black; carries hero, section headlines, and nav-link rest state.
• Ink Mute ({colors.ink-mute} — #60646c) — frequency 44. Used as text (22), border (22). The brand's H2 sub-heading color and helper-text fill (the "Cards, banking, expenses, accounting" sub-headline beneath the hero).
• Ink Mute 2 ({colors.ink-mute-2} — #6f737b) — frequency 15. Used as text (8), border (7). A slightly warmer mid-tone; appears on caption labels and footer-link rest state.
• Ink Soft ({colors.ink-soft} — #8b8d98) — frequency 62. Used as text (31), border (31). Scoped to placeholder text, disabled states, and metadata labels.
• Ink Disabled ({colors.ink-disabled} — #b9bbc6) — frequency 38. Used as text (19), border (19). The disabled-button text color and the lightest still-legible neutral.

Surface

• Canvas ({colors.canvas} — #fcfcfd) — frequency 78. Used as background (39), text (21), border (18). The default page and card surface — a 0.5%-tinted off-white that reads paper-white but renders softer than pure white (which collapses into the same merged token).
• Canvas Deep ({colors.canvas-deep} — #000710) — frequency 3. Used as background (3). The deep navy-black used as a dashboard-mockup chrome fill and the dark-card surface — distinct from the pure-#000000 footer.
• Dark Surface ({colors.dark-surface} — #000000) — frequency 1168. Used as text (585), border (582), shadow (1). Pure black, the dominant chromatic value on the page by raw count — fills the announcement bar, the bottom footer band, and card-dark surfaces. Despite the high count, never used as primary body text (that role belongs to #15191e).

Hairline & Edge

• Hairline ({colors.hairline} — #42578a) — frequency 3. Used as border (2), shadow (1). The full-saturation cool blue from which the alpha-15% hairline derives.
• Hairline Soft ({colors.hairline-soft} — rgba(66,87,138,0.15)). Used as the default 1px border on cards, inputs, and modal chrome — the brand's signature cool-blue edge against the warm orange CTA.
• Hairline Cool ({colors.hairline-cool} — rgba(21,25,30,0.1)). Used on darker surfaces where the blue alpha would disappear; a 10%-alpha near-black hairline.
• Hairline Cool 3 ({colors.hairline-cool-3} — rgba(21,25,30,0.3)). A heavier hairline used on focused-input borders and table dividers.
• Hairline Cool 4 ({colors.hairline-cool-4} — rgba(21,25,30,0.4)). The strongest documented hairline alpha, reserved for hover-state borders on dense table chrome.

Shadow

• Shadow SM ({colors.shadow-sm} — rgba(16,24,40,0.05)). The lightest documented shadow alpha; combined with two other stops to form the resting card-feature-shadow.
• Shadow MD ({colors.shadow-md} — rgba(16,24,40,0.09)). The middle alpha used as the dominant blur in card lifts.
• Shadow LG ({colors.shadow-lg} — rgba(16,24,40,0.16)). The heaviest documented alpha, used on floating panels and modal chrome.
• Shadow Hairline ({colors.shadow-hairline} — rgba(16,24,40,0.04)). A 1px inset shadow that doubles as a faint hairline on shadowed cards.

Typography

Font Family

The chrome and product tier is Inter at weights 400 and 500 — declared as 'inter', 'inter Fallback', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif. The hero, every section heading, every body paragraph, every nav link, and every button label renders in Inter.

Two secondary families layer in:

• Flecha (proprietary serif via --font-flecha) — used for editorial card titles where the brand wants a softer voice. A single instance captured on the homepage: a 36px / 500 / 1.11 leading h4 in the feature grid.
• Space Mono (loaded via --font-space-mono) — used in numeric callouts, account-number chips, and code-style amount displays. The monospaced rhythm reinforces the financial-data signal where columns of numbers need to align.

Hierarchy

Principles

• Weight 500 is the display anchor. Every display tier from 24px through 72px renders at weight 500. Dropping to 400 collapses display into body; climbing to 600 breaks the architectural rhythm.
• Negative tracking scales with size. -1.44px at 72px, -0.96px at 48px, -0.72px at 36px, -0.48px at 24px, -0.4px at 20px, -0.32px at 16px. Body sizes (14px and below) carry tighter ratios that hold up at small render.
• Uppercase eyebrows carry positive tracking. The label-cap token inverts the tracking direction — 0.6px positive plus uppercase text-transform — so the all-caps label opens up rather than crunches.
• Reserve Flecha for editorial moments. The serif is not a general-purpose heading family; it appears once or twice per page to break the Inter rhythm at a specific feature card.
• Reserve Space Mono for numerics. Account numbers, amounts, transaction codes, and inline code. Not a paragraph face.

Layout

Spacing System

• Base unit: 8px (with 2 / 4 / 12 sub-tokens for fine work).
• Tokens: {spacing.xxs} 2px · {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 48px · {spacing.3xl} 72px.
• Section padding: 72–80px vertical on marketing surfaces; the captured page hits 80px 0px 48px as the dominant section rhythm.
• Page horizontal padding: 72px outside the 1200px content max — captured as 0px 72px 24 times in the extraction.
• Card internal padding: 24px on feature cards; 32px on dark and pricing surfaces.

Grid & Container

• Marketing pages center in a ~1200px container (--_1k5xs26fa: 1200px) with 0px 72px outer gutters.
• Hero h1 wraps in a 768px column inside the 1200px container, leaving generous right-rail space for the credit-card mockup.
• Feature grid runs 4-up on desktop, 2-up at tablet, 1-up on mobile.

Whitespace Philosophy

Brex pads generously: 72px between sections, 80px around the hero, 48px between a section heading and its content. The 60px sticky nav plus a calc(60px + 24px) scroll-padding-top compensation (--brex-scroll-padding) means deep-linked anchors always land 84px below the viewport top — the nav never covers a target heading.

Elevation & Depth

Decorative Depth

Brex layers three shadow stops on every elevated card — a tight inner stop (0px 0px 2px 1px) acting as a near-hairline, a soft mid stop (0px 6px 10px -4px) carrying the lift, and an outer stop (0px 0px 6px) softening the edge. The triple-stop approach reads more architectural than the single-blur shadow most card systems use. The cool-blue hairline rgba(66,87,138,0.15) doubles as a flat-state "depth" cue when shadow would feel heavy.

Shapes

Border Radius Scale

The brand's signature is the 10px middle radius — between the technical-square 6px and the full-pill 9999px. The primary button, secondary button, and text input all sit at 10px. Feature cards step up one tier to 12px. Pills are reserved for announcement bars and avatars, never buttons.

Components

Buttons

button-primary — the dominant CTA system-wide.

• Background {colors.primary} (#ff5900), text {colors.canvas} (#fcfcfd), border {colors.primary}. Type {typography.button-md} (Inter 14 / 400 / 22px leading). Rounded {rounded.md} (10px). Padding 0px 12px. Height 36px. No rest-state shadow.

button-secondary — outline alternative on light surfaces.

• Background {colors.canvas}, text {colors.ink}, 1px {colors.hairline-soft} border (no fill). Same geometry as primary.

button-on-dark — primary alternative on the dark announcement bar and footer.

• Background {colors.dark-surface} (#000000), text {colors.on-dark} (#fcfcfd). Same geometry.

Inputs & Forms

text-input — the work-email and contact-form field.

• Background {colors.canvas}, text {colors.ink}, 1px {colors.hairline-soft} border. Type {typography.body-md} (Inter 14 / 400 / -0.28px). Rounded {rounded.md} (10px). Padding 8px 2px. Height 36px (matches button height for inline pairing).
• Focus state text-input-focused swaps border to {colors.ink} — no orange focus ring.

Navigation

top-nav — 60px sticky top bar (--brex-nav-height: 60px).

• Background {colors.canvas} (or transparent over hero), text {colors.ink}, type {typography.body-lg}. Padding 0px 24px. Height 60px. Logo wordmark on the left, primary nav center, sign-in link plus button-primary on the right.

Cards & Containers

card-feature — flat hairlined feature card.

• Background {colors.canvas}, text {colors.ink}, 1px {colors.hairline-soft} border. Padding 24px. Rounded {rounded.lg} (12px). No shadow at rest.

card-feature-shadow — feature card with hover-or-prominent lift.

• Same surface, swaps border for the triple-stop Level 3 shadow.

card-dark — inverted dark feature card.

• Background {colors.canvas-deep} (#000710), text {colors.on-dark}. Padding 32px. Used for "Solutions for every stage of growth" feature explanations.

Signature Components

hero-section — the 72px Inter h1 plus 20px Inter sub-heading composition.

• Background {colors.canvas}, padding 72px 24px. The 72-pixel display headline sits in a 768px column with the credit-card mockup floating right.

announcement-pill — the top dark band carrying "Spring Release 2026" announcements.

• Background {colors.dark-surface} (#000000), text {colors.canvas}, type {typography.body-sm}, rounded {rounded.full} (9999px). Padding 4px 12px.

eyebrow-label — uppercase section eyebrow with positive tracking.

• Text {colors.ink-mute} (#60646c), type {typography.label-cap} (12 / 500 / 0.6px / uppercase). The brand's primary section-prefix pattern.

mono-amount — Space Mono numeric chip.

• Background {colors.canvas}, text {colors.ink}, type {typography.mono-callout} (Space Mono 14 / 400). Rounded {rounded.sm} (6px). Padding 4px 8px. Used for account numbers, transaction codes, and inline money amounts.

link-on-light — inline link on light surfaces.

• Text {colors.primary} (#ff5900) rendered in {typography.body-md}. No underline at rest; underline on hover.

divider-hairline — horizontal 1px section divider.

• Background {colors.hairline-soft} (rgba(66,87,138,0.15)), height 1px. Used between section bands when the visual rhythm needs a quiet seam.

footer-dark — the pure-black footer band.

• Background {colors.dark-surface} (#000000), text {colors.canvas}, type {typography.body-sm}. Padding 72px 24px. Holds 4-column link groups and the brand wordmark.

Do's and Don'ts

Do

• Reserve #ff5900 for filled CTAs and inline link emphasis — one filled button-primary per band.
• Render the entire display tier (24–72px) at Inter weight 500. Drop to 400 for body, never for display.
• Scale negative letter-spacing proportionally with size — -1.44px at 72px through -0.24px at 12px.
• Use the cool-blue hairline rgba(66,87,138,0.15) on every flat card and input — it's the brand's signature edge.
• Reserve Flecha for one or two editorial feature-card titles per page; reserve Space Mono for numeric callouts.
• Apply the --brex-scroll-padding: calc(60px + 24px) offset on the html element so anchor scrolls land below the 60px sticky nav.

Don't

• Don't use #15191e ink as a background fill — it's a 138-occurrence text-and-border token (71 text, 67 border, 0 background). For dark surfaces use #000000 (dark-surface) or #000710 (canvas-deep) instead.
• Don't replace the 10px button radius with the 9999px full pill — pills are reserved for the announcement bar and avatars, not transactional buttons.
• Don't render the 36px button-height taller — the compact 36px is part of the brand's transactional density and matches the 36px text-input height for inline pairing.
• Don't add a second filled-CTA color to the page. #ff5900 is the only filled-button color — secondary actions render as outlined button-secondary against rgba(66,87,138,0.15) borders.
• Don't apply tabular-figure features to Inter body text — Brex's numeric signal lives in Space Mono callouts (mono-amount), not in Inter body via tnum.
• Don't drop the eyebrow-label letter-spacing to 0 — the uppercase eyebrow requires 0.6px positive tracking to open up. Tracked-tight all-caps reads cramped.

Known Gaps

• Hover and focus states for button-primary: only the rest state was extracted live. The hover-state hex #e64f00 in the component spec is an inferred darker step from the orange; the live hover and focus rings were not captured.
• Product-app semantic palette: error, success, and warning states live inside the authenticated dashboard at dashboard.brex.com and are not part of this marketing-system spec.
• Motion specs: the homepage uses scroll-triggered card reveals and a subtle hover-lift transition (box-shadow 0.2s ease-out, transform 0.3s ease-in-out captured as --_1k5xs26e7); the full motion vocabulary is not documented here.
• Dark mode: Brex's marketing site does not surface a dark-mode toggle; if a dark mode token set exists internally for the product app, it was not captured.
• Sub-brand accents: Brex Capital, Brex Travel, and Brex AI Agents may carry small accent palettes layered on top of the core orange system — not captured.
• Loading skeletons and chart palettes: the dashboard mockups visible on the homepage include chart colors that live in their own product-app token set, not the core marketing palette.