№ bose-com--p-accessories-l1-pro32-array-power-stand-bag-cmpr-l1pro32-premium-bagtrvl-html

Bose

Deep violet nebula glow, clean sans-serif geometry, spacious digital quietude.

Marquee Herominimalism monochrome consumer tech ecommercelight

The page uses a full-screen image and minimal text to establish a sophisticated, tech-forward mood. The dark background and subtle purple lighting emphasize the product's sleek design. · audio product, smart speaker, home audio, tech website, minimalist design, dark theme, bose product page, multiroom audio

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: muted · monochrome · cool

SwatchHexOKLCHSuggested roleCopy

Hex#9e42bc
OKLCHoklch(55.3% 0.195 317)
RoleDominant
find sites →
Hex#542364
OKLCHoklch(35.7% 0.118 317)
RoleSurface
find sites →
Hex#cc9cdc
OKLCHoklch(75.9% 0.103 318)
RoleInk
find sites →
Hex#747474
OKLCHoklch(55.9% 0.000 90)
RoleAccent
find sites →
Hex#5f2771
OKLCHoklch(38.7% 0.131 317)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	Bose Headline	96px	900	0.88	1.44px	Aa Bb Cc
h2	Bose Headline	60px	900	0.88	1.2px	Aa Bb Cc
h3	Bose Headline	36px	700	0.89	1.8px	Aa Bb Cc
body	Bose Text	16px	400	1.5	0	Aa Bb Cc
button	Bose Text	12px	400	1	0	Aa Bb Cc

Spacing scale

4px

8px

12px

24px

25px

32px

48px

56px

64px

120px

Radius scale

0px

2px

3px

20px

50px

Container

Max content width 696px

Export

:root {
  --color-dominant: #9e42bc;
  --color-surface: #542364;
  --color-ink: #cc9cdc;
  --color-accent: #747474;
  --color-detail: #5f2771;
}

/* CSS variables exposed by source */
:root {
  --color-grey3: #ccc;
  --color-grey6: #444;
  --spacing-large: 120px;
  --brand: (primary:#131317,secondary:#fff,tertiary:#3e474a);
  --brand-primary: #131317;
  --color-slightly-darker-gray: #999;
  --color: (text-white:#fff,text-black:#131317);
  --color-dark-gray: #444;
  --color-white: #fff;
  --color-grey7: #222;
  --color-close-menu-bg: #eee;
  --color-grey1: #f9f9f9;
  --color-horizontal-border-grey: #999;
  --color-text-black: #131317;
  --color-text-white: #fff;
  --color-grey-transparent-1: rgba(0,0,0,.65);
  --color-darker-gray: #222;
  --color-black: #131317;
  --secondary-nav-header-height: 88px;
  --color-grey4: #999;
  --primary: #00a1e0;
  --spacing-large-override: 0;
  --brand-secondary: #fff;
  --color-menu-link: #444;
  --color-link-color: #444;
  --color-grey2: #eee;
  --color-grey-transparent-2: rgba(0,0,0,.25);
  --color-horizontal-rule-grey: #ccc;
  --color-red: #c00;
  --color-green: #008827;
  --color-blue: #0070d2;
  --color-light-gray: #f9f9f9;
  --color-danger: #c00;
  --color-product-number-grey: #ccc;
  --color-grey5: #666;
  --color-grey8: #333;
  --color-hr-border-color: #ccc;
  --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --color-success: #008827;
  --brand-tertiary: #3e474a;
  --color-light-blue: #7ed0ee;
  --color-primary: #00a1e0;
  --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --secondary: #6c757d;
  --spectrum-green-major: #00e100;
  --inner-rail: 1440px;
  --spectrum-yellow-sharp: #fff9bc;
  --header-height: 128px;
  --product-purple-minor: #4024a7;
  --product-pink-flat: #520049;
  --pattern-surface: (sharp:#f8f1e7);
  --pink: #e83e8c;
  --breakpoint-xs: 0;
  --search-flyout-categories-scrollbar-height: 8px;
  --editorial-card-grid-slot-header-small-desktop: 2.563rem;
  --page-intro-content-padding: 64px 0 104px;
  --product-green: (sharp:#b7ff00,major:#00e100,chord:#008100,minor:#004839,flat:#002504);
  --success: #00e100;
  --neutral-white-glass: #ffffff29;
  --nav-header-height: 72px;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Bose.
Reference design system (extracted from the live site):
- Palette: #9e42bc, #542364, #cc9cdc, #747474, #5f2771
- Typefaces: Bose Headline, Bose Text
- Macrostructure: Marquee Hero
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/bose-com--p-accessories-l1-pro32-array-power-stand-bag-cmpr-l1pro32-premium-bagtrvl-html

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Bose Headline

96px

900

0.88

1.44px

Aa Bb Cc

Bose Headline

60px

900

0.88

1.2px

Aa Bb Cc

Bose Headline

36px

700

0.89

1.8px

Aa Bb Cc

body

Bose Text

16px

400

1.5

Aa Bb Cc

button

Bose Text

12px

400

Aa Bb Cc

:root { --color-dominant: #9e42bc; --color-surface: #542364; --color-ink: #cc9cdc; --color-accent: #747474; --color-detail: #5f2771; } /* CSS variables exposed by source */ :root { --color-grey3: #ccc; --color-grey6: #444; --spacing-large: 120px; --brand: (primary:#131317,secondary:#fff,tertiary:#3e474a); --brand-primary: #131317; --color-slightly-darker-gray: #999; --color: (text-white:#fff,text-black:#131317); --color-dark-gray: #444; --color-white: #fff; --color-grey7: #222; --color-close-menu-bg: #eee; --color-grey1: #f9f9f9; --color-horizontal-border-grey: #999; --color-text-black: #131317; --color-text-white: #fff; --color-grey-transparent-1: rgba(0,0,0,.65); --color-darker-gray: #222; --color-black: #131317; --secondary-nav-header-height: 88px; --color-grey4: #999; --primary: #00a1e0; --spacing-large-override: 0; --brand-secondary: #fff; --color-menu-link: #444; --color-link-color: #444; --color-grey2: #eee; --color-grey-transparent-2: rgba(0,0,0,.25); --color-horizontal-rule-grey: #ccc; --color-red: #c00; --color-green: #008827; --color-blue: #0070d2; --color-light-gray: #f9f9f9; --color-danger: #c00; --color-product-number-grey: #ccc; --color-grey5: #666; --color-grey8: #333; --color-hr-border-color: #ccc; --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --color-success: #008827; --brand-tertiary: #3e474a; --color-light-blue: #7ed0ee; --color-primary: #00a1e0; --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --secondary: #6c757d; --spectrum-green-major: #00e100; --inner-rail: 1440px; --spectrum-yellow-sharp: #fff9bc; --header-height: 128px; --product-purple-minor: #4024a7; --product-pink-flat: #520049; --pattern-surface: (sharp:#f8f1e7); --pink: #e83e8c; --breakpoint-xs: 0; --search-flyout-categories-scrollbar-height: 8px; --editorial-card-grid-slot-header-small-desktop: 2.563rem; --page-intro-content-padding: 64px 0 104px; --product-green: (sharp:#b7ff00,major:#00e100,chord:#008100,minor:#004839,flat:#002504); --success: #00e100; --neutral-white-glass: #ffffff29; --nav-header-height: 72px; }

Build a landing page in the visual style of Bose. Reference design system (extracted from the live site): - Palette: #9e42bc, #542364, #cc9cdc, #747474, #5f2771 - Typefaces: Bose Headline, Bose Text - Macrostructure: Marquee Hero Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/bose-com--p-accessories-l1-pro32-array-power-stand-bag-cmpr-l1pro32-premium-bagtrvl-html