developer tools Color System
Mintlify's website is a study in documentation-as-product design — a white, airy, information-rich s...
Mintlify's website is a study in documentation-as-product design — a white, airy...
Mintlify uses #0d0d0d as the primary accent for interactive elements
Carefully selected 8 colors for developer-tools applications
Uses negative letter-spacing, gradient and more
#0d0d0d
Primary text, headings, dark surfaces. Not pure black — the micro-softness improves reading comfort.
#ffffff
Page background, card surfaces, input backgrounds.
#18E299
The signature accent — CTAs, links on hover, focus rings, brand identity.
#d4fae8
Tinted green surface for badges, hover states, subtle backgrounds.
#0fa76e
Darker green for text on light-green badges, hover states on brand elements.
#c37d0d
Warning states, caution badges — `--twoslash-warn-bg`.
#3772cf
Tag backgrounds, informational annotations — `--twoslash-tag-bg`.
#d45656
Error states, destructive actions — `--twoslash-error-bg`.
/* Mintlify Color System */
:root {
--mintlify-near-black: #0d0d0d;
--mintlify-pure-white: #ffffff;
--mintlify-brand-green: #18E299;
--mintlify-brand-green-light: #d4fae8;
--mintlify-brand-green-deep: #0fa76e;
--mintlify-warm-amber: #c37d0d;
--mintlify-soft-blue: #3772cf;
--mintlify-error-red: #d45656;
}
/* Example usage */
.mintlify-button-primary {
background-color: var(--mintlify-near-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...