Typography
scale ratio 1.246- Proton Sanscss: ProtonSansbody400 60060%
- Proton Serifcss: ProtonSerifdisplay40041%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Proton Serif | 60px | 400 | 1.06 | -0.04em |
| headline | Proton Serif | 36px | 400 | 1.16 | -0.04em |
| title | Proton Sans | 16px | 600 | 1.625 | 0em |
| body | Proton Sans | 16px | 400 | 1.625 | 0em |
| body-sm | Proton Sans | 12px | 400 | 1.5 | 0em |
Type scale
Aa12Aa14Aa16Aa18Aa20Aa30Aa36Aa48Aa60
- Body size
- 16px / 1.625
- Display size
- 60px
- Display tracking
- -0.04em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 7.56:1
- Muted on bg
- undefined:1
- Accent on bg
- 5.15:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 4
- 6
- 8
- 12
- 16
- 20
- 24
- 32
- 48
- 64
- 96
Corner radii
46pill
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 148px
Components
exact computed valuesbutton-primary
Get it for free
- backgroundColor
- #6D4AFF
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 6px 20px
- height
- 38px
- fontFamily
- Proton Sans
- fontSize
- 16px
- fontWeight
- 600
button-secondary
Get the deal
- backgroundColor
- #FDBA74
- textColor
- #08031F
- rounded
- 9999px
- padding
- 4px 12px
- height
- 30px
- fontFamily
- Proton Sans
- fontSize
- 14px
- fontWeight
- 600
card
- rounded
- 4px
- padding
- 0px
- shadow
- rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(0, 0, 0, 0) 0px 0px 0px 2px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px
Layout & motion
- Container
- 1280px
- Grid columns
- 2
- Hero
- centered+media-below
- Navigation
- none-detected
- Page height
- 10,525px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 300ms
- Transitions
- 70
- Keyframes
- 2
- Stack
- astro, tailwind, shadcn/ui
Page sections (12)
section labels are heuristic
01heroA better internet starts with privacy and freedom
02features?Communicate and browse. Privately.
03features?Store, share, collaborate. Securely.
04features?Defend your digital life from hackers. Effortlessly.
05gallery?Host and join confidential meetings
06feature detail?Powerful AI that respects your privacy.
07feature detail?Protect your business with easy-to-use encrypted solutions.
08features?With Proton, your data belongs to you, not tech companies, governments, or hacke
09features?Over 100 million people and businesses have signed up for Proton
10feature detail?Built by the community, for the community
11testimonialsChoose an internet where your privacy comes first
12footer
How Proton compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 60px: larger than 48% of indexed sites (median 60px).
- Type scale
- 1.25×: flatter than 63% of indexed sites (median 1.28×).
- Container
- 1280px: wider than 55% of indexed sites (median 1242px).
- Text contrast
- 7.6:1: lower than 95% of indexed sites (median 17.6:1).
- Page length
- 10,525px: longer than 70% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Proton Sans
- The only site in the index that loads Proton Sans.
- Proton Serif
- The only site in the index that loads Proton Serif.
- 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 Proton use?
Proton uses Proton Sans (loaded as "ProtonSans") for body text. Proton Serif (loaded as "ProtonSerif") is used for headings.
What are Proton's brand colors?
Proton's website uses a light scheme: background #FFFFFF, surface #F6F7F9, text #4B5563 and borders #9CA3AF4D.
How is Proton's website laid out?
The most common corner radius is fully rounded (pill), body text is 16px with 1.625 line height, and the page container is 1280px wide.
