Typography
scale ratio 1.147- Calibredisplay + body400 500 600 70093%
- GT Alpinaother2007%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Calibre | 120px | 700 | 0.9 | -0.03em |
| headline | Calibre | 62px | 700 | 0.9 | -0.03em |
| title | Calibre | 32px | 600 | 0.9 | -0.03em |
| body | Calibre | 18px | 400 | 1.2 | 0em |
| body-sm | Calibre | 12px | 400 | 1.333 | 0em |
| label | Calibre | 12px | 500 | 1.333 | 0em |
Type scale
Aa11Aa12Aa14Aa18Aa20Aa22Aa24Aa28Aa30Aa32Aa48Aa59Aa62
- Body size
- 18px / 1.2
- Display size
- 120px
- Display tracking
- -0.03em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 15.42:1
- Muted on bg
- 8.82:1
- Accent on bg
- 2.28:1
- Dark mode
- none
Declared accent tokens
- --tk-chart-quantitative-primary#4840BApainted
Space, shape & depth
Spacing scale (base 4px)
- 4
- 4.5
- 6
- 8
- 12
- 15
- 16
- 20
- 24
- 32
- 48
- 64
Corner radii
616pill
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 66px
Components
exact computed valuesbutton-primary
- backgroundColor
- #4840BB
- textColor
- #FFFFFF
- rounded
- 6px
- padding
- 12px 20px
- height
- 45.6px
- fontFamily
- Calibre
- fontSize
- 18px
- fontWeight
- 500
button-secondary
Log in
- textColor
- #DADEF1
- rounded
- 6px
- padding
- 12px 20px
- height
- 47.6px
- fontFamily
- Calibre
- fontSize
- 18px
- fontWeight
- 500
- border
- 1px solid #DADEF1
card
- rounded
- 16px
- padding
- 0px
- backgroundColor
- #FFFFFF
Layout & motion
- Container
- 1344px
- Grid columns
- 2
- Hero
- split
- Navigation
- none-detected
- Page height
- 7,444px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 200ms
- Transitions
- 14
- Keyframes
- 0
- Stack
- next.js, tailwind, radix-ui, google-tag-manager, fastly
Page sections (8)
section labels are heuristic
01features?Learn
02hero4.45% APY Earn up to
03feature detail?Turn savings into wealth
04features?Build your own
05features?Wealthfront beats out Fidelity, Schwab and Vanguard when it comes to direct inde “
06logosSophisticated investing
07features?About
08features?
How Wealthfront compares
- Body text
- 18px: larger than 71% of indexed sites (median 16px).
- Largest heading
- 120px: larger than 95% of indexed sites (median 60px).
- Type scale
- 1.15×: flatter than 97% of indexed sites (median 1.28×).
- Container
- 1344px: wider than 83% of indexed sites (median 1242px).
- Text contrast
- 15.4:1: lower than 72% of indexed sites (median 17.6:1).
- Page length
- 7,444px: shorter than 58% of indexed sites (median 8,217px).
- Corner radius
- Mostly 6px, shared by 14 of 274 indexed sites (5%).
- Calibre
- The only site in the index that loads Calibre.
- GT Alpina
- The only site in the index that loads GT Alpina.
- 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 Wealthfront use?
Wealthfront uses Calibre for headings and body text. GT Alpina is used for other.
What are Wealthfront's brand colors?
Wealthfront's website uses a dark scheme: background #18172B, surface #F0F0F20D, text #F0F0F2, muted text #B7B7C0.
How is Wealthfront's website laid out?
The most common corner radius is 6px, body text is 18px with 1.2 line height, and the page container is 1344px wide.
