Studio
Studio
The Mintlify design system uses a light-themed visual language. The primary brand color is Coal (#08090a); text is Ink (#000000) on a White Canvas (#ffffff) background. Typography is set in Inter. This DESIGN.md contains 8 color tokens and a 7-step type scale; give it to AI tools like Claude, Cursor or v0 to generate consistent interfaces in the style of Mintlify.
Independent Style Review
Digital librarian's desk. Precise information architecture meets subtle brand identity through selective color accents.
Mintlify captures an atmosphere of serene, intelligent efficiency, like navigating a well-organized digital library. The predominant use of highly desaturated grays and stark black-on-white provides a clean, information-focused base. A single vivid green (#0c8c5e) acts as a digital beacon, highlighting interactive elements and key information without visual clutter. The visual restraint in color and a subtle elevation system communicate authority through clarity, making complex documentation feel approachable.
| Color | HEX | CSS token | Usage |
|---|---|---|---|
| Ink | #000000 | --color-ink | Primary text, core UI elements, strong contrasts against light backgrounds |
| White Canvas | #ffffff | --color-white-canvas | Page backgrounds, card surfaces, inverted text on dark elements |
| Coal | #08090a | --color-coal | Prominent headings, button backgrounds, elevated text |
| Platinum | #f2f2f2 | --color-platinum | Subtle borders, dividers, subtle background variations |
| Steel | #dddddd | --color-steel | Thin stroke borders, less noticeable dividers |
| Sage Mark | #0c8c5 | --color-sage-mark | Primary brand accent, interactive elements like CTA buttons, active states, key icons, and selected links. Its vividness provides clear visual cues in an otherwise neutral palette. |
| Emerald Glow | #00dc8d | --color-emerald-glow | Secondary accent for icons or subtle graphic highlights, complementing the primary Sage Mark. |
| Deep Cobalt | #0052ff | --color-deep-cobalt | Specific graphic elements, illustrations where a strong, vibrant blue is needed. |
| Font | Weights | Fallback |
|---|---|---|
| Inter | 400, 500, 600 | system-ui |
| Role | Size | Line height | Token |
|---|---|---|---|
| caption | 13px | 1.71 | --text-caption |
| body | 16px | 1.5 | --text-body |
| subheading | 18px | 1.33 | --text-subheading |
| heading-sm | 20px | 1.3 | --text-heading-sm |
| heading | 24px | 1.15 | --text-heading |
| heading-lg | 40px | 1.15 | --text-heading-lg |
| display | 57px | 1.1 | --text-display |
Design Systems
