NoGood · Shop
Catalogue
Loading
Synthesis · Blog
Warm cream editorial, bold coral typography floating over playful geometric confetti
Click any value to copy. Roles are suggestions, not gospel.
- #06f0e2oklch(86.0% 0.150 187)Dominant
- #ebc88boklch(84.9% 0.088 81)Surface
- #0d5552oklch(40.8% 0.066 191)Ink
- #998e5aoklch(64.4% 0.072 98)Accent
- #ccc7bdoklch(83.1% 0.015 85)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Fraunces 72pt Soft | 40px | 400 | 1.2 | 0 | Aa Bb Cc |
| h2 | Fraunces 72pt Soft | 34px | 400 | 1.2 | 0 | Aa Bb Cc |
| h3 | Fraunces 72pt Soft | 34px | 400 | 1.2 | 0 | Aa Bb Cc |
| body | Public Sans | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
:root {
--color-dominant: #06f0e2;
--color-surface: #ebc88b;
--color-ink: #0d5552;
--color-accent: #998e5a;
--color-detail: #ccc7bd;
}
/* CSS variables exposed by source */
:root {
--dusk: #2d4f8e;
--seashell<deleted|variable-a11b06d4>: #fff6ee;
--tangerine<deleted|variable-2040cfe5>: #ff4f29;
--gunmetal: #22211d;
--acai: #c04455;
--grey: #74726a;
--tangerine-accessible: #db2a04;
--pear: #d2ce46;
--diamond: #c0eaf8;
--turmeric: #ffab00;
--wine: #800020;
--evergreen: #005727;
--bone: #fff6ee;
--tangerine: #ff4e28;
--steel: #779dc3;
--pandan: #6b9c3f;
--pumpkin: #fe7d14;
--grey-bright: #b4b2af;
--cursor-border-radius: 100%;
--tulip: #fe8989;
--grey-muted: #4e4c46;
}Drop-in prompt
Build a landing page in the visual style of Synthesis · Blog.
Reference design system (extracted from the live site):
- Palette: #06f0e2, #ebc88b, #0d5552, #998e5a, #ccc7bd
- Typefaces: Fraunces 72pt Soft, Public Sans
- Macrostructure: Catalogue
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/synthesis-partners--library
