Raycast
Marquee Hero
Deep ochre shadows and stark, geometric type - a grounded, industrial clarity.




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 | ES Allianz | 152px | 500 | 0.85 | -6.84px | Aa Bb Cc |
| h2 | ES Allianz | 64px | 500 | 1 | -2.56px | Aa Bb Cc |
| h3 | ES Allianz | 32px | 500 | 1.2 | -0.64px | Aa Bb Cc |
| body | ES Allianz | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | ES Allianz | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #84533b;
--color-surface: #d6b4a3;
--color-ink: #643414;
--color-accent: #947d6c;
--color-detail: #cec0b8;
}
/* CSS variables exposed by source */
:root {
--base-color-brand--transparent: #fff0;
--background-color--background-alternate: black;
--base-color-brand--blue-700: #3c597e;
--base-color-system--error-red-light: #fef3f2;
--base-color-brand--blue-600: #567aa6;
--base-color-brand--beige-400: #cca57c;
--base-color-brand--brown-500: #806965;
--base-color-neutral--neutral-lighter: #f6f5f5;
--base-color-brand--purple-800: #1b0a39;
--border-color--border-primary: black;
--base-color-brand--teal-200: #b3cfd7;
--base-color-brand--beige-200: #e7d3bf;
--border-radius--medium: 0rem;
--base-color-brand--blue-100: #d9dee5;
--base-color-brand--brown-300: #ae9a95;
--base-color-brand--beige-600: #be905c;
--base-color-brand--purple-400: #c6a7fe;
--base-color-brand--teal-400: #5b8a97;
--base-color-brand--teal-600: #1e4b57;
--base-color-brand--beige-900: #4f3416;
--base-color-system--error-red: #ce3a42;
--text-color--text-success: #027a48;
--base-color-brand--blue-500: #6386b2;
--base-color-brand--blue-200: #c5d5e8;
--text-color--text-secondary: #929394;
--base-color-system--success-green-light: #ecfdf3;
--text-color--text-error: #ce3a42;
--background-color--background-success: #ecfdf3;
--base-color-brand--blue-800: #092245;
--base-color-neutral--neutral-lightest: #f9f9f9;
--base-color-brand--brown-600: #75635e;
--background-color--background-error: #fef3f2;
--base-color-neutral--neutral-darkest: #252525;
--swiper-theme-color: #007aff;
--base-color-brand--purple-200: #e4d6ff;
--base-color-brand--brown-100: #d7cecc;
--base-color-brand--red<deleted|variable-a32d0044-0d85-ed83-b10d-16da9c7e887f>: #d74f56;
--base-color-brand--purple-500: #9f7be1;
--background-color--background-primary: white;
--base-color-brand--brown-800: #4c312b;
--text-color--text-primary: black;
--base-color-brand--purple-700: #371d68;
--base-color-neutral--neutral-light: #eaeaea;
--base-color-brand--brown-400: #95827d;
--base-color-neutral--black: black;
--base-color-neutral--neutral-dark: #c4c4c4;
--border-color--border-alternate: white;
--base-color-brand--purple-300: #d9c5ff;
--base-color-brand--beige-300: #d2b596;
--border-radius--padding--global--small: 1vw;
--base-color-brand--beige-700: #af8251;
--swiper-navigation-size: 44px;
--base-color-brand--black: black;
--base-color-brand--white: white;
--border-radius--regular: 1rem;
--base-color-brand--teal-800: #071b20;
--base-color-brand--teal-300: #79a3ad;
--link-color--link-primary: black;
--base-color-brand--blue-400: #8eaed6;
--border-radius--padding--global--regular: 5vw;
--background-color--background-secondary: #f9f9f9;
--text-color--text-alternate: white;
--base-color-neutral--white: white;
--base-color-neutral--neutral-darker: #929394;
--link-color--link-alternate: white;
--base-color-brand--purple-100: #efe5f9;
--base-color-brand--teal-500: #3b707e;
--base-color-brand--teal-100: #d4e6eb;
--base-color-brand--beige-100: #ede2d7;
--base-color-brand--blue-300: #b2cbec;
--base-color-brand--brown-200: #af9f9c;
--base-color-neutral--neutral: #dcdcdf;
--border-radius--large: 1.5rem;
--link-color--link-secondary: #eaeaea;
--base-color-brand--teal-700: #10323b;
--base-color-brand--purple-600: #6745a4;
--base-color-brand--beige-800: #8c663c;
--base-color-brand--beige-500: #c49867;
--base-color-system--success-green: #027a48;
--border-radius--round: 999px;
--border-color--border-secondary: #f6f5f5;
--background-color--background-tertiary: #eaeaea;
--base-color-brand--brown-700: #6c5751;
}Drop-in prompt
Build a landing page in the visual style of 11x - Digital workers, Human results.
Reference design system (extracted from the live site):
- Palette: #84533b, #d6b4a3, #643414, #947d6c, #cec0b8
- Typefaces: ES Allianz
- 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/11x-com