Feature Stack
Loading
Synthesia
Cool, deep indigo expanse—crisp sans-serif geometry on vast, airy digital canvas.
Click any value to copy. Roles are suggestions, not gospel.
- #344dc7oklch(47.9% 0.191 269)Dominant
- #4a3b8eoklch(41.5% 0.132 288)Surface
- #8da6eaoklch(73.3% 0.103 268)Ink
- #81708coklch(57.1% 0.047 312)Accent
- #c7a69aoklch(75.1% 0.043 41)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Basiersquare Webfont | 88px | 500 | 1 | -4.4px | Aa Bb Cc |
| h2 | Basiersquare Webfont | 56px | 500 | 1.04 | -2.24px | Aa Bb Cc |
| h3 | Basiersquare Webfont | 28px | 500 | 1.21 | -0.98px | Aa Bb Cc |
| body | Basiersquare Webfont | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Basiersquare Webfont | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Basiersquare Webfont | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #344dc7;
--color-surface: #4a3b8e;
--color-ink: #8da6ea;
--color-accent: #81708c;
--color-detail: #c7a69a;
}
/* CSS variables exposed by source */
:root {
--border-radius-base: .75rem;
--border-radius-huge: 6.25rem;
--border-radius-xxsmall: .375rem;
--border-radius-xxlarge: 5rem;
--border-radius-xlarge: 1.5rem;
--shadow: #10182814;
--border-box<deleted|variable-7386bd28-8d4a-96a6-2467-1dac7c0266b7>: 1px;
--border-radius-full: 999rem;
--border-radius-small: .625rem;
--border-radius-large: 1rem;
--border-radius-xsmall: .5rem;
--orange-500-main: #ff6a42;
--fluid-spacing-large: 2.5rem;
--_semantic---bg-error: #feeceb;
--_semantic---text-primary: #0d0f2c;
--_typography---heading-medium-letter-spacing: -.1rem;
--indigo-100: #f5f8ff;
--fluid-spacing-xxxlarge: 4rem;
--blue<deleted|variable-dabb3976>: #005aeb;
--orange-600: #cb3711;
--_typography---heading-tiny-font-size: 1.5rem;
--_typography---paragraph-small-letter-spacing: -.00175rem;
--pink-600: #a73b98;
--error-300: #fee4e2;
--grey-400: #c8cbda;
--_typography---paragraph-small-font-size: .875rem;
--fluid-spacing-xhuge: 6rem;
--_semantic---border-error: #d92d20;
--_semantic---border-default: #d1d6e5;
--teal-700: #164c63;
--warning-800: #4e1d09;
--_typography---paragraph-medium-letter-spacing: -.004rem;
--yellow-500-main: #ffc814;
--teal-200: #d6fbff;
--_semantic---text-inverted: white;
--_typography---heading-huge-font-size: 5.5rem;
--base-white-opacity-40: #fff6;
--_typography---paragraph-large-line-height: 1.625rem;
--error-200: #feeceb;
--pink-500-main: #e585d7;
--orange-700: #771a0d;
--base-dark-opacity-20: #0d0f2c33;
--_semantic---text-success: #15a261;
--grey-200: #e6eaf4;
--indigo-300: #c6d7fe;
--orange-800: #470800;
--_semantic---border-accent-orange: #771a0d;
--_semantic---text-link-tertiary-active: #656c86;
--_semantic---bg-brand-subtle: #e3ebff;
--_semantic---border-subtle: #e6eaf4;
--success-300: #dcfae6;
--error-800: #55160c;
--base-spacing-xlarge: 3rem;
--_semantic---border-caption: #c6d7fe;
--base-dark-opacity-40: #0d0f2c66;
--_semantic---text-accent-orange: #771a0d;
--_semantic---text-link-primary-active: #3e57da;
--fluid-spacing-xxlarge: 3.5rem;
--fluid-spacing-xlarge: 3rem;
--_typography---heading-large-letter-spacing: -.14rem;
}Drop-in prompt
Build a landing page in the visual style of Synthesia.
Reference design system (extracted from the live site):
- Palette: #344dc7, #4a3b8e, #8da6ea, #81708c, #c7a69a
- Typefaces: Basiersquare Webfont
- Macrostructure: Feature Stack
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/synthesia-io
