Typography
scale ratio 1.261- Ondisplay + body400 700100%
- On Monomono5000%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | On | 49.58px | 700 | 1.1 | -0.01em |
| body | On | 15.31px | 400 | 1.5 | 0em |
| label | On | 16px | 400 | 1.5 | 0.013em |
| mono | On Mono | 12px | 500 | 1.5 | 0.12em |
Type scale
Aa12Aa13.5Aa15.5Aa16Aa20Aa24Aa31Aa49.5
- Body size
- 15.5px / 1.5
- Display size
- 49.58px
- Display tracking
- -0.01em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- undefined:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 8px)
- 4
- 8
- 12
- 16
- 24
- 32
- 40
- 48
- 64
- 81
Corner radii
234pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- 81px
Components
exact computed valuesbutton-primary
Shop women’s
- backgroundColor
- #FFFFFF
- textColor
- #000000
- rounded
- 9999px
- padding
- 0px 24px
- height
- 48px
- fontFamily
- On
- fontSize
- 16px
- fontWeight
- 700
- border
- 1px solid #FFFFFF
card
- rounded
- 4px
- padding
- 0px
- shadow
- rgba(0, 0, 0, 0.05) 0px 0px 0.5px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px
input
- rounded
- 0px
- height
- 64px
- padding
- 16px 4px
Layout & motion
- Container
- 1344px
- Grid columns
- 23
- Hero
- left-over-media
- Navigation
- top-static+transparent
- Page height
- 6,256px
- Easing
- ease
- Durations
- 200ms 300ms 500ms 600ms
- Transitions
- 80
- Keyframes
- 3
- Stack
- nuxt, contentful, google-tag-manager, cloudflare
Page sections (7)
01nav
02heroGift movement
03logosShop
04logosNew arrivals
05galleryStories that move
06ctaOur mission
07footer
How On compares
- Body text
- 15.5px: smaller than 76% of indexed sites (median 16px).
- Largest heading
- 49.6px: smaller than 67% of indexed sites (median 60px).
- Type scale
- 1.26×: flatter than 59% of indexed sites (median 1.28×).
- Container
- 1344px: wider than 83% of indexed sites (median 1242px).
- Text contrast
- 21.0:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 6,256px: shorter than 67% of indexed sites (median 8,217px).
- Corner radius
- Mostly 4px, shared by 24 of 274 indexed sites (9%).
- On
- The only site in the index that loads On.
- On Mono
- The only site in the index that loads On Mono.
- 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 On use?
On uses On for headings and body text. On Mono is used for code.
What are On's brand colors?
On's website uses a light scheme: background #FFFFFF, text #000000 and borders #FFFFFF.
How is On's website laid out?
The most common corner radius is 4px, body text is 15.5px with 1.5 line height, and the page container is 1344px wide.
