developer tools Color System
Cursor's website is a study in warm minimalism meets code-editor elegance. The entire experience is ...
Cursor's website is a study in warm minimalism meets code-editor elegance. The e...
Cursor uses #26251e as the primary accent for interactive elements
Carefully selected 8 colors for developer-tools applications
Uses negative letter-spacing, gradient and more
#26251e
Primary text, headings, dark UI surfaces. A warm near-black with distinct yellow-brown undertone -- the defining color of the system.
#f2f1ed
Page background, primary surface. Not white but a warm cream that sets the entire warm tone.
#e6e5e0
Secondary surface, button backgrounds, card fills. A slightly warmer, slightly darker cream.
#ffffff
Used sparingly for maximum contrast elements and specific surface highlights.
#000000
Minimal use, specific code/console contexts.
#f54e00
Brand accent, `--color-accent`. A vibrant red-orange used for primary CTAs, active links, and brand moments. Warm and urgent.
#c08532
Secondary accent, warm gold for premium or highlighted contexts.
#cf2d56
`--color-error`. A warm crimson-rose rather than cold red.
/* Cursor Color System */
:root {
--cursor-cursor-dark: #26251e;
--cursor-cursor-cream: #f2f1ed;
--cursor-cursor-light: #e6e5e0;
--cursor-pure-white: #ffffff;
--cursor-true-black: #000000;
--cursor-cursor-orange: #f54e00;
--cursor-gold: #c08532;
--cursor-error: #cf2d56;
}
/* Example usage */
.cursor-button-primary {
background-color: var(--cursor-cursor-dark);
color: #ffffff;
border: none;
border-radius: 8px;
padding: 8px 15px;
}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...
Mintlify's website is a study in documentation-as-product design — a white, airy...