Skip to content
DesignMunkDesignMunk Submit a site

Mintlify Pricing

mintlify.com
Self-updating knowledge infrastructure for agents—24/7.
Software Technology Next.js Tailwind Pricing arizona Flare Inter
Share Visit site
mintlify.com DESKTOP · 1440
Mintlify Pricing

AI Breakdown

Design export

---
version: alpha
name: Mintlify
description: Self-updating knowledge infrastructure for agents—24/7.
colors:
  primary: "#121715"
  secondary: "#1be39b"
  tertiary: "#0c8c5e"
  neutral: "#ffffff"
  brand-coveted-blue: "#99bbb0"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: arizonaFlare
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.09
    letterSpacing: -0.018em
  headline-md:
    fontFamily: Inter
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.21
    letterSpacing: -0.006em
  headline-sm:
    fontFamily: Inter
    fontSize: 27px
    fontWeight: 400
    lineHeight: 1.19
    letterSpacing: -0.009em
  headline-xs:
    fontFamily: Inter
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.19
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 6px
spacing:
  xs: 4px
  sm: 12px
  md: 20px
  lg: 32px
  xl: 72px
components:
  button-primary:
    backgroundColor: "#08090a"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 12px 14px
    height: 42px
  button-secondary:
    backgroundColor: "#08090a"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 12px 14px
    height: 42px
  button-link:
    textColor: "#000000"
    rounded: 0px
  card:
    backgroundColor: "#faf8f5"
    textColor: "#000000"
    rounded: "{rounded.md}"
    padding: 16px
---

# Mintlify: Ivory Pricing Cards and a Quiet Serif H1

## Overview

Mintlify's UI is calm, technical, and trustworthy—built for developers, operators, and procurement. The experience should feel confident rather than flashy: sparse color, generous structure, and matter-of-fact copy. Layouts are spacious at the section level but dense where detail is needed (tables, feature matrices). Use typography and tonal surfaces to carry hierarchy; interaction chrome stays minimal.

## Colors

- **primary (#121715):** Deep ink for headlines, body text, icons, and dividers.
- **secondary (#1be39b):** Mint accent for highlights, selections, and key affordances like toggles or success states.
- **tertiary (#0c8c5e):** Darker green for emphasis states, active indicators, or hover/pressed accents.
- **neutral (#ffffff):** Paper-white app canvas and page background.
- **brand-coveted-blue (#99bbb0):** Muted sea-glass tint for subtle badges, charts, or supportive visuals.
- **surface (#ffffff):** Surface alias for neutral backgrounds.
- **on-surface (#121715):** Text and icon color when drawn over surfaces.

## Typography

- Display: headline-lg uses Arizona Flare at 44px/1.09, letter-spacing -0.018em, weight 400. Reserve for top-level page titles only. Arizona Flare is custom/self-hosted; agents cannot load it. Substitutes: Fraunces, Newsreader, or Cormorant Garamond (all Google) for a high-contrast serif with similar warmth.
- Headings: headline-md (Inter 34px/1.21) and headline-sm (Inter 27px/1.19) structure major and minor section heads.
- Subheads: headline-xs (Inter 21px/1.19) for card titles, FAQ triggers, and column labels.
- Body: body-md (Inter 16px/1.5) for descriptive copy, lists, and table cells. Inter is available from Google Fonts in a full weight range; default weight is 400 unless emphasis is needed.

## Layout

Spacing is a tight, 4px-based scale: 4, 12, 20, 32, 72. Use xl (72px) for section padding, lg (32px) for gutters between columns or major blocks, md (20px) for internal card padding and table cell vertical rhythm, and sm/xs for micro-gaps. Pricing uses a three-column grid on desktop; collapse to a single column with lg (32px) vertical gaps on smaller screens. Content blocks stack in clear bands: hero, pricing grid, proof (logos, metrics), details (tables, FAQ), final CTA.

## Elevation & Depth

Shadows are off. Hierarchy is created with tonal contrast (ivory cards vs white canvas), thin dividers, and generous whitespace. Use the card background to lift content groups, and rely on type scale and spacing for emphasis rather than elevation effects.

## Shapes

Corners are understated. Controls use rounded.sm (4px) for a precise, tool-like feel. Containers and cards use rounded.md (6px) to read as groups without feeling pill-shaped. Consistency of 4px/6px signals interactive vs structural elements.

## Components

Buttons
- Primary/Secondary: background #08090a, text #ffffff, 42px height, 12px×14px padding, 4px radius. Use for main CTAs like Get started, Try for free, and Contact us.
- Link: text #000000, 0px radius for inline navigational actions.
- Card: background #faf8f5, text #000000, 6px radius, 16px padding; use for tiers, logo tiles, and compact highlights.

### Pricing tiers grid
Three cards using card styles (#faf8f5, 6px radius, 16px padding). Titles in headline-xs (Inter 21px). Prices and tier descriptors in headline-md (Inter 34px) and body-md (Inter 16px). Primary CTA buttons at 42px height.

### Billing toggle (Monthly/Annual)
A compact segmented control placed within the Pro card. Use rounded.sm (4px), Inter 16px labels, and secondary (#1be39b) for the selected state. Keep horizontal padding near sm (12px) so it reads subordinate to the tier heading.

### Feature comparison table
Three columns (Starter, Pro, Enterprise). Headers in headline-xs (21px), cells in body-md (16px/1.5). Use md (20px) vertical and sm (12px) horizontal padding for rows. Use check/placeholder glyphs; avoid bold color except secondary for emphatic availability.

### Metrics strip (Agents at work today)
A band of stat items showing counts (e.g., Pages read). Numbers in headline-sm (Inter 27px) with labels in body-md. Space items using lg (32px) gaps.

### Logo wall
Grid of customer logos in evenly sized tiles. Each tile can reuse card background (#faf8f5) with 6px corners; maintain lg (32px) gaps and center logos inside using md (20px) padding.

### FAQ accordion
Questions in headline-xs (21px), answers in body-md (16px/1.5). Use 4px radius on triggers and md (20px) internal padding; no shadows.

### Dual-CTA banner
Closing section with headline-md (34px) and two CTAs—Talk to sales (primary) and Get started (primary or link). Maintain xl (72px) vertical padding and lg (32px) button gap.

### Top navigation
Text links in body-md (Inter 16px). Right-aligned actions: Sign in (link) and Contact sales (primary button 42px high). Keep nav height comfortable; use lg (32px) horizontal gutters.

## Do's and Don'ts

- Do reserve Arizona Flare (44px) for the hero H1 only; keep all other headings in Inter.
- Do use secondary (#1be39b) sparingly for selections and confirmations; most UI chrome stays neutral or ink.
- Do build vertical rhythm with xl (72px) sections and md/lg gaps; use md (20px) inside cards and tables.
- Don't introduce shadows; rely on #faf8f5 cards, borders, and spacing for separation.
- Don't exceed rounded.md (6px) on containers or rounded.sm (4px) on controls.
- Don't invent new button sizes—CTAs are 42px high with 12px×14px padding.

## Agent Prompt Guide

Quick color reference
- Text: #121715 (primary)
- Background: #ffffff (neutral/surface)
- Card: #faf8f5 (components.card.backgroundColor)
- Accent: #1be39b (secondary)
- Strong accent: #0c8c5e (tertiary)

1) Hero with quiet serif title
- Container on #ffffff with xl (72px) top/bottom padding.
- H1: "Pricing on your terms" in Arizona Flare, 44px, line-height 1.09, letter-spacing -0.018em, color #121715.
- Subcopy: Inter 16px/1.5, color #121715.

2) Three-card pricing grid
- Grid gap lg (32px); each card uses background #faf8f5, text #000000, radius 6px, padding 16px.
- Card title in Inter 21px; price in Inter 34px; features in Inter 16px/1.5.
- Primary button per card: 42px height, padding 12px 14px, radius 4px, background #08090a, text #ffffff.

3) Feature comparison table
- Three columns with headers in Inter 21px and cells in Inter 16px/1.5.
- Row padding: vertical 20px, horizontal 12px. Use minimal dividers; no shadows.
- Use secondary #1be39b for key availability ticks; keep the rest in #121715.

4) Logo wall and metrics strip
- Logo tiles reuse card style: #faf8f5 background, 6px radius, md (20px) internal padding, lg (32px) grid gap.
- Metrics items: number in Inter 27px, label in Inter 16px/1.5. Keep color #121715; accent small highlights with #1be39b.

## Similar Brands

- Stripe — Minimal chroma, disciplined type scale, and proof-driven sections; Mintlify is calmer with a serif H1 and warmer card tints.
- Vercel — Sparse palette, Inter-first typography, sharp controls; Mintlify adds ivory cards and a serif headline for brand character.
- Notion — Monochrome UI and clean tables; Mintlify is more traditional SaaS with CTAs and pricing tiers but shares the restraint.
- ReadMe — Developer-focused pricing and feature matrices; Mintlify is more minimal and uses subtler accent color.

More like this

Browse Software →
pallyy.com
Pallyy Marketing
Pallyy
Plan, approve, schedule, and publish on one simple social calendar.
Homepage · 30 minutes ago
pallyy.com
Pallyy Pricing Marketing
Pallyy Pricing
A tidy three-column layout makes comparison easy, with the “Agency” tier clearly emphasized through a blue card, primary button, and “Recommended” badge.…
Pricing · 30 minutes ago
kagaz.app
Kagaz Developer Tools
Kagaz
Invoice generator and API that creates beautiful invoices fast.
Homepage · 12 hours ago
polymer.co
Polymer HR & Recruiting
Polymer
Attract and hire great people with a powerful ATS and job board
Homepage · 14 hours ago