Typography
scale ratio 1.185- Arcadiacss: arcadiabody360 400 420 480 70068%
- Arcadia Displaycss: arcadiaDisplaydisplay360 48033%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Arcadia Display | 65.34px | 480 | 1.1 | 0em |
| headline | Arcadia | 12px | 400 | 1.4 | 0.02em |
| body | Arcadia | 18px | 360 | 1.35 | 0em |
| label | Arcadia | 16px | 420 | 1 | 0em |
Type scale
Aa12Aa16Aa18Aa21Aa24Aa28Aa32Aa42
- Body size
- 18px / 1.35
- Display size
- 65.34px
- Display tracking
- 0em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 15.25:1
- Muted on bg
- 10.16:1
- Accent on bg
- 3.78:1
- Dark mode
- none
Declared accent tokens
- --icon-primary#5266EBpainted
- --surface-primary#5266EBpainted
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 8
- 12
- 16
- 20
- 24
- 32
- 40
- 72
- 128
Corner radii
412pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- 152px
Components
exact computed valuesbutton-primary
Open account
- backgroundColor
- #5266EB
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 0px 20px
- height
- 40px
- fontFamily
- Arcadia
- fontSize
- 16px
- fontWeight
- 420
button-secondary
Launch demo
- textColor
- #EDEDF3
- rounded
- 9999px
- padding
- 0px 20px
- height
- 40px
- fontFamily
- Arcadia
- fontSize
- 16px
- fontWeight
- 420
- border
- 1px solid #AFB2CE5C
card
- rounded
- 12px
- padding
- 32px
- backgroundColor
- #1E1E2A
input
- rounded
- 32px
- height
- 46px
- padding
- 0px 0px
Layout & motion
- Container
- 1024px
- Grid columns
- 16
- Hero
- centered-over-media+media-below
- Navigation
- top-static
- Page height
- 11,634px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 300ms 500ms 600ms
- Transitions
- 67
- Keyframes
- 3
- Stack
- next.js, tailwind, radix-ui, segment, vercel
Page sections (8)
section labels are heuristic
01nav
02heroRadically different banking
03testimonialsLoved by + of the most ambitious entrepreneurs on the planet 450K
04features?Tackle banking tasks in seconds
05stats?You’re creating something to stand the test of time. So are we.
06features?Mercury hits $5.2B valuation
07features?Mercury for personal
08footerDisclaimers and footnotes
How Mercury compares
- Body text
- 18px: larger than 71% of indexed sites (median 16px).
- Largest heading
- 65.3px: larger than 66% of indexed sites (median 60px).
- Type scale
- 1.19×: flatter than 88% of indexed sites (median 1.28×).
- Container
- 1024px: narrower than 82% of indexed sites (median 1242px).
- Text contrast
- 15.3:1: lower than 73% of indexed sites (median 17.6:1).
- Page length
- 11,634px: longer than 80% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Arcadia
- The only site in the index that loads Arcadia.
- Arcadia Display
- The only site in the index that loads Arcadia Display.
- Color scheme
- Dark by default, like 25% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Mercury use?
Mercury uses Arcadia (loaded as "arcadia") for body text. Arcadia Display (loaded as "arcadiaDisplay") is used for headings.
What are Mercury's brand colors?
Mercury's website uses a dark scheme: background #171721, surface #1E1E2A, text #EDEDF3, muted text #C3C3CC and borders #AFB2CE5C.
How is Mercury's website laid out?
The most common corner radius is fully rounded (pill), body text is 18px with 1.35 line height, and the page container is 1024px wide.
