Bugatti
Marquee Hero
Industrial obsidian depth, high-contrast orange accents, precision sans-serif in sterile space




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Aspekta | 18px | 400 | 1.1 | 0 | Aa Bb Cc |
| h2 | Aspekta | 48px | 400 | 1.1 | -1.44px | Aa Bb Cc |
| h3 | Spacemono | 12px | 700 | 1.5 | 0 | Aa Bb Cc |
| body | Aspekta | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Aspekta | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #a24216;
--color-surface: #efa98a;
--color-ink: #6f2a0f;
--color-accent: #8f6e68;
--color-detail: #bc988c;
}
/* CSS variables exposed by source */
:root {
--radius--xsmall: .25rem;
--radius--main: 1rem;
--radius--round: 100vw;
--radius--small: .5rem;
--border-width--main: .5px;
--nav--height: 4rem;
--_theme---border: color-mix(in srgb,#1f1d1e/**/20%,transparent);
--_theme---button-primary--border: #e9511a;
--_typography---font--bold: 700;
--_theme---button-primary--text-hover: white;
--_text-style---font-weight: 400;
--_theme---text-link--text: #1f1d1e;
--_theme---button-primary--background-hover: #1f1d1e;
--_typography---font--primary-trim-top: .33em;
--button-size--large: 5rem;
--swatch--neutral-n4: #e6e6e6;
--_state---false: 0;
--swatch--black: black;
--_typography---text-transform--none: none;
--swatch--neutral-n2: dimgrey;
--swatch--red-t3: #ffc1aa;
--_theme---selection--background: #e9511a;
--_spacing---space--32px: clamp(1.5*1rem,((1.5 - ((2 - 1.5)/(90 - 22.5)*22.5))*1rem + ((2 - 1.5)/(90 - 22.5))*100vw),2*1rem);
--_typography---font-size--h1: clamp(2.5*1rem,((2.5 - ((5 - 2.5)/(90 - 22.5)*22.5))*1rem + ((5 - 2.5)/(90 - 22.5))*100vw),5*1rem);
--_spacing---space--4px: .25rem;
--_trigger---off: 0;
--_text-style---trim-bottom: .38em;
--_typography---font-size--h3: clamp(1.5*1rem,((1.5 - ((3 - 1.5)/(90 - 22.5)*22.5))*1rem + ((3 - 1.5)/(90 - 22.5))*100vw),3*1rem);
--max-width--main: calc(90*1rem);
--swatch--neutral-n5: #acacac;
--focus--width: 0rem;
--_text-style---font-size: clamp(.75*1rem,((.75 - ((1 - .75)/(90 - 22.5)*22.5))*1rem + ((1 - .75)/(90 - 22.5))*100vw),1*1rem);
--_responsive---xsmall: 0;
--swatch--red-t4: #ffebe3;
--_theme---background-skeleton<deleted|variable-cc4934e0-a77b-f3f2-b9cf-2a2128b83c04>: color-mix(in lab,currentcolor 10%,transparent);
--_spacing---section-space--xsmall: clamp(1.5*1rem,((1.5 - ((2.5 - 1.5)/(90 - 22.5)*22.5))*1rem + ((2.5 - 1.5)/(90 - 22.5))*100vw),2.5*1rem);
--swatch--neutral-n1: #353535;
--_text-style---trim-top: .33em;
--swatch--brand-text: #1f1d1e;
--_theme---button-secondary--border-hover: #1f1d1e;
--swatch--white: white;
--_theme---button-primary--border-hover: #1f1d1e;
--_theme---button-primary--text: #1f1d1e;
--swatch--red-t1: #fa6530;
--_typography---font--primary-trim-bottom: .38em;
--_trigger---on: 1;
--_typography---font-size--h2: clamp(2.25*1rem,((2.25 - ((4 - 2.25)/(90 - 22.5)*22.5))*1rem + ((4 - 2.25)/(90 - 22.5))*100vw),4*1rem);
--_theme---text-link--border-hover: #1f1d1e;
--_column-count---value: 1;
--_spacing---section-space--main: clamp(2.25*1rem,((2.25 - ((7 - 2.25)/(90 - 22.5)*22.5))*1rem + ((7 - 2.25)/(90 - 22.5))*100vw),7*1rem);
--_text-style---line-height: 1.5;
--_typography---letter-spacing--normal: 0em;
--_typography---font-size--text-large: clamp(1*1rem,((1 - ((1.5 - 1)/(90 - 22.5)*22.5))*1rem + ((1.5 - 1)/(90 - 22.5))*100vw),1.5*1rem);
--_theme---button-secondary--border: color-mix(in srgb,#1f1d1e/**/20%,transparent);
--_typography---font-size--h5: clamp(1.125*1rem,((1.125 - ((1.5 - 1.125)/(90 - 22.5)*22.5))*1rem + ((1.5 - 1.125)/(90 - 22.5))*100vw),1.5*1rem);
--max-width--small: 50rem;
--_spacing---section-space--large-top: clamp(10*1rem,((10 - ((14 - 10)/(90 - 22.5)*22.5))*1rem + ((14 - 10)/(90 - 22.5))*100vw),14*1rem);
--_typography---font-size--text-main: clamp(.75*1rem,((.75 - ((1 - .75)/(90 - 22.5)*22.5))*1rem + ((1 - .75)/(90 - 22.5))*100vw),1*1rem);
--swatch--dark-900<deleted|variable-b6de3dc8-5520-0236-77cd-d665fd586e64>: #1f1d1e;
--_spacing---space--24px: clamp(1.25*1rem,((1.25 - ((1.5 - 1.25)/(90 - 22.5)*22.5))*1rem + ((1.5 - 1.25)/(90 - 22.5))*100vw),1.5*1rem);
}Drop-in prompt
Build a landing page in the visual style of Turno.
Reference design system (extracted from the live site):
- Palette: #a24216, #efa98a, #6f2a0f, #8f6e68, #bc988c
- Typefaces: Aspekta
- 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/turnoev-com