developer tools Color System
Zapier's website radiates warm, approachable professionalism. It rejects the cold monochrome minimal...
Zapier's website radiates warm, approachable professionalism. It rejects the col...
Zapier uses #201515 as the primary accent for interactive elements
Carefully selected 8 colors for developer-tools applications
Uses negative letter-spacing, gradient and more
#201515
Primary text, headings, dark button backgrounds. A warm near-black with reddish undertones -- never cold.
#fffefb
Page background, card surfaces, light button fills. Not pure white; the yellowish warmth is intentional.
#fffdf9
Secondary background surface, subtle alternate tint. Nearly indistinguishable from cream white but creates depth.
#ff4f00
Primary CTA buttons, active underline indicators, accent borders. The signature color -- vivid and warm.
#36342e
Secondary text, footer text, border color for strong dividers. A warm dark gray-brown with 70% opacity variant.
#939084
Tertiary text, muted labels, timestamp-style content. Mid-range with greenish-warm undertone.
#c5c0b1
Primary border color, hover state backgrounds, divider lines. The backbone of Zapier's structural elements.
#eceae3
Secondary button backgrounds, light borders, subtle card surfaces.
/* Zapier Color System */
:root {
--zapier-zapier-black: #201515;
--zapier-cream-white: #fffefb;
--zapier-off-white: #fffdf9;
--zapier-zapier-orange: #ff4f00;
--zapier-dark-charcoal: #36342e;
--zapier-warm-gray: #939084;
--zapier-sand: #c5c0b1;
--zapier-light-sand: #eceae3;
}
/* Example usage */
.zapier-button-primary {
background-color: var(--zapier-zapier-black);
color: #ffffff;
border: none;
border-radius: 8px;
padding: 8px 15px;
}Cursor's website is a study in warm minimalism meets code-editor elegance. The e...
Expo's interface is a luminous, confidence-radiating developer platform built on...
Linear's website is a masterclass in dark-mode-first product design — a near-bla...
Lovable's website radiates warmth through restraint. The entire page sits on a c...