design productivity Color System
Cal.com's website is a masterclass in monochromatic restraint — a grayscale world where boldness com...
Cal.com's website is a masterclass in monochromatic restraint — a grayscale worl...
Cal uses #242424 as the primary accent for interactive elements
Carefully selected 8 colors for design-productivity applications
Uses negative letter-spacing, gradient and more
#242424
Primary heading and button text — Cal.com's signature near-black, warmer than pure black
#111111
Deepest text/overlay color — used at 50% opacity for subtle overlays
#ffffff
Primary background and surface — the dominant canvas
#0099ff
In-text links with underline decoration — the only blue in the system, reserved strictly for hyperlinks
#0000ee
Browser-default link color on some elements — unmodified, signaling openness
#ffffff
Primary page background and card surfaces
#898989
Secondary text, descriptions, and muted labels
#242424
Headlines, buttons, primary UI text
/* Cal Color System */
:root {
--cal-charcoal: #242424;
--cal-midnight: #111111;
--cal-white: #ffffff;
--cal-link-blue: #0099ff;
--cal-default-link: #0000ee;
--cal-pure-white: #ffffff;
--cal-mid-gray: #898989;
--cal-charcoal: #242424;
}
/* Example usage */
.cal-button-primary {
background-color: var(--cal-charcoal);
color: #ffffff;
border: none;
border-radius: 8px;
padding: 8px 15px;
}Airtable's website is a clean, enterprise-friendly platform that communicates "s...
Clay's website is a warm, playful celebration of color that treats B2B data enri...
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...