Cohere
Specimen
Cool, spacious data center: crisp sans-serif code on deep indigo.




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 | Lumen Sans | 47px | 500 | 1.2 | 0 | Aa Bb Cc |
| h2 | Lumen Sans | 47px | 500 | 1.2 | 0 | Aa Bb Cc |
| h3 | Lumen Sans | 29px | 500 | 1.3 | 0 | Aa Bb Cc |
| body | Lumen Sans | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Lumen Sans | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #556be8;
--color-surface: #0f1e74;
--color-ink: #647cf4;
--color-accent: #776b8b;
--color-detail: #b8bacd;
}
/* CSS variables exposed by source */
:root {
--radius--main: 1rem;
--radius--large: 3rem;
--radius--round: 100vw;
--radius--small: .5rem;
--border-width--main: .063rem;
--radius--medium: 1.5rem;
--radius--compact: .75rem;
--radius--tiny: .25rem;
--swatch--zinc-900: #121212;
--_spacing---space--11: clamp(6*1rem,((6 - ((7.5 - 6)/(94.5 - 24.56)*24.56))*1rem + ((7.5 - 6)/(94.5 - 24.56))*100vw),7.5*1rem);
--site--max-width: min(calc(94.5*1rem), 100vw);
--swatch--zinc-600: #3a3a3f;
--swatch--zinc-400: #8c8d97;
--_typography---font-size--text-medium: clamp(1*1rem,((1 - ((1.125 - 1)/(94.5 - 24.56)*24.56))*1rem + ((1.125 - 1)/(94.5 - 24.56))*100vw),1.125*1rem);
--_theme---button-primary--border: #5368ee;
--_theme---button-ghost--border<deleted|variable-b4dbfb03-924f-4270-bb7f-a52e3763645a>: transparent;
--_button-text-style---text: #121212;
--swatch--cherry-900: #4e2c86;
--_typography---letter-spacing--0em: 0em;
--_theme---button-text-ghost--text: #5e5f6b;
--animation-delay-d2: 400ms;
--_theme---card--bg-alpha: color-mix(in srgb,white/**/80%,transparent);
--swatch--alpha-white-10: color-mix(in srgb,white/**/90%,transparent);
--_theme---card--border-primary: #f0f0f3;
--_theme---button-primary--text-hover: white;
--_text-style---font-weight: 400;
--container--full: calc(100vw - clamp(1*1rem,((1 - ((6 - 1)/(94.5 - 24.56)*24.56))*1rem + ((6 - 1)/(94.5 - 24.56))*100vw),6*1rem) * 2);
--swatch--zinc-800: #19191b;
--_theme---button-ghost--icon<deleted|variable-78f746c8-0e07-2e8a-8e33-800255e85f55>: #121212;
--_theme---icon--bg-mute: #eef2fe;
--_heading-style---font-family: "Lumen Sans",Arial,sans-serif;
--_theme---button-outline--icon-hover: #f2f2f2;
--_theme---text--text-error: #f04438;
--_theme---button-text-primary--line: #121212;
--_typography---font-size--h1: clamp(3.375*1rem,((3.375 - ((5 - 3.375)/(94.5 - 24.56)*24.56))*1rem + ((5 - 3.375)/(94.5 - 24.56))*100vw),5*1rem);
--_button-style---text: white;
--_typography---font-size--h3: clamp(1.875*1rem,((1.875 - ((3 - 1.875)/(94.5 - 24.56)*24.56))*1rem + ((3 - 1.875)/(94.5 - 24.56))*100vw),3*1rem);
--_typography---letter-spacing--0-05em: -.05em;
--_theme---button-alpha--background-hover: color-mix(in srgb,white/**/40%,transparent);
--focus--width: .125rem;
--_text-style---font-size: 1rem;
--swatch--error: #f04438;
--_theme---icon--bg-pop: #5368ee;
--_theme---button-ghost--text-hover<deleted|variable-787ddbf2-b926-ea58-cf2f-a4bd4c1501c8>: #121212;
--_typography---font--secondary-bold: 700;
--_theme---button-ghost--icon: #5e5f6b;
--_theme---button-ghost--text-hover: #121212;
--_button-style---text-hover: white;
--_theme---button-secondary--icon-hover<deleted|variable-19704465-bd43-0d0a-b950-7b40627e72f1>: #121212;
--swatch--alpha-black-90: color-mix(in srgb,#121212/**/10%,transparent);
--_theme---button-ghost--background-hover<deleted|variable-ea5fed2a-a8aa-d7ae-16c8-9793815775a1>: transparent;
--swatch--cherry-700: #703fc2;
--_theme---button-secondary--icon: #5e5f6b;
--_button-text-style---icon-hover: #121212;
--_theme---button-secondary--background-hover<deleted|variable-99187924-7846-b6b9-3ac1-47d4859ffcd1>: #cdced6;
--swatch--zinc-500: #62636b;
--_typography---font--ydc-primary-regular<deleted|variable-f4bed446-4c59-0688-0f19-e7b94fcf78d4>: 400;
--_theme---icon--icon-mute: #121627;
--_typography---font--primary-bold: 700;
--_column-count---value: 1;
}Drop-in prompt
Build a landing page in the visual style of You.
Reference design system (extracted from the live site):
- Palette: #556be8, #0f1e74, #647cf4, #776b8b, #b8bacd
- Typefaces: Lumen Sans
- Macrostructure: Specimen
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/you-com