Mintlify. Cloud garden over a glass desk.
- Developer tools
- Light theme
- 6 colors
- 1 typeface
Mintlify operates on a near-total monochrome discipline: white canvas, near-black text, and a single vivid green as the only chromatic spark across the entire interface. The hero is the deliberate exception — a hand-illustrated cloud landscape on a dark teal gradient, with the documentation product floating in the foreground as living proof. Everything downstream reverts to austere white surfaces, tight Inter typography, and component geometry that stays square (4px button radii, 16–24px card radii) rather than pill-shaped or overly rounded. Color appears as functional punctuation: green for active states, brand links, and decorative icons; black for the sole filled button variant. Elevation is whispered, never declared — shadows sit at 0.03–0.05 opacity and are felt more than seen.

Mintlify design system
Brand1
Brand links, active nav state, feature icons, decorative dots in eyebrow labels, the thin underline on inline code references — the only chromatic accent in a monochrome system, applied sparingly to make functional moments feel switched on
Neutrals5
Body text, link defaults before hover, icon strokes, and footer rules — the workhorse neutral that carries most of the typography load
Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color
Input borders, card outlines on hover states, secondary divider lines that need a step more visibility than Mist
Subtle dividers, hairline strokes on cards, low-emphasis backgrounds, and the faintest hover wash
Page canvas, card surfaces, button text on dark fills, input fields — the base layer everything else sits on
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
True Black on Mint Green
4.93 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictFails AAA 7











