Typography
scale ratio 1.500- Beo Supremecss: BeoSupremedisplay + body400 500 700100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Beo Supreme | 24px | 400 | 1.5 | 0em |
| headline | Beo Supreme | 36px | 400 | 1.5 | -0.014em |
| body | Beo Supreme | 16px | 400 | 1.625 | 0.025em |
| body-sm | Beo Supreme | 12px | 400 | 1.667 | 0.008em |
Type scale
Aa12Aa14Aa16Aa24Aa36
- Body size
- 16px / 1.625
- Display size
- 24px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 17.73:1
- Muted on bg
- 7.46:1
- Dark mode
- none
Declared accent tokens
- --gle-primary-yellow#FFC457not on page
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 5
- 8
- 10
- 14
- 16
- 24
- 32
- 36
- 48
- 49.5
- 56
- 60
Corner radii
4pill
Shadows (0)
none
- Borders
- regular, 2px
- Section padding
- 84px
Components
exact computed valuesbutton-secondary
Learn more
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 8px 32px
- height
- 44px
- fontFamily
- Beo Supreme
- fontSize
- 16px
- fontWeight
- 500
- border
- 2px solid #FFFFFF
input
- rounded
- 0px
- height
- 38px
- padding
- 1px 2px
- backgroundColor
- #FFFFFF
- border
- 1px solid #191817
Layout & motion
- Container
- 1368px
- Grid columns
- 3
- Hero
- left-over-media
- Navigation
- none-detected
- Page height
- 7,295px
- Easing
- cubic-bezier(0.165, 0.84, 0.44, 1)
- Durations
- 200ms 300ms 400ms 500ms
- Transitions
- 71
- Keyframes
- 1
- Stack
- next.js, contentful
Page sections (4)
section labels are heuristic
01heroBeo Grace
03feature detail?Corporate gifting
04footer
How Bang & Olufsen compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 24px: smaller than 92% of indexed sites (median 60px).
- Type scale
- 1.50×: steeper than 89% of indexed sites (median 1.28×).
- Container
- 1368px: wider than 94% of indexed sites (median 1242px).
- Text contrast
- 17.7:1: higher than 51% of indexed sites (median 17.6:1).
- Page length
- 7,295px: shorter than 59% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Beo Supreme
- The only site in the index that loads Beo Supreme.
- 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 Bang & Olufsen use?
Bang & Olufsen uses Beo Supreme (loaded as "BeoSupreme") for headings and body text.
What are Bang & Olufsen's brand colors?
Bang & Olufsen's website uses a light scheme: background #FFFFFF, text #191817, muted text #555555 and borders #FCFAEE.
How is Bang & Olufsen's website laid out?
The most common corner radius is 0px, body text is 16px with 1.625 line height, and the page container is 1368px wide.
