Designstudio
Portfolio Grid
Loading
Synthesis · Recent Work
Warm cream editorial, bold coral typography floating over playful geometric confetti
Click any value to copy. Roles are suggestions, not gospel.
- #f89025oklch(74.9% 0.165 60)Dominant
- #f2b28boklch(81.4% 0.091 52)Surface
- #9e1c0doklch(45.3% 0.167 31)Ink
- #71a658oklch(66.9% 0.122 136)Accent
- #bbd4a4oklch(83.9% 0.070 130)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Fraunces 72pt Soft | 58px | 600 | 1.2 | 0 | Aa Bb Cc |
| h2 | Fraunces 72pt Soft | 32px | 600 | 1.2 | 0 | Aa Bb Cc |
| body | Public Sans | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
| button | IBM Plex Mono | 16px | 600 | 1.25 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #f89025;
--color-surface: #f2b28b;
--color-ink: #9e1c0d;
--color-accent: #71a658;
--color-detail: #bbd4a4;
}
/* 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 · Recent Work.
Reference design system (extracted from the live site):
- Palette: #f89025, #f2b28b, #9e1c0d, #71a658, #bbd4a4
- Typefaces: Fraunces 72pt Soft, Public Sans
- Macrostructure: Portfolio Grid
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--recent-work
