Factmag
Marquee Hero
Loading
Output
Warm, muted studio glow; clean sans-serif, spacious layouts, subtly technical.
Click any value to copy. Roles are suggestions, not gospel.
- #e1f607oklch(92.6% 0.211 116)Dominant
- #6b3416oklch(39.2% 0.089 47)Surface
- #f4e4d3oklch(92.7% 0.029 69)Ink
- #a08467oklch(63.2% 0.054 68)Accent
- #cebda1oklch(80.5% 0.043 80)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Pilat Wide Heavy | 72px | 400 | 1 | 1.44px | Aa Bb Cc |
| h2 | Pilat Wide Black | 144px | 900 | 1 | 0 | Aa Bb Cc |
| h3 | Pilat Wide Heavy | 40px | 400 | 1.2 | 0.8px | Aa Bb Cc |
| body | Pilat Book | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Pilat Demi | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #e1f607;
--color-surface: #6b3416;
--color-ink: #f4e4d3;
--color-accent: #a08467;
--color-detail: #cebda1;
}
/* CSS variables exposed by source */
:root {
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-skew-x: 0;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--tw-scroll-snap-strictness: proximity;
--tw-border-spacing-x: 0;
--tw-scale-x: 1;
--tw-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--tw-scale-y: 1;
--tw-skew-y: 0;
--tw-ring-color: rgb(59 130 246 / .5);
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
}Drop-in prompt
Build a landing page in the visual style of Output.
Reference design system (extracted from the live site):
- Palette: #e1f607, #6b3416, #f4e4d3, #a08467, #cebda1
- Typefaces: Pilat Wide Heavy, Pilat Wide Black, Pilat Book
- 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/output-com--products-output-bundle
