Mintlify

Overview

Mintlify is an agent-first knowledge infrastructure platform that transforms how enterprises, startups, and AI systems access and maintain documentation. The design system embodies "Intelligent Minimalism"—a philosophy that prioritizes clarity, composability, and agent-readability through a clean, light-dominant aesthetic punctuated by vibrant accent colors (emerald green #0c8c5e for primary actions, cyan #18e299 for highlights, and electric blue #2992e3 for secondary interactions). The interface feels purposeful and data-forward, avoiding decorative flourishes while maintaining visual warmth through generous whitespace (40px–64px section gaps) and a carefully calibrated color hierarchy that guides both human and machine attention.

The brand voice is authoritative yet approachable: precise, action-oriented, and free of hype. Mintlify speaks to builders—engineers, product managers, and AI systems—with concrete language and clear next steps. Example sentence: "Deploy your first docs site in minutes with our step-by-step guide." The typography system pairs the distinctive Arizona Flare serif for headlines (evoking sophistication and trust) with Inter for body copy (ensuring legibility at all scales and screen densities). Every interaction is designed for speed: buttons respond in 150ms, inputs focus with a subtle 3px teal ring, and cards elevate on hover with a predictable shadow progression.

Colors

The color system is built on a light-first foundation (#ffffff surface, #f7f7f7 dim) with a carefully chosen accent palette that signals agency and forward motion. Primary (#0c8c5e, a rich emerald) is deployed on all call-to-action buttons, active states, and key interactive elements—it's the color users click. The primary container (#18e299, a bright cyan) provides a softer, secondary-action treatment and appears in badges and highlights. Secondary (#2992e3, electric blue) supports tertiary actions, links, and data visualization. Tertiary (#d87cff, vibrant magenta) is reserved for accent highlights and premium features. Error (#fb2c36, a bold red) signals destructive actions and validation failures with high contrast against the light background.

The surface stack progresses from #ffffff

Typography

The type system balances personality with legibility through a two-family approach: Arizona Flare (a distinctive serif with 400 weight) for display and headline levels, and Inter (a neutral sans-serif with variable weights 400–600) for body, label, and UI text. Display (60px, 400 weight, -0.02em tracking) commands attention on hero sections and major announcements, while headline-lg (48px, 400 weight) and headline-md (32px, 600 weight) establish clear visual hierarchy for section breaks. Body text uses Inter at 16px (400 weight, 24px line-height) for comfortable reading at arm's length; body-lg (18px) appears in feature callouts and prominent copy. Labels (14px, 500 weight, 0.01em tracking) and label-sm (12px, 600 weight, 0.05em tracking) provide crisp UI text for buttons, badges, and form

Layout

The page layout follows a 12-column grid with a 1280px max-width container, centered with symmetric gutters (24px on desktop, 16px on tablet). Section spacing uses the semantic scale: 40px (lg) for major section breaks, 24px (md) for subsection separation, and 12px (sm) for component-level spacing. The hero section occupies the full viewport height with a left-aligned text column (max 600px) and a right-side decorative gradient illustration (animated lines in green and cyan, 40% opacity). Cards and content blocks use 24px internal padding (md) with 16px gaps between items in lists. The container-max-width of 1280px ensures readability on ultra-wide displays while maintaining focus on content. Whitespace is treated as a first-class design element: negative space around CTAs (40px above, 24p

Elevation & Depth

Depth is conveyed through a three-tier shadow system that avoids heavy drop-shadows in favor of subtle, directional lighting. Level 1 (Base cards, input fields): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), creating a barely-perceptible lift from the surface. Level 2 (Hovered cards, modals): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), signaling interactive elevation and focus. Level 3 (Floating panels, dropdowns, overlays): box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), establishing clear separation from the background. All shadow transitions use 150ms cubic-bezier(0.4, 0, 0.2, 1) easing for smooth

Shapes

The shape philosophy is "Functional Precision"—rounded corners are applied strategically to soften hard edges without introducing unnecessary ornamentation. Buttons and small interactive elements use 4px radius (sm), creating a subtle, modern appearance that feels contemporary without being trendy. Cards and larger containers use 10px radius (md), balancing approachability with professional restraint. Input fields and form elements use 6px radius (DEFAULT), sitting between buttons and cards to signal their intermediate role in the hierarchy. Modals and floating panels use 16px radius (lg), emp

Components

Action Elements Buttons are the primary interaction mechanism and come in three variants: primary (solid emerald #0c8c5e background, white text, 44px height, 12px vertical / 24px horizontal padding), secondary (transparent background, emerald text, 1px outline at #c2c7ce, 44px height), and ghost (transparent, dark text, no border). All buttons use Inter label-md (14px, 500 weight) and transition background-color in 150ms cubic-bezier(0.4, 0, 0.2, 1) on hover. Primary buttons darken to #0c6b47 (primary-fixed-dim) on hover; secondary buttons fill with #e5e7eb (surface-container-high); ghost buttons fill with #eeeff2 (surface-container). Focus states add a 2px outline at the primary color, offset 2px from the button edge. Disabled buttons reduce opacity to 50% and set cursor: not-allowed.

Do's and Don'ts

**Do**

• Do use primary (#0c8c5e) exclusively for call-to-action buttons, active states, and key interactive elements—it's the brand's signature accent and must remain reserved for user-initiated actions.
• Do maintain 40px–64px vertical spacing between major sections and 24px between subsections to create visual breathing room and reduce cognitive load for both human and AI readers.
• Do apply the Arizona Flare serif typeface only to display and headline levels (48px and above); never use it for body text or UI labels, as it sacrifices legibility at small sizes.
• Do use the three-tier shadow system (0 1px 2px, 0 4px 12px, 0 8px 32px) to convey depth; never use shadows heavier than 0 8px 32px rgba(0, 0, 0, 0.12) or drop-shadows with blur > 32px.
• Do apply 150ms cubic-bezier(0.4, 0, 0.2, 1) easing to all transitions (hover, focus, state changes) to signal responsiveness and maintain a cohesive interaction feel.

**Don't**

• Don't use secondary (#2992e3) or tertiary (#d87cff) colors on primary CTAs; reserve them for supporting actions, links, and data visualization only.
• Don't apply border-radius larger than 20px (xl) to any component; the maximum is 9999px (full) for pills and badges only.
• Don't use shadows on buttons; instead, rely on background-color changes and 150ms transitions to signal interactivity.
• Don't set line-height below 1.25 for any text; maintain 1.5 for body (24px at 16px base) and 1.25 for labels (20px at 14px base) to ensure accessibility and scannability.
• Don't mix Inter and Arizona Flare within a single line of text; use Arizona Flare for headlines only and Inter for all supporting copy, labels, and UI text.