Azure Microsoft
Marquee Hero
Loading
Bugatti
Deep charcoal expanse, elegant sans-serifs, and luminous, cool-toned highlights.
Click any value to copy. Roles are suggestions, not gospel.
- #a44c4coklch(52.8% 0.117 22)Dominant
- #5d1c1eoklch(33.1% 0.095 22)Surface
- #d5a4a4oklch(76.4% 0.058 19)Ink
- #a66d65oklch(59.3% 0.074 28)Accent
- #afb0b0oklch(75.6% 0.001 197)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | Bugatti Monospace | 12px | 400 | 1.33 | 1.2px | Aa Bb Cc |
| h3 | Bugatti Display | 60px | 400 | 1 | 0 | Aa Bb Cc |
| body | ui-sans-serif | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Bugatti Monospace | 14px | 400 | 1.43 | 1.4px | Aa Bb Cc |
| button | Bugatti Monospace | 12px | 400 | 1.33 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #a44c4c;
--color-surface: #5d1c1e;
--color-ink: #d5a4a4;
--color-accent: #a66d65;
--color-detail: #afb0b0;
}
/* CSS variables exposed by source */
:root {
--border: 214.3 31.8% 91.4%;
--accent: 210 40% 96.1%;
--primary-foreground: 210 40% 98%;
--secondary-foreground: 222.2 47.4% 11.2%;
--background: 0 0% 100%;
--accent-foreground: 222.2 47.4% 11.2%;
--gap: .5rem;
--radius: .5rem;
--primary: 222.2 47.4% 11.2%;
--foreground: 222.2 84% 4.9%;
--secondary: 210 40% 96.1%;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--tw-border-spacing-x: 0;
--muted: 210 40% 96.1%;
--tw-scale-y: 1;
--tw-ring-color: rgb(59 130 246 / .5);
--tw-translate-y: 0;
--popover: 0 0% 100%;
--ring: 222.2 84% 4.9%;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
--muted-foreground: 215.4 16.3% 46.9%;
--tw-skew-x: 0;
--popover-foreground: 222.2 84% 4.9%;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--input: 214.3 31.8% 91.4%;
--tw-scroll-snap-strictness: proximity;
--destructive: 0 72.2% 50.6%;
--tw-scale-x: 1;
--tw-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--destructive-foreground: 210 40% 98%;
--tw-border-opacity: 1;
--tw-skew-y: 0;
}Drop-in prompt
Build a landing page in the visual style of Bugatti.
Reference design system (extracted from the live site):
- Palette: #a44c4c, #5d1c1e, #d5a4a4, #a66d65, #afb0b0
- Typefaces: Bugatti Monospace, 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/bugatti-com
