Typography
scale ratio 1.347- Mt Sanscss: mt-sansbody330 360 500 60050%
- Mt Neue Displaycss: mt-neue-displaydisplay45031%
- Mt Monocss: mt-monomono400 50010%
- Mt Neue Textcss: mt-neue-textother4009%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Mt Neue Display | 71px | 450 | 1.1 | 0em |
| headline | Mt Neue Display | 47px | 450 | 1.25 | 0em |
| title | Mt Neue Text | 32px | 400 | 1.25 | 0em |
| body | Mt Sans | 16px | 360 | 1.5 | 0em |
| body-sm | Mt Mono | 13px | 400 | 1.692 | 0em |
| label | Mt Sans | 14px | 330 | 1.5 | 0em |
Type scale
Aa10Aa11Aa12.5Aa13Aa14Aa16Aa18Aa21Aa32Aa47Aa71
- Body size
- 16px / 1.5
- Display size
- 71px
- Display tracking
- 0em
- Case
- title
Color
light schemePalette by painted area
- Text on bg
- 18.26:1
- Muted on bg
- 9.77:1
- Accent on bg
- 18.26:1
- Dark mode
- none
Declared accent tokens
- --color-accent#29735Cpainted
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 6
- 8
- 12
- 14
- 16
- 20
- 22
- 24
- 32
- 40
- 48
- 60
Corner radii
28pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- 120px
Components
exact computed valuesbutton-primary
Talk to us
- backgroundColor
- #151515
- textColor
- #FFFFFF
- rounded
- 2px
- padding
- 8px 14px
- height
- 40px
- fontFamily
- Mt Sans
- fontSize
- 16px
- fontWeight
- 600
- shadow
- rgb(21, 21, 21) 0px 0px 0px 1px inset
card
- rounded
- 8px
- padding
- 0px
- backgroundColor
- #F8F5F4
input
- rounded
- 0px
- height
- 40px
- padding
- 8px 12px
- backgroundColor
- #FFFFFF
Layout & motion
- Container
- 1200px
- Grid columns
- 3
- Hero
- centered+media-below
- Navigation
- top-sticky+blur
- Page height
- 6,108px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 200ms 300ms 420ms
- Transitions
- 84
- Keyframes
- 0
- Stack
- next.js, tailwind, shadcn/ui, sanity, vercel
Page sections (10)
section labels are heuristic
01nav
02hero
03feature detail?Build Products That Move Money
04feature detail?Platform Pay-Ins and Payouts
05content?
06code sample?One API, from Onboarding to Reconciliation
07features?Get Live. Keep Building.
08testimonials
09cta?Start Moving Money
10footer
How Modern Treasury compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 71px: larger than 69% of indexed sites (median 60px).
- Type scale
- 1.35×: steeper than 67% of indexed sites (median 1.28×).
- Container
- 1200px: narrower than 57% of indexed sites (median 1242px).
- Text contrast
- 18.3:1: higher than 56% of indexed sites (median 17.6:1).
- Page length
- 6,108px: shorter than 70% of indexed sites (median 8,217px).
- Corner radius
- Mostly 2px, shared by 10 of 274 indexed sites (4%).
- Mt Sans
- The only site in the index that loads Mt Sans.
- Mt Neue Display
- The only site in the index that loads Mt Neue Display.
- 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 Modern Treasury use?
Modern Treasury uses Mt Sans (loaded as "mt-sans") for body text. Mt Neue Display (loaded as "mt-neue-display") is used for headings. Mt Mono (loaded as "mt-mono") is used for code.
What are Modern Treasury's brand colors?
Modern Treasury's website uses a light scheme: background #FFFFFF, surface #F8F7F5, text #151515, muted text #151515CC and borders #FFFFFF33.
How is Modern Treasury's website laid out?
The most common corner radius is 2px, body text is 16px with 1.5 line height, and the page container is 1200px wide.
