Typography
scale ratio 1.329- Agile Sanscss: agileSansdisplay + body300 350 400100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Agile Sans | 88px | 300 | 1.1 | -0.02em |
| headline | Agile Sans | 64px | 300 | 1.1 | -0.02em |
| body | Agile Sans | 16px | 300 | 1.25 | 0em |
| body-sm | Agile Sans | 14px | 350 | 1.429 | -0.023em |
| label | Agile Sans | 16px | 350 | 1.6 | -0.02em |
Type scale
Aa14Aa16Aa18Aa20Aa40Aa48Aa64Aa88
- Body size
- 16px / 1.5
- Display size
- 88px
- Display tracking
- -0.02em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 16.80:1
- Muted on bg
- 11.10:1
- Accent on bg
- 16.80:1
- Dark mode
- none
Declared accent tokens
- --knox-background-brand#1A2860not on page
- --knox-progress-indicator-determinate-complete-stroke-color-brand#1A2860not on page
- --__UNSTABLE__knox-web-progress-indicator-determinate-complete-stroke-color-brand#1A2860not on page
- --knox-button-background-color-primary-default#0364D3not on page
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 8
- 10
- 12
- 16
- 20
- 24
- 32
- 48
- 64
- 72
- 96
Corner radii
4162425pill
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 152px
Components
exact computed valuesbutton-primary
Talk to sales
- backgroundColor
- #FFFFFF
- textColor
- #145FE4
- rounded
- 9999px
- padding
- 10px 24px
- height
- 46px
- fontFamily
- Agile Sans
- fontSize
- 16px
- fontWeight
- 400
button-secondary
Get started free
- backgroundColor
- #145FE4
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 10px 24px
- height
- 46px
- fontFamily
- Agile Sans
- fontSize
- 16px
- fontWeight
- 400
Layout & motion
- Container
- 1248px
- Grid columns
- 6
- Hero
- centered+media-below
- Navigation
- top-static
- Page height
- 7,502px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 300ms
- Transitions
- 29
- Keyframes
- 1
- Stack
- next.js, tailwind, contentful, vercel
Page sections (6)
section labels are heuristic
01nav
02heroSecure access for every human and AI agent
03features?One secure platform for humans, AI agents, and machines
04feature detail?1Password named a Leader for SaaS Management Platforms
05feature detail?Bring modern access under control
06footer
How 1Password compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 88px: larger than 86% of indexed sites (median 60px).
- Type scale
- 1.33×: steeper than 64% of indexed sites (median 1.28×).
- Container
- 1248px: wider than 51% of indexed sites (median 1242px).
- Text contrast
- 16.8:1: lower than 61% of indexed sites (median 17.6:1).
- Page length
- 7,502px: shorter than 57% of indexed sites (median 8,217px).
- Corner radius
- Mostly 25px, shared by 1 of 274 indexed sites (0%).
- Agile Sans
- The only site in the index that loads Agile Sans.
- 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 1Password use?
1Password uses Agile Sans (loaded as "agileSans") for headings and body text.
What are 1Password's brand colors?
1Password's website uses a dark scheme: background #1D1D21, surface #3C3D44, text #FFFFFF, muted text #FFFFFFCC and borders #FFFFFF.
How is 1Password's website laid out?
The most common corner radius is 25px, body text is 16px with 1.5 line height, and the page container is 1248px wide.
