---
title: "Mintlify design system"
variant: extended
source: https://www.mintlify.com/
captured_at: 2026-10-12
theme: light
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/mintlify-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Mintlify · Design System

> Quiet editorial clarity, threaded with mint-green signals.

**Theme:** light · **Industry:** devtools · **Source:** https://www.mintlify.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Mintlify presents its documentation platform through an airy, editorial layout with black typography, restrained green accents, and prominent product-interface imagery. The long homepage moves from a serif-led hero through customer proof and feature showcases into enterprise stories, startup examples, testimonials, updates, and a spacious link-heavy footer.

## North star

Keep the page calm and editorial: anchor it in white space, near-black typography, and product visuals accented with precise mint-green signals.

## Overview

The page uses a white canvas and unusually generous open space to keep attention on concise headings and product screens. Near-black establishes the main hierarchy; muted grays carry supporting copy, while mint green appears in the logo, status cues, links, and fine flowing lines around interface imagery. The hero’s large serif headline creates an editorial contrast with the otherwise clean Inter-led interface. Paper Mono is reserved for compact labels and code-like details. Content is arranged in centered, broad sections: a split hero, customer logo grid, modular feature cards, case-study cards, metrics, testimonials, and a three-column updates feed. Pale warm-gray surfaces and delicate hairlines distinguish cards without making the page feel boxed in. Product imagery is mostly interface-led, with soft mint-tinted panels and fine gradient line motifs; vivid colors are concentrated in customer story artwork rather than the core UI.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas, open section backgrounds, and reversed text on dark buttons. |
| Soft Divider | `#f1f0ee` | `--color-soft-divider` | neutral | Fine hairlines separating navigation, cards, and footer content. |
| Warm Paper | `#f9f6f3` | `--color-warm-paper` | surface | Warm, pale card surface behind feature content and testimonials. |
| Mint Signal | `#0c8c5e` | `--color-mint-signal` | brand | Brand green for logo details, status cues, small highlights, and selected text. |
| Carbon Ink | `#08090a` | `--color-carbon-ink` | neutral | Primary headings, body text, and solid primary CTA backgrounds. |
| Slate Copy | `#383939` | `--color-slate-copy` | neutral | Secondary body copy and less prominent explanatory text. |
| Quiet Gray | `#6b6b6c` | `--color-quiet-gray` | neutral | Muted descriptions, supporting labels, and low-emphasis text. |
| Mint Glow | `#8bf0cc` | `--color-mint-glow` | accent | Bright mint in fine decorative gradients around product imagery, not a broad UI fill. |
| Story Vermilion | `#c44120` | `--color-story-vermilion` | accent | Bold background within an enterprise customer case-study card, not a general brand surface. |
| Deep Evergreen | `#121715` | `--color-deep-evergreen` | neutral | Dark supporting interface and display text, including dark editorial image areas. |
| Sky Thread | `#a1d6ff` | `--color-sky-thread` | accent | Blue note in decorative gradients and customer artwork, not a core interface color. |
| Lime Thread | `#dcff91` | `--color-lime-thread` | accent | Lime strand in fine decorative gradients and illustrative motion. |
| Electric Blue | `#0052ff` | `--color-electric-blue` | accent | Blue customer-card or illustration detail; keep out of the primary UI palette. |
| Ocean Panel | `#0077a6` | `--color-ocean-panel` | semantic | Inverse blue surface appearing in a card or illustration rather than the dominant page canvas. |
| Moss Charcoal | `#485450` | `--color-moss-charcoal` | neutral | Low-key interface text and supporting footer or button details. |
| Sage Gray | `#717d79` | `--color-sage-gray` | neutral | Subdued supporting text and interface details. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f9f6f3` (Warm Paper) · `--color-surface-2` → `#0077a6` (Ocean Panel) · `--color-text` → `#08090a` (Carbon Ink) · `--color-text-muted` → `#383939` (Slate Copy) · `--color-text-subtle` → `#6b6b6c` (Quiet Gray) · `--color-border` → `#f1f0ee` (Soft Divider) · `--color-accent` → `#0c8c5e` (Mint Signal) · `--color-accent-2` → `#c44120` (Story Vermilion) · `--color-accent-3` → `#8bf0cc` (Mint Glow)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#08090a` | `#ffffff` | 19.93:1 | AAA |
| `#08090a` | `#f9f6f3` | 18.51:1 | AAA |
| `#08090a` | `#0077a6` | 3.98:1 | AA-large |
| `#383939` | `#ffffff` | 11.59:1 | AAA |
| `#383939` | `#f9f6f3` | 10.76:1 | AAA |
| `#383939` | `#0077a6` | 2.31:1 | fail |
| `#6b6b6c` | `#ffffff` | 5.32:1 | AA |
| `#6b6b6c` | `#f9f6f3` | 4.94:1 | AA |
| `#6b6b6c` | `#0077a6` | 1.06:1 | fail |
| `#0c8c5e` | `#ffffff` | 4.26:1 | AA-large |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 55%, lab(100 0 0) 96%)`
- `linear-gradient(106deg, rgba(68, 174, 255, 0.5) 0%, rgba(24, 226, 153, 0.5) 35%, rgba(186, 255, 36, 0.5) 65%, rgba(24, 226, 153, 0.5) 100%)`
- `linear-gradient(to right, lab(100 0 0) 0%, rgba(0, 0, 0, 0) 71%)`
- `linear-gradient(to right, rgba(0, 0, 0, 0) 0%, lab(100 0 0) 71%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| inter | `--font-body` | webfont | 500, 400 | Primary interface and content face for navigation, body copy, buttons, and most headings. | Inter |
| paperMono | `--font-mono` | webfont | 500 | Compact captions, code-like labels, and small technical metadata. | IBM Plex Mono |
| arizonaFlare | `--font-display` | webfont | 500, 400 | Distinctive oversized hero headline. | Instrument Serif |

- **inter:** Use regular to medium weights; clean sans-serif forms, restrained tracking, and sentence-case labels.
- **paperMono:** Monospaced, medium weight, tightly set; keep it to small labels rather than long copy.
- **arizonaFlare:** Regular serif weight, tight negative tracking, and sentence case create the page’s editorial opening.

### Type scale — Augmented Fourth (ratio ≈ 1.375, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 50px | 400 | 1.04 | -0.04em | — | arizonaFlare | Serif headline anchoring the hero. |
| h2 | 44px | 400 | 1.09 | -0.02em | — | inter | Major section headings and editorial feature statements. |
| h3 | 36px | 500 | 1.11 | -0.02em | — | inter | Feature-card and customer-story headings. |
| h4 | 35px | 500 | 1.14 | -0.01em | — | inter | Secondary titles within cards and content blocks. |
| body | 14px | 400 | 1.71 | 0 | — | inter | Descriptions, explanatory paragraphs, and customer quotes. |
| caption | 12px | 500 | 1 | 0.02em | — | paperMono | Compact metadata, category labels, and technical cues. |
| button | 14px | 500 | 1.14 | 0 | — | inter | Primary and secondary action labels. |
| nav | 14px | 500 | 1.14 | 0 | — | inter | Top-level navigation and footer navigation labels. |
| link | 16px | 400 | 1.5 | 0 | — | inter | Customer stories, updates, and inline navigation links. |
| code | 12px | 500 | 1 | 0.02em | — | paperMono | Small technical or code-like interface labels. |

OpenType features in use: `"ss03"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 10, 12, 16, 20, 24, 28, 32, 40, 48 px.
- Section rhythm 48px · element gap 4px · card padding — · max content width —.

Use a centered, broad content frame with a clear left alignment for section headings and generous horizontal breathing room. The hero is a two-column composition: copy at left and a large interface view with decorative lines at right. Follow with a compact customer logo grid, then varied modular card arrangements and wide case-study rows. Sections are separated mainly by open white space, not colored bands. Keep content density comfortable: cluster related proof within a section, but give each major block a distinct pause.

## Shape & elevation

- Radius: button `4px` · card `6px` · nav `4px` · link `6px` · xs `2px` · sm `4px` · md `6px` · lg `12px`
- Shadow `inset` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.02) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Motion: standard transition `0.1s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The visual system is largely flat: white space does most of the separation work. Use delicate gray hairlines and pale warm card backgrounds rather than pronounced shadows. Cards have softly rounded corners, and product screens can layer over decorative linework with subtle contrast, keeping the interface readable and calm.

## Imagery

Lead with crisp documentation-product interface screenshots and UI mockups, framed as large light panels rather than device photography. Fine mint, lime, and blue linework arcs around or behind the screens. Customer stories use branded artwork and occasional photography, including vivid color fields; treat these as individual content assets rather than changing the restrained site-wide palette.

## Components

### Top navigation

Compact horizontal wordmark and links on white, with a restrained outlined Sign in action and near-black Contact sales button.

### Hero

Left-aligned serif headline, muted supporting copy, dark Get started CTA, and a large documentation UI showcase with mint linework.

### Customer logo grid

A short customer-proof statement paired with a tidy grid of company marks on pale, minimally separated tiles.

### Feature gallery

A modular mix of wide and compact pale cards, each showing a product capability with concise labels and UI illustration.

### Case-study card

Horizontally presented customer stories with branded color fields or photography, short metrics, and a small story link.

### Testimonial grid

Multiple lightly surfaced quote cards with customer identity, role, and restrained copy hierarchy.

### Updates feed

Three-column article cards with thumbnail artwork, small category/date metadata, and concise headlines.

### Footer

A short closing statement and CTA above a spacious multi-column link directory, brand mark, and system status.

### Measured component styles

- **Primary button** (“Get started”): background #08090a · text #ffffff · border 1px solid · radius 4px · padding 12px 12px 12px 16px · 500 14px inter
- **Secondary button** (“Sign in”): transparent background · text #08090a · border 1px solid #eeeeee · radius 4px · padding 8px 14px · 500 14px inter
- **Link** (“See how Anthropic accelerates AI adoptio”): transparent background · text #000000 · radius 6px · padding 0px · 400 16px inter
- **Card** (“Spotify”): background #faf8f5 · text #000000 · border 1px solid #f5f5f5 · radius 6px · padding 0px · 400 16px inter
- **Navigation item** (“Products Solutions Resources Pricing Sig”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px inter

## Do

- Keep the main canvas white and visibly spacious.
- Use near-black for primary text and primary CTA backgrounds.
- Reserve green for small brand cues, status, and fine decorative details.
- Use serif typography selectively for the hero’s editorial emphasis.
- Build feature areas from pale, softly rounded modular cards.
- Let product UI imagery carry the visual detail.
- Keep customer artwork’s vivid colors localized to its own cards.

## Don't

- Do not turn the page into a dark theme.
- Do not use strong shadows to define every card.
- Do not spread vivid customer-art colors across general UI controls.
- Do not set long body paragraphs in the display serif or mono face.
- Do not compress the space between major sections.
- Do not decorate every surface with gradients or linework.

## Agent prompt

Build a polished SaaS homepage in Mintlify’s calm editorial style. Use Gallery White (#ffffff) as the dominant canvas, Carbon Ink (#08090a) for headings and solid CTAs, Slate Copy (#383939) and Quiet Gray (#6b6b6c) for supporting text, and Soft Divider (#f1f0ee) for subtle hairlines. Apply Mint Signal (#0c8c5e) sparingly to brand and status details; use Warm Paper (#f9f6f3) for selected cards. Pair an editorial serif hero headline with a clean Inter-like sans-serif system and occasional monospaced micro-labels. Build a split hero with a large documentation interface image and restrained fine gradient linework, then alternate customer proof, modular feature cards, case studies, metrics, testimonials, and updates. Preserve generous whitespace, gentle corners, flat surfaces, and clear content hierarchy. Keep bright colors confined to customer artwork.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero: editorial copy left, large documentation interface and fine decorative lines right. | Primary start CTA, Secondary Google sign-up, Live traffic cue | Serif display headline, Product UI showcase, Mint linework |
| 2 | logo-cloud | Customer statement at left, company logos in a compact multi-column grid, metrics beneath. | Customer story link, Company proof, Usage metrics | Logo tiles, Minimal card surfaces, Small green metric cues |
| 3 | feature-grid | Introductory statement above a varied grid of wide and compact feature cards. | Section-level Get started CTA, Capability scanning | Warm pale cards, Product illustrations, Mixed card widths |
| 4 | feature-split | Section heading and short explanation above a horizontally arranged set of large story cards. | Enterprise story links, Carousel-style browsing | Branded story panels, Photography, Metric callouts |
| 5 | stats | Brief heading followed by three widely spaced metrics across a broad content row. | At-a-glance performance proof, Enterprise CTA | Large numeric figures, Compact explanatory labels, Open whitespace |
| 6 | product-grid | Section heading and brief proof statement above a horizontally scrolling row of customer cards. | Startup story links, Horizontal browsing | Bright branded artwork, Concise customer captions, Card-based gallery |
| 7 | testimonials | Left-aligned section title above a three-column grid of quote cards. | Read more link, Pause testimonials control | Light quote cards, Customer names and roles, Compact identity marks |
| 8 | content-feed | Section heading with a posts action above three evenly aligned article cards. | All posts link, Category and date browsing | Editorial thumbnails, Compact metadata, Short headlines |
| 9 | footer | Closing headline and CTAs above a spacious multi-column link directory. | Talk to sales, Get started, System status | Brand mark, Columned text links, Subtle decorative lines |

## Source CSS custom properties (selected)

```css
--twoslash-border-color: #dbdfde;
--twoslash-underline-color: currentColor;
--twoslash-popup-bg: #f3f7f6;
--twoslash-popup-color: inherit;
--twoslash-popup-shadow: rgba(0,0,0,.08) 0px 1px 4px;
--twoslash-code-font: inherit;
--twoslash-code-font-size: 1em;
--twoslash-matched-color: inherit;
--twoslash-highlighted-border: rgba(195,125,13,.314);
--twoslash-highlighted-bg: rgba(195,125,13,.125);
--twoslash-unmatched-color: #888;
--twoslash-cursor-color: rgba(136,136,136,.533);
--twoslash-error-color: #d45656;
--twoslash-error-bg: rgba(212,86,86,.125);
--twoslash-warn-color: #c37d0d;
--twoslash-warn-bg: rgba(195,125,13,.125);
--twoslash-tag-color: #3772cf;
--twoslash-tag-bg: rgba(55,114,207,.125);
--twoslash-tag-warn-color: #c37d0d;
--twoslash-tag-warn-bg: rgba(195,125,13,.125);
--twoslash-tag-annotate-color: #1ba673;
--twoslash-tag-annotate-bg: rgba(27,166,115,.125);
--twoslash-text-size: .8rem;
--accordion-radius: 8px;
--accordion-duration: 150ms;
--accordion-ease: cubic-bezier(0.4, 0, 0.2, 1);
--accordion-background-color: #fefdfb;
--accordion-background-color-dark: #fefdfb;
--accordion-background-hover: lab(2.42579% -.165291 -.470081/.03);
--accordion-background-hover-dark: lab(2.42579% -.165291 -.470081/.03);
--accordion-border-color: rgba(0,0,0,.06);
--accordion-border-color-dark: rgba(0,0,0,.06);
--accordion-text-color: #121715;
--accordion-text-color-dark: #121715;
--accordion-icon-color: #485450;
--accordion-icon-color-dark: #485450;
--accordion-arrow-color: #485450;
--accordion-arrow-color-dark: #485450;
--accordion-content-color: #485450;
--accordion-content-color-dark: #485450;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/mintlify-com