Criterion
Marquee Hero
Deep indigo expanse, crisp sans-serif, spacious and subtly shimmering.




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 | YouTube Sans | 72px | 700 | 1.06 | -1px | Aa Bb Cc |
| h2 | YouTube Sans | 32px | 700 | 1.25 | -1px | Aa Bb Cc |
| h3 | Roboto | 18px | 400 | 1.56 | -0.25px | Aa Bb Cc |
| body | Roboto | 16px | 400 | 1.75 | 0.25px | Aa Bb Cc |
| button | Roboto | 16px | 400 | 1.63 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #065dd4;
--color-surface: #064cac;
--color-ink: #7baae8;
--color-accent: #7e7146;
--color-detail: #acabab;
}
/* CSS variables exposed by source */
:root {
--border-radius: 16px;
--lbt-text-primary: #fff;
--lbt-static-ad-yellow: #fbc02d;
--lb-color-royal-blue-80: #0000b2;
--lb-color-yellow-green-90: #595200;
--lb-color-royal-blue-60: #005cff;
--lb-color-red-30: #ff8983;
--lb-color-yellow-green-10: #ffffb3;
--lb-color-youtube-error-light-red: #ff8983;
--lb-color-purple-60: #7b3edb;
--lbt-gradient-preloader: hsla(0,0%,100%,0.1);
--lb-color-black-pure-alpha-60: rgba(0,0,0,0.6);
--lb-color-purple-70: #6126bf;
--lbt-text-secondary: #aaa;
--lbt-general-background-c: #030303;
--lb-color-white-1-alpha-30: hsla(0,0%,100%,0.3);
--lb-color-white-1-alpha-50: hsla(0,0%,100%,0.5);
--lb-color-pale-blue: #def1ff;
--lb-color-green-60: #00a513;
--lb-color-white-1: #fff;
--lb-color-black-pure: #000;
--lb-color-gray-90: #212121;
--lbt-call-to-action: #3ea6ff;
--lb-color-yellow-30: #ffd61d;
--tv-color-brand-blue: #065fd4;
--lbt-ten-percent-layer-inverse: rgba(0,0,0,0.1);
--lbt-overlay-background-medium: rgba(0,0,0,0.6);
--lb-color-red-20: #ffbfbd;
--lb-color-sky-blue-80: #005d7a;
--lb-color-magenta-60: #aa09aa;
--lb-color-orange-70: #af3a00;
--lb-color-black-pure-alpha-30: rgba(0,0,0,0.3);
--lb-color-gray-70: #4c4c4c;
--lb-color-sky-blue-20: #99f1ff;
--lbt-call-to-action-inverse: #065fd4;
--lbt-brand-icon-inactive: #909090;
--lb-color-white-1-alpha-5: hsla(0,0%,100%,0.05);
--lbt-overlay-background-light: rgba(0,0,0,0.1);
--lbt-chip-unselected-background: rgba(0,0,0,0.05);
--lb-color-purple-30: #d09fff;
--lbt-overlay-background-heavy: rgba(0,0,0,0.8);
--lb-color-teal-40: #00e5be;
--lb-color-teal-30: #1fffd9;
--lb-color-red-70: #990412;
--lb-color-royal-blue-50: #337dff;
--lbt-icon-active-other: #fff;
--lbt-brand-background-primary: rgba(40,40,40,0.98);
--lb-color-magenta-80: #590059;
--lb-color-navy-blue: #263850;
--lb-color-purple-10: #efdeff;
--lb-color-sky-blue-70: #007da3;
--lb-color-yellow-90: #593b00;
--section--max-width: 1440px;
--lb-color-grey-3: #909090;
--lb-color-sky-blue-60: #0092bf;
--lbt-overlay-text-primary: #fff;
--lb-color-orange-10: #ffeacf;
--lbt-general-background-b: #0f0f0f;
--lbt-brand-button-background: #c00;
--lbt-overlay-background-medium-light: rgba(0,0,0,0.3);
}Drop-in prompt
Build a landing page in the visual style of Tv Youtube.
Reference design system (extracted from the live site):
- Palette: #065dd4, #064cac, #7baae8, #7e7146, #acabab
- Typefaces: YouTube Sans, Roboto
- 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/tv-youtube-com