Feature Stack
Loading
Clay | Go to market with unique data—and the ability to act on it
Cool, spacious, technical—precise sans-serifs on a muted, calming, electric-green and yellow field.
Click any value to copy. Roles are suggestions, not gospel.
- #f5d312oklch(87.0% 0.177 97)Dominant
- #ebf373oklch(93.3% 0.151 112)Surface
- #04a25coklch(62.6% 0.155 155)Ink
- #98994doklch(66.5% 0.099 109)Accent
- #a0aac1oklch(73.8% 0.035 267)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Roobertvf | 88px | 575 | 1 | -3.52px | Aa Bb Cc |
| h2 | Roobertvf | 72px | 500 | 1 | -2.16px | Aa Bb Cc |
| h3 | Roobertvf | 48px | 500 | 1 | -1.92px | Aa Bb Cc |
| body | Roobertvf | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Roobertvf | 14px | 500 | 1.5 | -0.1392px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #f5d312;
--color-surface: #ebf373;
--color-ink: #04a25c;
--color-accent: #98994d;
--color-detail: #a0aac1;
}
/* CSS variables exposed by source */
:root {
--spacing--0-25rem: .25rem;
--spacing--2-5rem: 2.5rem;
--spacing--1-25rem: 1.25rem;
--fonts--body-font-family: Inter,sans-serif;
--spacing--4-5rem: 4.5rem;
--spacing--2rem: 2rem;
--spacing--11rem: 11rem;
--color--grey-medium<deleted|variable-8c6b4a1d-24b1-aa41-3363-37e53d4709f8>: #a2a8b7;
--spacing--0-5rem: .5rem;
--fonts--body-font: Roobertvf,Arial,sans-serif;
--fonts--secondary-font-family: "Canela Web",sans-serif;
--spacing--1-5rem: 1.5rem;
--color--clay-black<deleted|variable-26800bf5>: #000;
--spacing--0-75rem: .75rem;
--fonts--primary-font-family: Roobertvf,Arial,sans-serif;
--spacing--8rem: 8rem;
--spacing--7rem: 7rem;
--spacing--3rem: 3rem;
--color--blue-500<deleted|variable-ebe93488-89c6-a5cd-d5e1-dded8473b4b5>: #038ff7;
--spacing--0-875rem: .875rem;
--spacing--6rem: 6rem;
--radius--large: 2.5rem;
--spacing--1-75rem: 1.75rem;
--spacing--1rem: 1rem;
--color--green-600<deleted|variable-1be72259-5255-72a7-9424-f413d6a9c046>: #047e4a;
--fonts--heading-font: Roobertvf,Arial,sans-serif;
--radius--small: .5rem;
--radius--medium: 1.5rem;
--spacing--4rem: 4rem;
--spacing--5rem: 5rem;
--loam---web-library_typography-v2---h1--font-weight-2: 600;
--loam---web-library_typography-v2---paragraph-sm--letter-spacing-2: 0em;
--_layout---section-horizontal--medium: 4rem;
--loam---web-library_layout--restart---section-vertical--medium: 6rem;
--heading-–-h4--font-weight: 0px;
--loam---web-library_typography-v2---paragraph-sm--font-size-2: .75rem;
--_layout---gap--regular: 1.25rem;
--_swatches---color--matcha-300: #84e7a5;
--loam---web-library_terra-swatches---oat--oat-100: #fefdfb;
--_swatches---color--lemon-700: #d08a11;
--loam---web-library_typography---eyebrow--font-size-max-rem: .8;
--loam---web-library_typography-v2---h4--letter-spacing-2: 0em;
--loam---web-library_typography--restart---paragraph-regular--font-size: 1rem;
--loam---web-library_typography---h1--font-weight: 600;
--_typography---paragraph-medium--font-size: 1.25rem;
--pricing-table--border-color<deleted|variable-7a41ce91-12b5-b407-3972-f65998c8011c>: white;
--_swatches---color--slushie-800: #0089ad;
--_swatches---color--ube-900: #32037d;
--loam---web-library_components---button--border-radius: .5rem;
--loam---web-library_components---input-label--letter-spacing: 0em;
--loam---web-library_layout--restart---gap--regular: 1.25rem;
--loam---web-library_layout--restart---card--regular: 1.5rem;
--loam---web-library_typography--restart---h2--line-height: 1;
--loam---web-library_typography---paragraph-body--font-size-min-rem: .9;
--loam---web-library_terra-swatches---ube--ube-400: #6d4cd6;
--loam---web-library_typography---h6--font-size: clamp(.9*1rem,((.9 - ((1 - .9)/(90 - 20)*20))*1rem + ((1 - .9)/(90 - 20))*100vw),1*1rem);
--loam---web-library_terra-swatches---blueberry--blueberry-500: #001433;
--loam---web-library_typography---h5--font-size-min-rem: 1.1;
--loam---web-library_typography--restart---eyebrow--font-weight-3: 500;
--_typography---paragraph-small--line-height: 1.3;
}Drop-in prompt
Build a landing page in the visual style of Clay | Go to market with unique data—and the ability to act on it.
Reference design system (extracted from the live site):
- Palette: #f5d312, #ebf373, #04a25c, #98994d, #a0aac1
- Typefaces: Roobertvf
- 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/clay-com
