design productivity Color System
Clay's website is a warm, playful celebration of color that treats B2B data enrichment like a craft ...
Clay's website is a warm, playful celebration of color that treats B2B data enri...
Clay uses #000000 as the primary accent for interactive elements
Carefully selected 8 colors for design-productivity applications
Uses negative letter-spacing
#000000
Text, headings, pricing card text, `--_theme--pricing-cards---text`
#ffffff
Card backgrounds, button backgrounds, inverse text
#faf9f7
Page background — the warm, paper-like canvas
#84e7a5
`--_swatches---color--matcha-300`, light green accent
#078a52
`--_swatches---color--matcha-600`, mid green
#02492a
`--_swatches---color--matcha-800`, deep green for dark sections
#3bd3fd
`--_swatches---color--slushie-500`, bright cyan accent
#0089ad
`--_swatches---color--slushie-800`, deep teal
/* Clay Color System */
:root {
--clay-clay-black: #000000;
--clay-pure-white: #ffffff;
--clay-warm-cream: #faf9f7;
--clay-matcha-300: #84e7a5;
--clay-matcha-600: #078a52;
--clay-matcha-800: #02492a;
--clay-slushie-500: #3bd3fd;
--clay-slushie-800: #0089ad;
}
/* Example usage */
.clay-button-primary {
background-color: var(--clay-clay-black);
color: #ffffff;
border: none;
border-radius: 8px;
padding: 8px 15px;
}Airtable's website is a clean, enterprise-friendly platform that communicates "s...
Cal.com's website is a masterclass in monochromatic restraint — a grayscale worl...
Figma's interface is the design tool that designed itself — a masterclass in typ...
Framer's website is a cinematic, tool-obsessed dark canvas that radiates the con...