developer tools Color System
Superhuman's website feels like opening a luxury envelope — predominantly white, immaculately clean,...
Superhuman's website feels like opening a luxury envelope — predominantly white,...
Superhuman uses #1b1938 as the primary accent for interactive elements
Carefully selected 8 colors for developer-tools applications
Uses negative letter-spacing, gradient and more
#1b1938
Hero gradient background, deep purple that straddles blue-purple — the darkest expression of the brand
#cbb7fb
Primary accent and highlight color — soft purple used for emphasis, decorative elements, and interactive highlights
#292827
Primary text and heading color on light surfaces — warm near-black with faint brown undertone
#714cb6
Underlined link text — mid-range purple that connects to the brand palette while signaling interactivity
color(srgb 1 1 1 / 0.95)
Hero overlay text — near-white at 95% opacity for depth layering on dark surfaces
color(srgb 1 1 1 / 0.8)
Secondary text on dark surfaces — 80% opacity white for hierarchy on the hero gradient
#ffffff
Primary page background — the dominant canvas color for all content sections
#e9e5dd
Button background — a warm, neutral cream that avoids the coldness of pure gray
/* Superhuman Color System */
:root {
--superhuman-mysteria-purple: #1b1938;
--superhuman-lavender-glow: #cbb7fb;
--superhuman-charcoal-ink: #292827;
--superhuman-amethyst-link: #714cb6;
--superhuman-translucent-white: color(srgb 1 1 1 / 0.95);
--superhuman-misted-white: color(srgb 1 1 1 / 0.8);
--superhuman-pure-white: #ffffff;
--superhuman-warm-cream: #e9e5dd;
}
/* Example usage */
.superhuman-button-primary {
background-color: var(--superhuman-mysteria-purple);
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...