Fal
Marquee Hero
Soft, muted teals and dusty rose, clean sans serif, spacious layouts breathe quiet intelligence.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Perfectlynineties | 88px | 400 | 1 | 0 | Aa Bb Cc |
| h2 | Perfectlynineties | 70px | 400 | 1 | 0 | Aa Bb Cc |
| h3 | Perfectlynineties | 40px | 400 | 1.1 | 0 | Aa Bb Cc |
| body | Suisse Intl | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Fk Raster Grotesk Compact Blended | 14px | 400 | 1 | 0 | Aa Bb Cc |
Max content width 1416px
:root {
--color-dominant: #3bdb5d;
--color-surface: #e9879a;
--color-ink: #4b2c22;
--color-accent: #856f58;
--color-detail: #a9b1cd;
}
/* CSS variables exposed by source */
:root {
--sizes--border-width-1: .08rem;
--space--gap: 1.88rem;
--sizes--border-width-2: .06rem;
--space--medium: 4.38rem;
--space--small: 2.5rem;
--sizes--border-width-3: 1px;
--primatives--frost-1: #f4faff;
--tw-ring-shadow: 0 0 #0000;
--accessible-components--dark-grey<deleted|variable-c4d8099c>: #9b9b9b;
--primatives--atomic-glow-1: #ffb835;
--_typography---paragraph-small: 1.13rem;
--blue<deleted|variable-ede27717>: #91d0ff;
--primatives--atomic-glow-3: #fd7f00;
--primatives--atomic-glow-00: #fff5e3;
--light-cream-2<deleted|variable-1e8cae42>: #fbf8f1;
--tw-border-spacing-x: 0;
--60-dark-green<deleted|variable-d56217b3>: #073b4199;
--retrograde-lilac-0: #ffedff;
--plyr-control-icon-size: 1.5em;
--black<deleted|variable-0960e846-e391-bae5-ebf1-ff44ee815edb>: black;
--retrograde-lilac-1: #fed7ff;
--themes--background-v1: #f3eee7;
--tw-ring-color: rgb(59 130 246 / .5);
--_typography---secondary-font-family: Perfectlynineties, Georgia, sans-serif;
--primatives--floppy-fog-2: #d0c9ed;
--swiper-theme-color: #007aff;
--white-fff: white;
--primatives--terminal-black: #140206;
--primatives--frost-4: #cbe7ff;
--tw-rotate: 0;
--retrograde-lilac-3: #fdb3ff;
--tw-ring-offset-color: #fff;
--tavus-white<deleted|variable-86b70b00>: #f5f3ef;
--themes--border: #140206;
--primatives--hardware-gray-8: #484748;
--primatives--keyboard-tan-3: #d5997d;
--beige-800: #5e5850;
--primatives--atomic-glow-6: #ffda95;
--light-green<deleted|variable-eae0684b>: #77cfbf;
--tw-ring-offset-width: 0px;
--buttons--secondary-background: #eae5de;
--pink-hover<deleted|variable-50ae90bf>: #b91a7e;
--light-green-2<deleted|variable-94c95f07>: #ade2d8;
--tw-scroll-snap-strictness: proximity;
--primatives--neon-field-4: #0cb531;
--primatives--static-white: white;
--tw-shadow-colored: 0 0 #0000;
--_typography---text-weight-regular: 400;
--gray<deleted|variable-409bc76c>: #f5f9f8;
--transparent: #fff0;
--plyr-color-main: white;
--primatives--bubbletech-4: #ff6183;
--primatives--neon-field-3: #1bd944;
--primatives--pc-plastic-4: #d9d0c2;
--muted<deleted|variable-c37873a8-2807-6187-9074-ff40bbfea688>: #4e4c47;
--primatives--floppy-fog-4: #9e94c8;
--white-muted<deleted|variable-eac62781-f045-b209-9792-e59de020839d>: #f5f3ef;
--tw-skew-y: 0;
--primatives--bubbletech-1: #ffb4c5;
--dull-white<deleted|variable-c19003b1-4bc4-b88e-47d8-991628e2c757>: #f5f3ef;
}Drop-in prompt
Build a landing page in the visual style of Tavus: The human computing company.
Reference design system (extracted from the live site):
- Palette: #3bdb5d, #e9879a, #4b2c22, #856f58, #a9b1cd
- Typefaces: Perfectlynineties, Suisse Intl, monospace
- 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/tavus-io