Skip to content
DesignMunkDesignMunk Submit a site

Mintlify

mintlify.com
Self-updating knowledge infrastructure for agents—24/7.
AI Developer Tools Next.js Tailwind Homepage arizona Flare Inter
Share Visit site
mintlify.com DESKTOP · 1440
Mintlify

AI Breakdown

Design export

# Design brief: the Mintlify design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/09160753/mintlify-com-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/09160753/mintlify-com-featured.webp
- On DesignMunk: https://designmunk.com/mintlify/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Mintlify: Flared-Serif Headlines with Mint Gradient Energy

## Overview

Mintlify's UI is calm, technical, and credible. It balances a monochrome canvas with mint accents used sparingly for status, lines, and highlights. Spacing is generous and modular, producing clear sections and repeatable blocks. Typography leads: a flared serif for display headlines, Inter for everything operational. The overall feel is serious, spacious, and product-evidence first.

## Colors

- **primary (#08090a):** Inky near-black for headlines, body text, and strong icons.
- **secondary (#1be39b):** Vivid mint accent for status, highlight chips, and interactive accents.
- **tertiary (#0c8c5e):** Deep mint used for emphasis states and denser data accents.
- **neutral (#ffffff):** Paper-white foundation for the canvas and default surfaces.
- **brand-coveted-blue (#99bbb0):** Desaturated blue-mint for hairline rules, subtle borders, and illustrative line work.
- **surface (#ffffff):** Primary page surface; pair with on-surface for maximum readability.
- **on-surface (#08090a):** Default text color when placed on surface backgrounds.

## Typography

- Headline LG (Arizona Flare, 50px/1.04, -0.04em, 400): Display headlines in hero and key section intros. Arizona Flare is custom/self-hosted and not freely loadable; suitable substitutes include Fraunces and DM Serif Display.
- Headline MD (Inter, 39px/1.21, 400): Section titles and high-visibility subheads.
- Headline SM (Inter, 30px/1.2, 400): Card titles, metric labels, and secondary section headings.
- Headline XS (Inter, 23px/1.22, 400): Footer headings, testimonial names, and small section intros.
- Body MD (Inter, 18px/1.5, 400): All paragraph copy, nav links, buttons, and descriptions. Inter is a Google font and can be loaded directly.

## Layout

The spacing scale uses an 8px base: 8, 16, 32, 58, and 160px. Use xs–sm for element padding, md for intra-section gaps, lg for section padding and header height, and xl for major vertical breaks between homepage sections. A simple 12-column grid with md (32px) gutters supports wide screenshots and multi-card rows. Content blocks should breathe—avoid packing elements tighter than sm (16px) internally.

## Elevation & Depth

Shadows are intentionally absent. Hierarchy is created with whitespace, soft tonal shifts (card background #f9f6f3), and hairline separators (inner 1px inset at very low opacity). Use borders sparingly; rely on spacing and typography before adding lines. Interactive states lean on color shifts in the mint range rather than drop shadows.

## Shapes

Two radii define the language: 4px (sm) for buttons, pills, and inputs; 12px (md) for cards, tiles, and large previews. The smaller radius signals action and precision; the larger radius signals containers and content grouping. Avoid mixing more than these two on a single screen.

## Components

Buttons
- Primary: 42px height, 4px radius, background #08090a, text #ffffff, padding 12px 12px 12px 16px. Use for main CTAs like "Get started".
- Secondary: 42px height, 4px radius, background #ffffff, text #08090a, same padding. Pair with primary in heroes.
- Link: Text only, #000000, radius 0. Use for inline calls like "Read the story".

Card
- Background #f9f6f3, text #000000, 12px radius, 32px padding; no shadow. Use for logos, customer stories, metrics, and blog items.

### Navigation bar
- Left-aligned brand with product/solutions/resources links; right-aligned actions. Reserve lg (58px) for bar height and md (32px) horizontal padding. "Contact sales" uses the primary button; "Sign in" may use the secondary style.

### Hero with stat pill
- Headline uses headline-lg; supporting copy uses body-md. Two CTAs: primary then secondary. Include an optional KPI pill (sm, 4px radius) using secondary (#1be39b) or brand-coveted-blue (#99bbb0) for the badge background.

### Product preview panel
- A large, embedded UI mock framed in a 12px card with no shadow and subtle inner border. Grid placement: 7–8 columns on desktop with md (32px) gutter.

### Logo wall tiles
- Grid of client logos set in cards (#f9f6f3, 12px radius). Use md (32px) gap and center content; keep tile heights consistent.

### "Agents at work today" metrics
- Five metrics in a responsive grid. Numbers use headline-md (39px); labels in body-md. Add hairline dividers in brand-coveted-blue (#99bbb0) when grouping.

### Customer stories rail
- Each story is a card with KPI callouts, then a link styled as button-link. Maintain 12px radius and 32px internal padding.

### Testimonial carousel
- Quote body at headline-xs (23px) or body-md; name/title underneath. Use surface background with a thin border; avoid shadows.

### Footer mega menu
- Multi-column list with headings at headline-xs and links at body-md. Include a small status badge using secondary mint for healthy state.

## Do's and Don'ts

- Do reserve headline-lg (50px Arizona Flare) for the hero and primary page intro; use Inter sizes for all other headings.
- Do keep buttons at 42px height with 4px radius; pair primary (black) and secondary (white) in that order.
- Do use #f9f6f3 cards with 12px radius for content groupings instead of adding shadows.
- Don't introduce new corner radii; stick to 4px and 12px only.
- Don't flood the page with mint; keep secondary (#1be39b) for accents and status, not body text.
- Don't tighten spacing below sm (16px) inside cards; this system relies on air for hierarchy.

## Agent Prompt Guide

Quick color reference
- Text: #08090a
- Background: #ffffff
- Border: #99bbb0
- Accent: #1be39b

1) Build the hero
- Canvas #ffffff. Top/bottom padding: xl (160px). Left column: headline in "Arizona Flare" 50px, line-height 1.04, letter-spacing -0.04em; fallback to "Fraunces". Body copy in Inter 18px/1.5. Primary button: 42px tall, 4px radius, background #08090a, text #ffffff, padding 12px 12px 12px 16px. Secondary button: 42px tall, 4px radius, background #ffffff, text #08090a. Add a small KPI pill with 4px radius, background #99bbb0, text #08090a.

2) Logo wall grid
- Section padding: lg (58px). 3–6 columns responsive. Each tile is a card: background #f9f6f3, radius 12px, padding 32px, no shadow, 1px border #99bbb0 optional. Logos centered. Grid gap: md (32px).

3) Metrics band ("Agents at work today")
- Background #ffffff. Container padding: lg (58px). Five columns on desktop. Metric value: Inter 39px/1.21 (headline-md). Label: Inter 18px/1.5. Insert 1px separators in #99bbb0 between items.

4) Customer stories rail
- Use card container (#f9f6f3, radius 12px, padding 32px). Title in Inter 30px (headline-sm), KPIs highlighted inline. Add a trailing link styled as button-link (text #000000, radius 0).

5) Footer mega menu
- Background #ffffff. Columns with headings at Inter 23px (headline-xs), links at Inter 18px (body-md). Column and row gaps: md (32px). Include a small status badge using background #1be39b and text #08090a with 4px radius.

## Similar Brands

- Vercel — stark black/white palette with disciplined spacing and developer-first hierarchy; Vercel leans more on monospace and motion.
- Stripe — spacious product storytelling with neutral cards and crisp typography; Stripe uses richer color illustrations and gradients.
- Linear — minimal UI, high contrast, and small-radius buttons; Linear prefers darker themes and more saturated purples.
- Notion — calm canvas, neutral cards, and restrained accent color; Notion uses more iconography and softer serif accents only in marketing.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #08090a;
  --color-secondary: #1be39b;
  --color-tertiary: #0c8c5e;
  --color-neutral: #ffffff;
  --color-brand-coveted-blue: #99bbb0;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 50px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.04;
  --text-headline-lg-tracking: -0.04em;
  --text-headline-md-size: 39px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.21;
  --text-headline-md-tracking: -0.006em;
  --text-headline-sm-size: 30px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.2;
  --text-headline-xs-size: 23px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 18px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --font-arizonaflare: "arizonaFlare";
  --font-inter: "Inter";

  /* Rounded */
  --radius-sm: 4px;
  --radius-md: 12px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 32px;
  --spacing-lg: 58px;
  --spacing-xl: 160px;

  /* Components */
  --button-primary-background-color: var(--color-primary);
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 12px 12px 12px 16px;
  --button-primary-height: 42px;
  --button-secondary-background-color: var(--color-neutral);
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 12px 12px 12px 16px;
  --button-secondary-height: 42px;
  --button-link-text-color: #000000;
  --button-link-rounded: 0px;
  --card-background-color: #f9f6f3;
  --card-text-color: #000000;
  --card-rounded: var(--radius-md);
  --card-padding: 32px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #08090a;
  --color-secondary: #1be39b;
  --color-tertiary: #0c8c5e;
  --color-neutral: #ffffff;
  --color-brand-coveted-blue: #99bbb0;
  --color-surface: #ffffff;
  --color-on-surface: #08090a;
  --font-headline-lg: "arizonaFlare";
  --font-headline-md: "Inter";
  --font-headline-sm: "Inter";
  --font-headline-xs: "Inter";
  --font-body-md: "Inter";
  --text-headline-lg: 50px;
  --text-headline-md: 39px;
  --text-headline-sm: 30px;
  --text-headline-xs: 23px;
  --text-body-md: 18px;
  --tracking-headline-lg: -0.04em;
  --tracking-headline-md: -0.006em;
  --font-weight-headline-lg: 400;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 4px;
  --radius-md: 12px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 32px;
  --spacing-lg: 58px;
  --spacing-xl: 160px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.031,
                    0.035,
                    0.039
                ],
                "hex": "#08090a"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.106,
                    0.89,
                    0.608
                ],
                "hex": "#1be39b"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.047,
                    0.549,
                    0.369
                ],
                "hex": "#0c8c5e"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "brand-coveted-blue": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.6,
                    0.733,
                    0.69
                ],
                "hex": "#99bbb0"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.031,
                    0.035,
                    0.039
                ],
                "hex": "#08090a"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 32,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 58,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 160,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 4,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 12,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "arizonaFlare",
                "fontSize": {
                    "value": 50,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.04,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 39,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.006,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 30,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 23,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Mintlify**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
weaveos.com
Weave Analytics
Weave
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite
clears.ai
Clears AI
Clears