Typography
scale ratio 1.351- Intercss: interdisplay + body400 500 60095%
- Flechacss: flechaother5005%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Inter | 72px | 600 | 1 | -0.02em |
| headline | Inter | 48px | 600 | 1 | -0.02em |
| title | Inter | 24px | 600 | 1.208 | -0.02em |
| body | Inter | 16px | 400 | 1.5 | -0.02em |
| body-sm | Inter | 12px | 500 | 1.333 | -0.02em |
Type scale
Aa10Aa12Aa14Aa16Aa20Aa24Aa36Aa48Aa72
- Body size
- 16px / 1.5
- Display size
- 72px
- Display tracking
- -0.02em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 17.65:1
- Muted on bg
- 1.91:1
- Accent on bg
- 3.55:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 8px)
- 4
- 8
- 16
- 20
- 24
- 32
- 48
- 72
- 80
Corner radii
81012pill
Shadows (2)
- Borders
- hairline, 1px
- Section padding
- 80px
Components
exact computed valuesbutton-primary
Get started
- backgroundColor
- #FF3D00
- textColor
- #FCFCFD
- rounded
- 10px
- padding
- 0px 12px
- height
- 36px
- fontFamily
- Inter
- fontSize
- 14px
- fontWeight
- 400
- border
- 1px solid #FF3D00
card
- rounded
- 12px
- padding
- 32px
- backgroundColor
- #FFFFFF
input
- rounded
- 0px
- height
- 36px
- padding
- 8px 2px
Layout & motion
- Container
- 1296px
- Grid columns
- 24
- Hero
- left-over-media
- Navigation
- top-sticky+transparent
- Page height
- 9,061px
- Easing
- linear
- Durations
- 125ms 200ms 250ms 500ms
- Transitions
- 20
- Keyframes
- 0
- Stack
- next.js, segment, vercel
Page sections (19)
section labels are heuristic
01nav
02banner?
03heroFinance built for speed and control.
04feature detail?Trusted by 35,000+ top companies.
05logos
06feature detail?The card is just the start.
07features?Banking and treasury
08feature detail?Solutions for every stage of growth.
09features?Enterprises
10feature detail?Supercharge your financial operations.
11feature detail?Control spend before it happens.
12feature detail?Make doing your expenses easy.
13feature detail?Pay vendors faster and easier.
14feature detail?Save and earn more, only with Brex.
15features?Up to 3.95%†
16content?
17feature detail?See what Brex can do for you.
18feature detail?Trending insights on intelligent finance.
19footerResources
How Brex compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 72px: larger than 70% of indexed sites (median 60px).
- Type scale
- 1.35×: steeper than 69% of indexed sites (median 1.28×).
- Container
- 1296px: wider than 68% of indexed sites (median 1242px).
- Text contrast
- 17.6:1: higher than 51% of indexed sites (median 17.6:1).
- Page length
- 9,061px: longer than 59% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- Flecha
- The only site in the index that loads Flecha.
- Color scheme
- Light by default, like 75% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Brex use?
Brex uses Inter (loaded as "inter") for headings and body text. Flecha (loaded as "flecha") is used for other.
What are Brex's brand colors?
Brex's website uses a light scheme: background #FFFFFF, surface #F3F3F7, text #15191E, muted text #B9BBC6.
How is Brex's website laid out?
The most common corner radius is 0px, body text is 16px with 1.5 line height, and the page container is 1296px wide.
