Bose
Marquee Hero
Loading
Analogue
Deep charcoal expanse, crisp geometric sans, a subtly industrial, digital stillness.
Click any value to copy. Roles are suggestions, not gospel.
- #ea1c1coklch(59.7% 0.233 28)Dominant
- #fc4444oklch(65.9% 0.220 26)Surface
- #741616oklch(36.7% 0.128 26)Ink
- #ad946eoklch(68.0% 0.060 78)Accent
- #b7b6b6oklch(77.7% 0.001 17)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | circularXx | 53px | 500 | 1.11 | -2.64489px | Aa Bb Cc |
| h3 | circularXx | 53px | 500 | 1.11 | -1.17504px | Aa Bb Cc |
| body | circularXx | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | circularXx | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #ea1c1c;
--color-surface: #fc4444;
--color-ink: #741616;
--color-accent: #ad946e;
--color-detail: #b7b6b6;
}
/* CSS variables exposed by source */
:root {
--spacing-f24: 2.449vw;
--spacing-fm84: 26.25vw;
--spacing-fm42: 13.125vw;
--text-2xl: 1.5rem;
--spacing-f16: 1.632vw;
--spacing-f48: 4.898vw;
--spacing-fm17: 5.3125vw;
--text-underline-offset-f1: .102vw;
--spacing-f94: 9.592vw;
--text-lg: 1.125rem;
--radius-fm5: 1.563vw;
--spacing-f36: 3.673vw;
--spacing-fm16: 5vw;
--spacing-f100: 10.2041vw;
--spacing-fm28: 8.75vw;
--color-neutral-300: lab(84.92% 0 -.0000119209);
--spacing-f17: 1.734vw;
--text-decoration-thickness-fm05: .1562vw;
--spacing-fm46: 14.375vw;
--spacing-f59: 6.0204vw;
--spacing-fm11: 3.4375vw;
--spacing-f54: 5.5102vw;
--spacing-f14: 1.429vw;
--spacing-f4: .408vw;
--spacing-fm30: 9.375vw;
--spacing-f66: 6.735vw;
--color-gray-300: lab(85.1236% -.612259 -3.7138);
--border-width-fm1: .3125vw;
--spacing-fm6: 1.875vw;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--spacing-fm54: 16.875vw;
--radius-f6: .6122vw;
--spacing-fm59: 18.4375vw;
--spacing-f3: .51vw;
--radius-fm16: 4.489vw;
--spacing-fm71: 22.1875vw;
--radius-f4: .408vw;
--spacing-fm10: 3.125vw;
--spacing-f56: 5.714vw;
--text-lg--line-height: calc(1.75 / 1.125);
--radius-f2: .204vw;
--color-white: #fff;
--text-underline-offset-fm2: .625vw;
--spacing-f18: 1.837vw;
--spacing-fm19: 5.9375vw;
--spacing-fm60: 18.75vw;
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-weight-bold: 700;
--accent-2: #595959;
--spacing-f25: 2.551vw;
--text-decoration-thickness-f05: .071vw;
--color-background: #EAEAEA;
--spacing-fm40: 12.5vw;
--color-red-500: lab(55.4814% 75.0732 48.8528);
--radius-fm3: .9375vw;
--spacing-f15: 1.53vw;
--spacing-fm23: 7.188vw;
--radius-fm1: .3125vw;
--text-decoration-thickness-fm1: .3125vw;
--font-weight-light: 300;
}Drop-in prompt
Build a landing page in the visual style of Analogue.
Reference design system (extracted from the live site):
- Palette: #ea1c1c, #fc4444, #741616, #ad946e, #b7b6b6
- Typefaces: circularXx
- 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/analogue-co
