DNCO · About
Marquee Hero
Stark Swiss minimalism, bold black grotesque type on vast gallery white




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 | GD Trio Display | 94px | 400 | 0.88 | -0.936px | Aa Bb Cc |
| h2 | GD Trio Display | 80px | 400 | 0.96 | 0 | Aa Bb Cc |
| h3 | GD Gaio VF | 16px | 400 | 1 | 0 | Aa Bb Cc |
| body | GD Gaio VF | 16px | 400 | 1.2 | 0 | Aa Bb Cc |
| button | GD Gaio VF | 14px | 500 | 1 | 0 | Aa Bb Cc |
:root {
--color-dominant: #ba8246;
--color-surface: #d7a66b;
--color-ink: #944c24;
--color-accent: #a48454;
--color-detail: #bbbbbc;
}
/* CSS variables exposed by source */
:root {
--secondary--steel: #2f3133;
--secondary--aluminium: #c0c3c3;
--secondary--titanium: #51585c;
--secondary--paper: #e9e9e2;
--secondary--concrete: #707575;
--secondary--leather: #131516;
--primary--white: #fcfcfc;
--primary--black: black;
--_sematic---text--teitrary: #707575;
--_button---button--text-hover: #fcfcfc;
--_ui---margins--scroll-offset: 2.625rem;
--_sematic---border--teitrary: #c0c3c3;
--_button---button--background: black;
--_sematic---background--secondary: #c0c3c3;
--_sematic---border--secondary: #707575;
--_button---button--text: #fcfcfc;
--_sematic---text--secondary: #51585c;
--_button---button--border-radius: 2px;
--_sematic---background--teitrary: #707575;
--_button---button--bg-hover: #2f3133;
--_ui---margins--gutter: .75rem;
--_ui---margins--main: 1rem;
--_sematic---background--primary: #fcfcfc;
--_sematic---border--primary: black;
--_sematic---border--transparent: #0000;
--_state---interaction: 0;
--_sematic---text--primary: black;
}Drop-in prompt
Build a landing page in the visual style of NGLM.
Reference design system (extracted from the live site):
- Palette: #ba8246, #d7a66b, #944c24, #a48454, #bbbbbc
- Typefaces: GD Trio Display, GD Gaio VF
- 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/nglm-com