name: mintlify-design
version: alpha
description: >
  Mintlify is a light, always-white documentation platform with a single brand
  voltage — a fresh "mint" green — and a strict black/white action system. Type is
  Inter throughout, headings at 600 with tight negative tracking; section eyebrows
  are set in uppercase monospace green, a deliberate nod to code and docs. Primary
  actions are solid black pills; the mint green is rationed to the logo, links,
  eyebrow labels, the "NEW" badge, and illustration accents. The hero leans on a
  soft blue→teal→green gradient with a hand-painted cloud.
colors:
  # Brand
  primary: '#18BE66'        # Mintlify "mint" green — logo, links, accents
  primary-strong: '#16A34A' # deeper green for text-on-white legibility
  on-primary: '#FFFFFF'
  # Action (the black/white system)
  action: '#18181B'         # primary CTA pill ("Get started for free")
  on-action: '#FFFFFF'
  # Surface
  surface: '#FFFFFF'        # canvas
  surface-secondary: '#F5F6F7' # alternating section wells
  surface-tinted: '#ECFBF2' # faint mint tint behind illustrations / icon chips
  # Text
  on-surface: '#0A0A0A'     # headings, primary ink
  on-surface-secondary: '#52525B' # body copy, descriptions
  on-surface-tertiary: '#A1A1AA'  # eyebrow grey, footer headers, meta
  # Hairlines
  hairline: '#E4E4E7'       # card borders, footer rules, dividers
  # Semantic
  success: '#18BE66'        # "All systems normal" dot reuses the brand mint
typography:
  display:
    fontFamily: 'Inter, "Inter Fallback", system-ui, -apple-system, sans-serif'
    fontSize: 48px
    fontWeight: 600
    lineHeight: 52px
    letterSpacing: -0.96px
  headline-lg:
    fontFamily: 'Inter, "Inter Fallback", sans-serif'
    fontSize: 42px # observed h1 "Built for the intelligence age"
    fontWeight: 600
    lineHeight: 48px
    letterSpacing: -0.85px
  headline-md:
    fontFamily: 'Inter, "Inter Fallback", sans-serif'
    fontSize: 24px
    fontWeight: 500
    lineHeight: 31px
    letterSpacing: -0.24px
  body-lg:
    fontFamily: 'Inter, "Inter Fallback", sans-serif'
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: normal
  body-md:
    fontFamily: 'Inter, "Inter Fallback", sans-serif'
    fontSize: 15px
    fontWeight: 400
    lineHeight: 22px
    letterSpacing: normal
  label:
    fontFamily: 'Inter, "Inter Fallback", sans-serif'
    fontSize: 15px
    fontWeight: 500
    lineHeight: 22px
    letterSpacing: normal
  eyebrow-mono:
    fontFamily: '"Geist Mono", "JetBrains Mono", ui-monospace, monospace'
    fontSize: 13px # "LLMS.TXT & MCP", "AGENT", "ASSISTANT"
    fontWeight: 500
    lineHeight: 16px
    letterSpacing: 0.5px # uppercase
rounded:
  sm: 8px    # inputs, small chips
  md: 12px   # icon chips, cards
  lg: 16px   # large feature cards
  full: 9999px # CTA pills, badges, search bar
spacing:
  # base unit = 8px
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  xxxl: 80px
components:
  button-primary:
    background: '{colors.action}'
    textColor: '{colors.on-action}'
    typography: '{typography.label}'
    rounded: '{rounded.full}'
    padding: '12px 24px'
  button-secondary:
    background: '{colors.surface}'
    textColor: '{colors.on-surface}'
    border: '1px solid {colors.hairline}'
    typography: '{typography.label}'
    rounded: '{rounded.full}'
    padding: '12px 24px'
  badge-new:
    background: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.eyebrow-mono}'
    rounded: '{rounded.full}'
    padding: '4px 10px'
  feature-card:
    background: '{colors.surface}'
    border: '1px solid {colors.hairline}'
    rounded: '{rounded.lg}'
    padding: '32px'
    eyebrowColor: '{colors.primary-strong}'
  icon-chip:
    background: '{colors.surface-tinted}'
    iconColor: '{colors.primary}'
    rounded: '{rounded.md}'
  link:
    color: '{colors.primary-strong}'
    decoration: 'none' # underline appears on hover
  status-pill:
    background: '{colors.surface-secondary}'
    dotColor: '{colors.success}'
    rounded: '{rounded.full}'
motion:
  easing-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  duration-fast: 150ms
  duration-standard: 250ms
icons:
  library: lucide # outline set; Mintlify ships its own doc glyphs
  style: outline
  stroke: 1.75px
  sizes: { sm: 16px, md: 20px, lg: 24px }
  colorRule: 'mint green inside tinted chips; otherwise inherit on-surface ink'

Mintlify

Design spec — version alpha. Surfaces studied via Playwright: homepage (logged-out) — computed styles + representative element probes. Note: live computed colors resolved through lab()/oklch; brand hexes below are reconciled from rendered screenshots and Mintlify's known mint identity.

Overview

Mintlify is an always-white documentation platform ({colors.surface} #FFFFFF) with calm, developer-friendly polish. The system runs on a single brand voltage — a fresh mint green {colors.primary} #18BE66 — paired with a strict black/white action system: every primary CTA is a solid black pill {colors.action} #18181B, every secondary is white with a hairline. Mint is rationed with discipline: it appears in the leaf logo, links, the uppercase monospace eyebrow labels (LLMS.TXT & MCP, AGENT, ASSISTANT), the "NEW" badge, illustration accents, and the "All systems normal" status dot — and essentially nowhere else.

Typography is Inter throughout. Headlines are heavy and tightly tracked (600 weight with ~ -0.02em negative letter-spacing), giving big statements like "Built for the intelligence age" a confident, modern density. The deliberate twist is the monospace eyebrow: small uppercase green mono labels above each section, a quiet nod to code, terminals, and the docs Mintlify exists to publish. The hero uses a soft blue→teal→green gradient behind a hand-painted cloud, the one place the palette warms up. Shapes are friendly: 8–16px cards, fully-pill CTAs and badges.

Colors

Brand. Mint {colors.primary} #18BE66 is the identity. For green text on white that needs more contrast, step to {colors.primary-strong} #16A34A (used on links and feature-card eyebrows). Scarcity rule: mint is reserved for logo, links, mono eyebrows, the NEW badge, illustration fills, and the status dot — never for body text, borders, or primary buttons.

Action system. The primary CTA is a near-black pill {colors.action} #18181B with white label; the secondary is white with a 1px {colors.hairline} outline. This black/white pairing — not green buttons — carries all primary interaction, which keeps the mint precious.

Surfaces. Canvas {colors.surface} #FFFFFF; alternating section wells {colors.surface-secondary} #F5F6F7; a faint {colors.surface-tinted} #ECFBF2 sits behind illustrations and icon chips.

Text. Headings/ink {colors.on-surface} #0A0A0A; body {colors.on-surface-secondary} #52525B; eyebrow grey, footer column headers, and meta {colors.on-surface-tertiary} #A1A1AA.

Hairlines & semantic. Card borders, footer rules, dividers use {colors.hairline} #E4E4E7. Success reuses the brand mint {colors.success} #18BE66 (the status dot) — Mintlify doesn't introduce a separate green.

Typography

Family: Inter (with Inter Fallback), one family for everything except the mono eyebrow. Weight strategy: 600 for display/headlines (with tight negative tracking), 500 for headline-md and labels, 400 for body. The eyebrow is a separate role: uppercase monospace (Geist Mono / JetBrains Mono substitute), 13px, in {colors.primary-strong}.

Token	Size	Weight	Tracking	Usage
display	48px	600	-0.02em	Hero ("The Intelligent Knowledge Platform")
headline-lg	42px	600	-0.02em	Section headers ("Built for the intelligence age")
headline-md	24px	500	-0.01em	Card titles
body-lg	18px	400	normal	Lead paragraphs
body-md	15px	400	normal	Default body, descriptions
label	15px	500	normal	Buttons, nav
eyebrow-mono	13px	500	+0.04em	Uppercase section eyebrows (green)

Layout

Base unit 8px, with generous xxxl 80px section gaps. Content sits in a centered max-width (~1100px) column. The home alternates white and #F5F6F7 sections; feature areas use 2-up bordered cards with a mono eyebrow → headline → description rhythm. Logo walls (Anthropic, Coinbase, Microsoft, Perplexity…) and a customer-story carousel anchor social proof. Whitespace is abundant and the vertical rhythm is loose.

Elevation & Depth

Mostly flat with hairline borders doing the structural work. Feature cards are white with a 1px #E4E4E7 edge and no resting shadow; soft shadows appear only on floating UI mock-ups inside illustrations and on hover. No heavy material elevation, no neumorphism.

Shapes

Radius vocabulary: {rounded.sm} 8px (inputs, chips), {rounded.md} 12px (icon chips, cards), {rounded.lg} 16px (large feature cards), {rounded.full} (CTA pills, the NEW badge, search bar, status pill). Friendly-but-crisp — clearly rounded, never blobby.

Components

• button-primary — black pill #18181B, white 500 label, full radius, ~12px 24px padding ("Get started for free").
• button-secondary — white pill, 1px hairline, ink label ("Get a demo").
• badge-new — mint pill, white mono text ("NEW").
• feature-card — white, 1px hairline, 16px radius, with a green mono eyebrow over an ink headline.
• icon-chip — rounded square on faint #ECFBF2 mint tint, mint outline glyph.
• status-pill — grey #F5F6F7 pill with a mint dot ("All systems normal").
• link — #16A34A, underline on hover.

Motion

Restrained: {motion.duration-fast} 150ms hovers, {motion.duration-standard} 250ms transitions on a standard ease. Illustration mock-ups animate subtly (checkmarks completing, cursors moving) but the page itself avoids parallax and long scroll reveals.

Iconography

Outline glyphs (Lucide as substitute for Mintlify's own doc icon set), ~1.75px stroke, 16/20/24px. Inside tinted chips they take mint {colors.primary}; elsewhere they inherit {colors.on-surface} ink. Never multi-tinted.

Do's and Don'ts

• Do keep the canvas white — Mintlify is light-only; never ship a dark-background marketing variant.
• Do carry primary actions on the black pill, not on green — reserve mint for logo, links, eyebrows, NEW badge, and status.
• Do set section eyebrows in uppercase green monospace.
• Do track headlines tight (~ -0.02em) at weight 600.
• Don't use mint for large fills, body text, or primary buttons.
• Don't add drop shadows to feature cards — use hairline borders.
• Don't introduce a second accent hue; the system is one mint plus black/white.

Known Gaps

• Inter family, 600 headline weight, negative tracking, black pill CTAs, hairline-bordered cards, and the mono green eyebrow were observed directly. Exact hexes for primary #18BE66, success, and the surface tints are reconciled from rendered screenshots (the page serves colors in lab()/oklch) and Mintlify's known mint identity — treat as authoritative-but-verify.
• Docs-app surfaces (the actual generated documentation theme, with its light/dark toggle) were not probed; tokens describe the marketing site.