Beo Grace

Wireless sound. Connected to the moment.

Learn more
Your exclusive gift

Receive a complimentary Bang & Olufsen accessory

Claim offer
Components

Sound meets design

Beosound A5

Portable powerhouse in aluminium and oak.

Beoplay H100

Adaptive over-ear headphones.

Beovision Theatre

Cinematic sound and picture, one object.

Speakers · Portable
Beosound A5$1,099
Beosound A1$299
Beosound Explore$199
Beoplay H100$1,549
Controls

Pills, 2px borders, one amber accent

Primary Outline Text link Disabled Chip Accent TabTabTab
Outline light Outline light ← over photography, hover fills white
Primary Outline Text link ← hover state (400ms ease)
Email address Focused input ← focus ring

Buttons are 40px-radius pills, 44px tall, 8px 32px, BeoSupreme 16/500, +0.1px tracking, with a 2px border. Primary fills #191817 with cream text; over photography the outline uses a 2px white border. The site's input ring is a framework blue (#3082fd) — a warm ring is recommended for brand fit.

Typography

One typeface, weights 400 and 500

Section display · BeoSupreme · 48/64 · 400 · -0.5pxSound meets design
Hero / product name (h1) · BeoSupreme · 24/36 · 400 · normalBeo Grace
Sub-head (h3) · BeoSupreme · 24/30 · 400 · +1pxJoin our global community
Body / nav · BeoSupreme · 16/26 · 400 · +0.2pxWireless sound. Connected to the moment.
Button · BeoSupreme · 16 · 500 · +0.1pxLearn more
Eyebrow / label · BeoSupreme · 12/20 · 400 · UPPERCASEYour exclusive gift
Palette

Warm monochrome, one amber accent

Text & ink
gle-black#181716
dark fill#191817
text#222222
muted#555555
cream#fcfaee
Surfaces & borders
white#ffffff
grey#fafafa
hover#f6f6f6
disabled#e5e5e5
alt-border#ebe8e5
Accent & campaign
amber#ffc457
campaign#060daa
Depth & motion

Flat surfaces, 2px borders

2px base
3px input
40px pill
50% circle
2px #181716 border
2px #ebe8e5 border
no shadow — flat

Depth is a 2px border (#181716 or #ebe8e5) and full-bleed colour bands — there are zero box-shadows anywhere. Motion: the published house transition all 400ms cubic-bezier(.165,.84,.44,1); links reveal an underline via scaleX; one autoplay hero video under a subtle scrim.