fromanother
Marquee Hero
Loading
Click any value to copy. Roles are suggestions, not gospel.
- #e89f08oklch(75.5% 0.158 76)Dominant
- #efb992oklch(82.5% 0.081 57)Surface
- #8f610boklch(52.9% 0.108 75)Ink
- #5d76a7oklch(56.7% 0.082 263)Accent
- #d3a6b1oklch(76.9% 0.055 2)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 | 44px | 600 | 1 | 0 | Aa Bb Cc |
| h3 | Fraunces 72pt Soft | 24px | 400 | 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 740px
:root {
--color-dominant: #e89f08;
--color-surface: #efb992;
--color-ink: #8f610b;
--color-accent: #5d76a7;
--color-detail: #d3a6b1;
}
/* CSS variables exposed by source */
:root {
--dusk: #2d4f8e;
--seashell<deleted|variable-a11b06d4>: #fff6ee;
--tangerine<deleted|variable-2040cfe5>: #ff4f29;
--gunmetal: #22211d;
--acai: #c04455;
--grey: #74726a;
--pear: #d2ce46;
--tangerine-accessible: #db2a04;
--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 · About.
Reference design system (extracted from the live site):
- Palette: #e89f08, #efb992, #8f610b, #5d76a7, #d3a6b1
- Typefaces: Fraunces 72pt Soft, Public Sans
- 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/synthesis-partners--team-and-culture
