# Mintlify — Design System
> AI-native documentation platform for developers and enterprise teams.
- **Canonical:** https://uiuxskills.com/library/mintlify
- **Source:** https://mintlify.com
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:16:35.883Z

---

---
version: alpha
name: Mintlify
description: AI-native documentation platform for developers and enterprise teams.
tone: Modern, intelligent, professional, and developer-centric.
color-scheme: light
colors:
  primary: "#0C8C5E"
  secondary: "#FDE3E3"
  surface: "#FFFFFF"
  on-surface: "#08090A"
  outline: "#E5E7EB"
  error: "#FF0000"
  surface-dim: "#F9FAFB"
  on-primary: "#FFFFFF"
  focus-ring: "#0C8C5E"
  link: "#0C8C5E"
typography:
  display-lg:
    fontFamily: Inter
    fontSize: 64px
    fontWeight: 700
  display-md:
    fontFamily: Inter
    fontSize: 48px
  headline-lg:
    fontFamily: Inter
    fontSize: 40px
    fontWeight: 600
  headline-md:
    fontFamily: Inter
    fontSize: 32px
  headline-sm:
    fontFamily: Inter
    fontSize: 24px
  body-md:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 400
  label-sm:
    fontFamily: Inter
    fontSize: 12px
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 32px
  xl: 64px
  2xl: 128px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "#0A754E"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#0A754E"
  badge:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FEE2E2"
    textColor: "{colors.error}"
  card-dim:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-link:
    backgroundColor: "{colors.link}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 200ms
  duration-medium: 400ms
  easing-standard: ease-out
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.05)
  md: 0 4px 6px rgba(0, 0, 0, 0.1)
  lg: 0 10px 15px rgba(0, 0, 0, 0.1)
---

## Overview

Mintlify is a modern, developer-focused documentation platform that emphasizes AI integration and clean, high-performance UI. The visual identity is professional, minimalist, and tech-forward, utilizing a high-contrast palette and generous whitespace to convey clarity and intelligence.

## Colors

The color palette is designed for high accessibility and professional contrast, grounding the UI in a neutral, clean environment while using a signature green for all interactive elements.

*   Primary (#0C8C5E): The core brand color used for primary actions and highlights.
*   Secondary (#FDE3E3): Used for subtle background accents and secondary UI elements.
*   Surface (#FFFFFF): The primary background color for the application and marketing site.
*   On-surface (#08090A): The primary text color for high-contrast readability.
*   Outline (inferred) (#E5E7EB): Inferred border color for dividers and input fields.
*   Error (#FF0000): Semantic color for error states and alerts.
*   Surface-dim (inferred) (#F9FAFB): A slightly darker surface variant for section backgrounds.
*   On-primary (inferred) (#FFFFFF): Text color for elements placed on primary-colored backgrounds.
*   Focus-ring (inferred) (#0C8C5E): The color used for focus states on interactive elements.
*   Link (#0C8C5E): The color for interactive links.

## Typography

The typography system relies exclusively on the Inter typeface to maintain a clean, readable, and developer-centric aesthetic across all scales.

*   Display-lg: Used for primary hero headlines.
*   Display-md (inferred): Secondary hero or section headers.
*   Headline-lg: Main section titles.
*   Headline-md (inferred): Sub-section titles.
*   Headline-sm (inferred): Component headers.
*   Body-md: Standard body text for readability.
*   Label-sm (inferred): Small labels and metadata.

## Layout

The site utilizes a responsive grid system with a max-width container and a 4px base spacing unit. Content is centered with generous horizontal margins to maintain focus. The page pattern follows a logical flow: nav, hero, features, social-proof, pricing, and footer. The hero section is composed of a centered headline, subhead, and primary CTA, accompanied by a hero illustration. On mobile, the navigation collapses into a drawer to preserve screen real estate.

## Elevation & Depth

Elevation is used sparingly to provide subtle, modern depth and differentiate cards from the background. 

*   elevation.sm: Subtle lift for small elements.
*   elevation.md: Standard card lift for visual separation.
*   elevation.lg: Used for modal or drawer overlays.

## Shapes

The design system favors rounded corners to balance a professional aesthetic with a friendly, approachable feel. The scale progresses from 4px (`rounded.sm`) for fine details to 9999px (`rounded.full`) for buttons and badges.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use `{colors.primary}` for primary actions and `{colors.surface}` for secondary actions. They are styled with `{rounded.full}` and `{typography.label-sm}` to maintain a consistent, compact, and clickable appearance.

### Card
Cards are defined by `{colors.surface}` backgrounds and `{rounded.lg}` corners. Use `card-elevated` when visual separation from the background is required, or `card-dim` for secondary content areas.

### Input Field
Input fields feature a transparent background and `{colors.on-surface}` text. Upon interaction, the `input-field-focus` state applies a `{colors.primary}` border to indicate active status.

### Badge
Badges use `{colors.secondary}` as a background and `{colors.primary}` for text, providing a soft but distinct highlight. Use `badge-error` specifically for semantic error states.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Never use `{colors.error}` for non-destructive actions. |
| Apply `{rounded.lg}` to all card components. | Avoid mixing font families; stick to Inter. |
| Use `{typography.display-lg}` for hero headlines. | Never apply `{typography.display-lg}` for body text. |
| Maintain `{spacing.md}` between vertical stacks. | Do not use `{spacing.xs}` for primary layout padding. |
| Use `{colors.on-surface}` for body text. | Avoid sharp corners (0px) on buttons; use `{rounded.full}`. |
| Apply `{elevation.md}` to separate cards. | Do not use `{elevation.lg}` on small badges. |
| Use `{colors.outline}` for subtle dividers. | Avoid using high-contrast borders on light backgrounds. |
| Use `{typography.label-sm}` for button labels. | Do not use decorative fonts for UI labels. |

## Content Style

CTA labels are imperative and action-oriented, using verbs like "Start now" or "Get started for free" to drive user engagement. 

Headings are direct, benefit-driven, and professional, designed to clearly communicate the value proposition of the documentation platform.

Copy density is kept concise and scannable. Use short paragraphs and clear headings to maintain a logical rhythm, ensuring that technical information remains accessible and easy to digest.

## Imagery & Icons

The imagery style is a mix of clean, flat-style vector illustrations and high-quality product screenshots. Icons are minimalist and stroke-based, adhering to the overall clean and tech-forward brand identity.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Mintlify, a minimal, developer-centric documentation platform. Match its professional, tech-forward tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name (`{colors.primary}`, `{typography.body-md}`, `{rounded.lg}`) — never hardcode hex values, pixel sizes, or raw font weights.
2. Use only the component variants defined under `components:`. Do not invent variants (e.g. a `button-danger` or `card-outlined`) that the spec does not list.
3. Follow the Layout narrative for page structure: nav → hero → features → social-proof → pricing → footer. Mobile nav collapses to a drawer. Use `{spacing.md}` as the minimum vertical stack gap.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g. sharp corners on a button, `{elevation.lg}` on a badge), surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (Figma tokens, Storybook, theme file) is available, its values override inferred ones.

## Output contract

**Must:**
- Use all tokens by name on every generated component.
- Include hover, focus, and disabled states for interactive elements when defined (`button-primary-hover`, `input-field-focus`, `link-hover`, `swatch-focus-ring`).
- Apply `{rounded.full}` to buttons and badges; `{rounded.lg}` to cards; `{rounded.sm}` to inputs and fine details.
- Use `{motion.duration-short}` and `{motion.easing-standard}` for interactive state transitions.
- Render CTAs in imperative voice consistent with the Content Style section (e.g. "Get started", "Start now").

**Must NOT:**
- Invent colors, font families, radii, or spacing values outside the spec.
- Apply `{typography.display-lg}` to anything other than a hero headline.
- Use `{colors.error}` for non-destructive actions.
- Apply `{elevation.lg}` to small components such as badges or inputs.
- Rewrite, replace, or invent page copy, headings, button labels, or navigation items.
- Alter page sections or routes as a side effect of applying design tokens.

## When in doubt
- If the spec does not define a value, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds use `{colors.surface}`; for section backgrounds use `{colors.surface-dim}`; for text on those surfaces use `{colors.on-surface}`.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px per the Layout section.
- Inferred tokens are approximations — flag them if precision matters and prompt the user to confirm against an authoritative source.