developer tools Color System
Raycast's marketing site feels like the dark interior of a precision instrument — a Swiss watch case...
Raycast's marketing site feels like the dark interior of a precision instrument ...
Raycast uses #07080a as the primary accent for interactive elements
Carefully selected 8 colors for developer-tools applications
Uses negative letter-spacing, gradient
#07080a
Primary page background — the foundational void with a subtle blue-cold undertone
#ffffff
Primary heading text, high-emphasis elements
hsla(202, 100%, 67%, 0.15)
Blue tint overlay for interactive surfaces
hsla(0, 100%, 69%, 0.15)
Red tint overlay for danger/error surfaces
#07080a
Page canvas, the darkest surface
#101111
Elevated surface, card backgrounds
#121212
Keyboard key gradient start
#0d0d0d
Keyboard key gradient end
/* Raycast Color System */
:root {
--raycast-near-black-blue: #07080a;
--raycast-pure-white: #ffffff;
--raycast-blue-transparent: hsla(202, 100%, 67%, 0.15);
--raycast-red-transparent: hsla(0, 100%, 69%, 0.15);
--raycast-deep-background: #07080a;
--raycast-surface-100: #101111;
--raycast-key-start: #121212;
--raycast-key-end: #0d0d0d;
}
/* Example usage */
.raycast-button-primary {
background-color: var(--raycast-near-black-blue);
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...