---
name: Brex
description: "A perfect example of modern fintech branding that balances corporate authority with aggressive startup energy through precise typography and bold color usage."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#15191E"
  tertiary: "#FF5900"
  neutral: "#8B8D98"
  bg-soft: "#F3F3F7"
  line: "rgba(21, 25, 30, 0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-0.96px"
  heading:
    fontFamily: humanist-sans
    fontSize: 36px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.72px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.28px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Enterprise-grade financial software combining cards, banking, and AI-powered expense management.

*A high-performance financial operating system for modern enterprises.*

## Colors

High-contrast foundation with a single aggressive accent to drive conversion actions.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#15191E`)** — uses `ink` token
- **Accent (`#FF5900`)** — uses `accent` token
- **Muted (`#8B8D98`)** — uses `muted` token
- **Borders (`rgba(21, 25, 30, 0.1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Tight negative letter-spacing on display text for premium feel
- Consistent weight 400 for maximum readability across all sizes
- Generous line-height on body text for improved scanning

## Layout

Single-column hero leading into alternating text/illustration feature rows.

*Rhythm:* Consistent 4px grid with generous whitespace padding (72px horizontal containers) to maintain clean alignment.

## Elevation & Depth

- 0px 1px 0px 0px rgba(66, 87, 138, 0.15)
- 0px 1px 1px 0px rgba(0, 0, 0, 0.04)
- Borders: Minimal 1px solid borders in dark neutral (#15191E) for structural elements.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Solid accent fill for primary actions, ghost or text styles for secondary navigation.
- **card:** Soft grey (#F3F3F7) backgrounds with rounded corners (12px) for feature highlights.
- **chip:** Standardized tag styling for integration partners.
- **input:** Clean bordered field with rounded corners and integrated primary CTA.
- **hero:** Large display typography paired with high-fidelity 3D product renders on a neutral base.

## Do's and Don'ts

**Don't:**
- Don't use warm or playful color palettes — screenshot shows a strict black/white/orange scheme.
- Don't apply excessive drop shadows or 3D effects to UI cards — screenshot shows flat, clean surfaces.
- Don't use decorative or serif fonts for display text — screenshot uses a clean, tight sans-serif.
- Don't clutter the layout with multiple competing accent colors — screenshot uses orange as the sole highlight.
- Don't use low-contrast text for important information — screenshot maintains high legibility with dark ink.
- Don't create loose, airy letter-spacing in headers — screenshot uses tight tracking (-0.96px) for impact.

---

## System Prompt (paste into AI agent)

```
This is a premium fintech SaaS design for Brex, characterized by a clean white (#FFFFFF) background, deep neutral ink (#15191E), and a single aggressive orange accent (#FF5900) for conversion points. Typography relies on a clean, tight grotesque-sans for display headlines (size 48, weight 400, ls -0.96px) and a highly readable humanist-sans for body copy. The layout follows a strict 12-column grid with 24px gutters and 72px horizontal padding, emphasizing generous whitespace and high-fidelity 3D product renders. Critical design constraints include avoiding playful tones, maintaining the single-accent color strategy, and using tight letter-spacing on all display text to convey speed and precision.
```