Bose
Marquee Hero
Loading
Bowerswilkins
Warm, muted ochre backdrop cradles elegant sans serif, exuding refined stillness.
Click any value to copy. Roles are suggestions, not gospel.
- #b47e5boklch(63.9% 0.083 54)Dominant
- #612c1aoklch(36.2% 0.082 39)Surface
- #dcb29coklch(79.5% 0.058 49)Ink
- #ac7c5coklch(62.7% 0.075 55)Accent
- #bda99coklch(74.8% 0.030 55)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | neue-haas-grotesk-display | 60px | 400 | 1.13 | 1.12px | Aa Bb Cc |
| h2 | neue-haas-grotesk-display | 32px | 300 | 1.25 | 1.12px | Aa Bb Cc |
| h3 | neue-haas-grotesk-display | 22px | 500 | 1.27 | 1.12px | Aa Bb Cc |
| body | -apple-system | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | neue-haas-grotesk-display | 14px | 500 | 1.14 | 0 | Aa Bb Cc |
Max content width 1560px
:root {
--color-dominant: #b47e5b;
--color-surface: #612c1a;
--color-ink: #dcb29c;
--color-accent: #ac7c5c;
--color-detail: #bda99c;
}
/* CSS variables exposed by source */
:root {
--color-quinary: #595959;
--color-component-button-primary-text-default-neutral-inverse-resting: #0c0c14;
--color-dark-gray: #444;
--color-component-button-secondary-icon-default-neutral-inverse-resting: #ffffff;
--color-white: #fff;
--color-background-light-3: #f2efed;
--color-tertiary: #9B490F;
--color-price-strikethrough: #999999;
--color-gray6: #444;
--color-primary-dark: #2F2FC1;
--font-extra-light: 300;
--color-secondary: rgba(255, 255, 255, 0.9);
--color-gray4: #999;
--font-regular: 500;
--color-product-number-gray: #ccc;
--color-ui-colors-text-100: #101820;
--color-component-button-primary-bg-default-neutral-inverse-hover: #e5e5e9;
--color-ui-colors-background-neutral-2: #F0F5F7;
--color-menu-link: #444;
--color-component-button-secondary-text-default-neutral-inverse-resting: #ffffff;
--color-alt-menu-gray-2: #625d59;
--color-greyscale-black-60: #6D6E71;
--color-green: #008827;
--color-primary-light: #A8A9FC;
--color-background-light-1: #EFEFEF;
--color-horizontal-rule-gray: #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-alt-menu-gray-1: #E1E1E1;
--color-success: #2c343d;
--color-gray7: #222;
--color-component-overlay-bg: rgba(25, 25, 37, 0.9);
--font-light: 400;
--secondary: #6c757d;
--color-alt-menu-beige: #f8f7f6;
--color-slightly-darker-gray: #999;
--color-close-menu-bg: #eee;
--color-primary-hover: #000;
--color-component-button-primary-bg-default-neutral-inverse-resting: #ffffff;
--color-gray-transparent-1: rgba(0, 0, 0, 0.65);
--font-medium: 600;
--color-border-light: #cdcbc9;
--color-danger-bg: #F9E6EA;
--color-darker-gray: #222;
--color-horizontal-border-gray: #999;
--color-black: #000;
--color-background-light-2: #f5f6f7;
--primary: #00a1e0;
--color-base: #000;
--color-gray1: #f9f9f9;
--color-tertiary-light: #C38356;
--color-fill-brand-indigo: #4a4af4;
--color-gray-transparent-2: rgba(0, 0, 0, 0.25);
--color-gray2: #eee;
--color-link-color: #444;
--color-quaternary: #a8afb4;
--color-background-light-4: #ffffff;
--size-component-button-minWidth-medium: 48px;
--color-red: #c00;
--color-blue: #0070d2;
--color-light-gray: #f9f9f9;
}Drop-in prompt
Build a landing page in the visual style of Bowerswilkins.
Reference design system (extracted from the live site):
- Palette: #b47e5b, #612c1a, #dcb29c, #ac7c5c, #bda99c
- Typefaces: neue-haas-grotesk-display, -apple-system
- 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/bowerswilkins-com
