developer tools Color System
Linear's website is a masterclass in dark-mode-first product design — a near-black canvas (`#08090a`...
Linear's website is a masterclass in dark-mode-first product design — a near-bla...
Linear App uses #0f1011 as the primary accent for interactive elements
Carefully selected 8 colors for developer-tools applications
Uses negative letter-spacing, accent color
#0f1011
Sidebar and panel backgrounds. One step up from the marketing black.
#191a1b
Elevated surface areas, card backgrounds, dropdowns.
#28282c
The lightest dark surface — used for hover states and slightly elevated components.
#f7f8f8
Near-white with a barely-warm cast. The default text color — not pure white, preventing eye strain on dark backgrounds.
#d0d6e0
Cool silver-gray for body text, descriptions, and secondary content.
#8a8f98
Muted gray for placeholders, metadata, and de-emphasized content.
#62666d
The most subdued text — timestamps, disabled states, subtle labels.
#5e6ad2
Primary brand color — used for CTA button backgrounds, brand marks, and key interactive surfaces.
/* Linear App Color System */
:root {
--linear.app-panel-dark: #0f1011;
--linear.app-level-3-surface: #191a1b;
--linear.app-secondary-surface: #28282c;
--linear.app-primary-text: #f7f8f8;
--linear.app-secondary-text: #d0d6e0;
--linear.app-tertiary-text: #8a8f98;
--linear.app-quaternary-text: #62666d;
--linear.app-brand-indigo: #5e6ad2;
}
/* Example usage */
.linear.app-button-primary {
background-color: var(--linear.app-panel-dark);
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...
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...