NGLM · About
Manifesto
Loading
Goodside · About
High-contrast editorial rigor, bold black serifs floating over stark gallery white
Click any value to copy. Roles are suggestions, not gospel.
- #f0f00eoklch(92.5% 0.200 110)Dominant
- #fcfcccoklch(97.9% 0.062 107)Surface
- #7d7d07oklch(57.1% 0.122 110)Ink
- #957a51oklch(59.5% 0.066 77)Accent
- #cccca4oklch(83.5% 0.054 108)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| body | Epicene Text | 16px | 300 | 1.4 | 0 | Aa Bb Cc |
| button | Arial | 13px | 300 | 1.4 | 0 | Aa Bb Cc |
:root {
--color-dominant: #f0f00e;
--color-surface: #fcfccc;
--color-ink: #7d7d07;
--color-accent: #957a51;
--color-detail: #cccca4;
}
/* CSS variables exposed by source */
:root {
--text-h3: clamp(17px, 1.73vw, 24.9px);
--text-h4: 18px;
--text-h1: clamp(26px, 4.08vw, 58.8px);
--text-caption: clamp(10px, 0.84vw, 12.1px);
--text-body: clamp(16px, 1.39vw, 20px);
--text-h2: clamp(21px, 2.71vw, 39px);
--ink: #000;
--bg: #fff;
--serif: 'Epicene Text', 'Test Epicene Text', 'Instrument Serif', Georgia, serif;
--line: #696969;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--pad: clamp(12px, 1.32vw, 19px);
}Drop-in prompt
Build a landing page in the visual style of Goodside · About.
Reference design system (extracted from the live site):
- Palette: #f0f00e, #fcfccc, #7d7d07, #957a51, #cccca4
- Typefaces: Epicene Text, Arial
- Macrostructure: Manifesto
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/goodside-studio--about
