The visual approach
Brex's homepage is built on chromatic austerity. The palette anchors on primary: #FF5500, a bright orange that appears almost exclusively in CTAs and progress indicators, against a foundation of dark: #0A1929, gray-900: #111827 for headings, and vast expanses of white: #FFFFFF and gray-100: #F7F7F7. The restraint is deliberate. In fintech marketing, color overload reads as chaos. Here, the orange earns attention because it appears sparingly.
Typography follows the same discipline. Display XL clocks in at 96px with 700 weight, reserved for hero statements. Body copy sits at 16–18px with 400 weight, ensuring readability across long-form value propositions without the fatigue that comes from trying to shout in every paragraph. The scale collapses gracefully on mobile, but the hierarchy never does. A heading is always a heading.
The grid is Tailwind-standard: 8px base unit scaling through 12px, 16px, 24px, 32px, up to 120px for hero spacing. Cards use 32px padding with 16px border radius. Buttons get 8px radius with 12px by 28px padding. The math is unremarkable, which is the point. Brex didn't invent a proprietary spacing system because consistency matters more than novelty when you're asking CFOs to trust you with corporate spend.
What works
The homepage's motion vocabulary does the heavy lifting that color and type deliberately avoid. Scroll-triggered parallax gives product screenshots a faint 3D effect. Hero elements translate at roughly 0.3× scroll speed while foreground cards move at 1×, creating perceived depth without requiring WebGL or taxing mobile GPUs. It's a budget technique that works because the motion is subtle enough to feel discovered rather than imposed.
Staggered reveals handle section transitions. Headlines, body copy, and card grids fade up sequentially with 60–80ms delays between elements. The implementation is likely Intersection Observer with opacity: 0 → 1 and translateY(24px) → 0 over 400ms ease-out. The stagger keeps the page from feeling like a slot machine, but it still rewards scrolling with a sense of progression.
Glassmorphic cards overlay product shots in the spend-limit section, sliding in from the right and bottom as they enter the viewport. The cards use blur and rgba overlays, a trend that aged better than expected because Brex pairs it with legible contrast ratios. The cards aren't decoration; they annotate the UI screenshots beneath them, turning static product imagery into a guided tour.
Hover states are conservative. Primary CTAs lift 2px on hover with shadow expansion over 200ms ease-out, and the orange darkens by roughly five percent. Secondary buttons fill with a light tint over 180ms. Input fields gain an orange border accent and subtle glow on focus. None of this is innovative, but fintech products live or die on trust, and trust grows from predictability. A button that behaves like every other well-built button is a feature, not a missed opportunity.
What a builder can borrow
The color discipline is the easiest win. Pick one accent color, use it for CTAs and state changes, and leave everything else neutral. Brex's primary: #FF5500 appears in buttons, links, and progress bars. That's the list. If you're tempted to add a secondary accent, consider whether you're solving a hierarchy problem or just bored.
The motion system is modular and can be implemented with lightweight libraries or vanilla Intersection Observer. Parallax depth requires tracking scroll position and applying transform offsets to layers at different rates. Staggered reveals are a loop: query all child elements in a section, apply ascending delays to their animation start times. Floating cards are the same reveal logic with directional transforms. None of this requires a motion design system as complex as Framer Motion's spring physics, though that's a valid upgrade path.
The tech stack is a known quantity. Next.js 14+ with Tailwind CSS and TypeScript, hosted on Vercel. The image optimization that makes product screenshots load instantly without layout shift is Next.js Image component defaults. The responsive grid is Tailwind's container queries and breakpoint utilities. The build is fast, the bundle is reasonable, and the developer experience is well-documented. Brex didn't pick this stack because it's interesting. They picked it because it works, and they had a product to ship.