Bowerswilkins
Marquee Hero
Loading
Shure
Deep charcoal space, crisp sans-serif precision, and a cool, technical clarity.
Click any value to copy. Roles are suggestions, not gospel.
- #b4cf96oklch(82.0% 0.082 129)Dominant
- #04244boklch(26.4% 0.081 256)Surface
- #bed5a4oklch(84.3% 0.070 128)Ink
- #779e55oklch(65.3% 0.110 132)Accent
- #768ca4oklch(63.1% 0.044 251)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | OstrichProperBold | 64px | 400 | 1 | 0 | Aa Bb Cc |
| h2 | dinBold | 32px | 600 | 1.19 | 0 | Aa Bb Cc |
| h3 | dinBold | 24px | 600 | 1.2 | 0 | Aa Bb Cc |
| body | ui-sans-serif | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | dinBold | 16px | 600 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #b4cf96;
--color-surface: #04244b;
--color-ink: #bed5a4;
--color-accent: #779e55;
--color-detail: #768ca4;
}
/* CSS variables exposed by source */
:root {
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-skew-x: 0;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--tw-scroll-snap-strictness: proximity;
--tw-border-spacing-x: 0;
--tw-scale-x: 1;
--tw-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--tw-scale-y: 1;
--tw-skew-y: 0;
--tw-ring-color: rgb(59 130 246/0.5);
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
}Drop-in prompt
Build a landing page in the visual style of Shure.
Reference design system (extracted from the live site):
- Palette: #b4cf96, #04244b, #bed5a4, #779e55, #768ca4
- Typefaces: OstrichProperBold, dinBold, ui-sans-serif
- 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/shure-com
