Shure
Marquee Hero
Loading
Xlrecordings
Deep charcoal expanse, stark sans-serif geometry, and cool, echoing digital stillness.
Click any value to copy. Roles are suggestions, not gospel.
- #ef0c1coklch(60.1% 0.242 27)Dominant
- #840c14oklch(39.2% 0.151 26)Surface
- #f44454oklch(64.8% 0.211 21)Ink
- #ac545coklch(55.6% 0.115 16)Accent
- #b9c4d5oklch(81.7% 0.027 259)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | helvetica | 48px | 400 | 1.13 | -0.24px | Aa Bb Cc |
| h2 | helvetica | 20px | 400 | 1.32 | 0 | Aa Bb Cc |
| body | Helvetica | 16px | 400 | 1.25 | 0 | Aa Bb Cc |
| button | Helvetica | 16px | 400 | 1.25 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #ef0c1c;
--color-surface: #840c14;
--color-ink: #f44454;
--color-accent: #ac545c;
--color-detail: #b9c4d5;
}
/* CSS variables exposed by source */
:root {
--tw-ring-offset-shadow: 0 0 #0000;
--white-hsl: 0,0%,100%;
--tw-ring-shadow: 0 0 #0000;
--grey: #d6d7d9;
--pageBG: #fff;
--tw-skew-x: 0;
--black: #00120f;
--white: #fff;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--red: #f00b1b;
--pageText: #00120f;
--tw-scroll-snap-strictness: proximity;
--tw-scale-x: 1;
--tw-border-spacing-x: 0;
--tw-shadow-colored: 0 0 #0000;
--pageBG-hsl: 35,36%,91%;
--tw-border-spacing-y: 0;
--tw-scale-y: 1;
--black-hsl: 0,0%,0%;
--tw-skew-y: 0;
--tw-ring-color: rgba(59,130,246,.5);
--tw-translate-y: 0;
--tw-rotate: 0;
--pageText-hsl: 0,0%,0%;
--tw-ring-offset-color: #fff;
}Drop-in prompt
Build a landing page in the visual style of Xlrecordings.
Reference design system (extracted from the live site):
- Palette: #ef0c1c, #840c14, #f44454, #ac545c, #b9c4d5
- Typefaces: helvetica, Helvetica
- 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/xlrecordings-com
