Typography
scale ratio 1.188- Intercss: Inter Variabledisplay + body300 500 600 70099%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Inter | 60px | 600 | 1.15 | -0.04em |
| headline | Inter | 28px | 500 | 1.1 | -0.024em |
| title | Inter | 47.33px | 600 | 1.1 | -0.014em |
| body | Inter | 18px | 300 | 1.556 | 0em |
| body-sm | Inter | 16px | 300 | 1.5 | 0em |
Type scale
Aa12Aa14Aa16Aa18Aa20Aa24Aa28Aa30Aa35.5Aa47.5Aa60
- Body size
- 18px / 1.556
- Display size
- 60px
- Display tracking
- -0.04em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- 6.64:1
- Accent on bg
- 5.78:1
- Dark mode
- follows system
Declared accent tokens
- --color-primaryBlue#175DDCpainted
Space, shape & depth
Spacing scale (base 4px)
- 4
- 8
- 12
- 16
- 20
- 24
- 32
- 36
- 40
- 48
Corner radii
81220pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- 104px
Components
exact computed valuesbutton-primary
Get Started Free
- backgroundColor
- #175DDC
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 12px 20px
- height
- 52px
- fontFamily
- Inter
- fontSize
- 16px
- fontWeight
- 500
- border
- 2px solid #175DDC
button-secondary
Talk to Sales
- textColor
- #000000
- rounded
- 9999px
- padding
- 12px 20px
- height
- 52px
- fontFamily
- Inter
- fontSize
- 16px
- fontWeight
- 500
- border
- 2px solid #175DDC
card
- rounded
- 20px
- padding
- 0px
- backgroundColor
- #FFFFFF
- border
- 1px solid #D8E2EB
input
- rounded
- 8px
- height
- 48px
- padding
- 12px 12px
- backgroundColor
- #FFFFFF
- border
- 1px solid #99A7B5
Layout & motion
- Container
- 1368px
- Grid columns
- 5
- Hero
- centered+media-below
- Navigation
- top-sticky+transparent
- Page height
- 8,772px
- Easing
- cubic-bezier(0.4, 0, 1, 1)
- Durations
- 100ms 150ms 200ms 500ms
- Transitions
- 93
- Keyframes
- 1
- Stack
- react, tailwind, hubspot, google-tag-manager
Page sections (6)
section labels are heuristic
01hero
03testimonialsBuilt differently from other password managers
04testimonialsFrom startups to businesses, teams rely on Bitwarden every day
05features?Get trusted password security today. Pick your plan.
06footerSign up for Bitwarden news!
How Bitwarden compares
- Body text
- 18px: larger than 71% of indexed sites (median 16px).
- Largest heading
- 60px: larger than 48% of indexed sites (median 60px).
- Type scale
- 1.19×: flatter than 86% of indexed sites (median 1.28×).
- Container
- 1368px: wider than 94% of indexed sites (median 1242px).
- Text contrast
- 21.0:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 8,772px: longer than 55% of indexed sites (median 8,217px).
- Corner radius
- Mostly 20px, shared by 4 of 274 indexed sites (1%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- Color scheme
- Light by default, like 75% of indexed sites. It is one of 49 sites (18%) that switch with the system dark mode setting.
In short
What font does Bitwarden use?
Bitwarden uses Inter (loaded as "Inter Variable") for headings and body text.
What are Bitwarden's brand colors?
Bitwarden's website uses a light scheme: background #FFFFFF, surface #F3F6F9, text #000000, muted text #555D6B and borders #D8E2EB.
How is Bitwarden's website laid out?
The most common corner radius is 20px, body text is 18px with 1.556 line height, and the page container is 1368px wide.
