Tavus: The human computing company
Marquee Hero
Soft pastel gradients and clean sans-serifs evoke a serene, technically refined space.




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 |
|---|---|---|---|---|---|---|
| h2 | OpenAI Sans | 18px | 500 | 1.32 | -0.18px | Aa Bb Cc |
| body | OpenAI Sans | 17px | 400 | 1.65 | -0.17px | Aa Bb Cc |
| button | OpenAI Sans | 17px | 400 | 1.65 | -0.17px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #e37421;
--color-surface: #0f488c;
--color-ink: #fba48a;
--color-accent: #7c7342;
--color-detail: #d4d4ec;
}
/* CSS variables exposed by source */
:root {
--color-purple-200: lab(87.8405% 13.4282 -18.7159);
--type-h1-track: -.03em;
--color-yellow-40: #ffea8f;
--color-syntax-copy: #000;
--color-syntax-operator: #c93b00;
--color-sky-500: lab(63.3038% -18.433 -51.0407);
--color-orange-60: #ff9365;
--color-primary-solid-12: #e0e0e0;
--color-yellow-60: #ffe15b;
--color-primary-solid-4: #f5f5f5;
--type-nav-track: 0em;
--type-nav-header-track: 0em;
--type-xl-line: clamp(4rem, calc(4rem + 3 * ((100vw - 23.4375rem) / 66.5625)), 7rem);
--type-2xs-track: clamp(-.01em, calc(-.01em + .01 * ((90rem - 100vw) / 66.5625)), 0em);
--type-nav-header-weight: 500;
--text-base--line-height: calc(1.5 / 1);
--type-h5-track: -.01em;
--type-h5-line: clamp(1.25rem, calc(1.25rem + .235 * ((100vw - 23.4375rem) / 66.5625)), 1.485rem);
--color-supply-accent-color: #00f;
--color-gray-300: lab(85.1236% -.612259 -3.7138);
--radius-none: 0;
--type-meta-line: 1.225rem;
--font-mono: "SF Mono", Consolas, "Liberation Mono", ui-monospace, monospace;
--type-2xs-weight: 400;
--color-primary-solid-inactive: #707070;
--color-hue-red: #f53255;
--type-h6-weight: 500;
--type-h2-5-line: clamp(1.725rem, calc(1.725rem + 1.012 * ((100vw - 23.4375rem) / 66.5625)), 2.737rem);
--color-gray-80: #767881;
--color-tertiary-80: #f1f1f1cc;
--color-white: #fff;
--color-gray-400: lab(65.9269% -.832707 -8.17473);
--color-gray-20: #f0f1f2;
--type-p1-line: 1.74994rem;
--color-secondary-solid-100: #fff;
--radius-sm: .25rem;
--font-weight-bold: 700;
--color-primary-solid-80: #333;
--color-gray-100: #47484f;
--spacing-nav-width-mobile: calc(100vw - 3.5rem);
--text-xs--line-height: calc(1 / .75);
--type-h2-5-track: -.02em;
--color-primary-44: #00000070;
--color-primary-12: #0000001f;
--type-h6-size: clamp(1rem, calc(1rem + .125 * ((100vw - 23.4375rem) / 66.5625)), 1.125rem);
--type-h4-weight: 500;
--type-nav-mobile-size: 1rem;
--color-lime-200: lab(94.0718% -22.5338 42.5238);
--color-fuchsia-200: lab(87.7108% 19.9958 -18.2054);
--type-p1-weight: 400;
--radius-2xl: 1rem;
--radius-md: .38rem;
--type-nav-header-secondary-size: .8125rem;
--type-xs-weight: 400;
--radius-lg: 1rem;
--color-pink-100: #8a3a6f;
--type-code-snippet-line: clamp(1.3325rem, calc(1.3325rem + .1025 * ((100vw - 23.4375rem) / 66.5625)), 1.435rem);
--type-nav-desktop-size: .875rem;
--type-cta-weight: 500;
--type-supply-accent-line: 1.05rem;
}Drop-in prompt
Build a landing page in the visual style of Openai.
Reference design system (extracted from the live site):
- Palette: #e37421, #0f488c, #fba48a, #7c7342, #d4d4ec
- Typefaces: OpenAI 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/openai-com