mintlify.com — Design System

1. Visual Theme & Atmosphere

Mintlify presents developer documentation as a first-class design product. Built on Astro with Tailwind CSS, the system is clean and functional without feeling cold. The brand green (rgba(27,166,115,0.125)) appears only as a translucent tag annotation — green signals semantics (code, type hints) rather than decoration. The surface hierarchy is meticulous: multiple shadow variants ensure every element knows its place. The overall character is precise, trustworthy, and readable at code density.

2. Color Palette & Roles

The color system serves function, not expression. Green appears only at opacity — chosen for accessibility in code contexts.

3. Typography Rules

• Stack: Astro v5 + Tailwind — type scale follows Tailwind defaults
• Code font: --twoslash-code-font: inherit — code blocks inherit context
• Docs tag style: --twoslash-docs-tag-style — distinct visual treatment
• No aggressive decorative typography — clarity over character

4. Component Stylings

• Buttons: 3–4px radius — standard small from detected token set
• Pill elements: 9999px radius — tags and badges
• Code tooltips: #f3f7f6 background, rgba(0,0,0,0.08) shadow — soft popups
• Cards: rgba(0,0,0,0.05) 0px 1px 2px — barely elevated from background
• Circle elements: 50% radius — avatar and icon containers

5. Layout Principles

• Framework: Astro with Tailwind CSS — component-based, utility-driven
• Sidebar + content: Classic documentation two-column layout
• Spacing: Tailwind 4px base unit
• Max width: Tailwind prose widths for readable line lengths
• Breakpoints: 480/640/768/800/1024/1280/1536/1792px

6. Depth & Elevation

Shadow tiers:

• Flat: No shadow — code blocks, body sections
• XS: rgba(0,0,0,0.05) 0px 1px 2px — barely lifted (inputs, inline)
• MD: rgba(0,0,0,0.1) 0px 10px 15px -3px — cards, popovers
• Popup: rgba(0,0,0,0.08) 0px 1px 4px — floating code tooltips

7. Do’s and Don’ts

Do:

• Use the green only at reduced opacity for semantic annotations
• Maintain the shadow hierarchy — each tier signals elevation
• Keep #f3f7f6 for code popup backgrounds
• Preserve functional, scannable typography in documentation contexts

Don’t:

• Use the green at full opacity for decoration
• Skip the shadow hierarchy — flat-everything breaks elevation signals
• Introduce warm tones conflicting with the cool-green documentation feel

8. Responsive Behavior

• Tailwind responsive utilities throughout
• Sidebar collapses to mobile drawer
• Full breakpoint ladder: 480, 640, 768, 1024, 1280, 1536, 1792
• Code blocks scroll horizontally on narrow viewports

9. Agent Prompt Guide

“Design in the style of Mintlify: clean documentation aesthetic, #f3f7f6 cool-mint surface, translucent green rgba(27,166,115,0.125) for code annotations, Tailwind CSS utilities, layered shadow system from XS to MD, Astro component architecture.”

Quick reference:

• Surface: #f3f7f6
• Brand green: rgba(27, 166, 115, 0.125)
• Border: #dbdfde
• Shadow popup: rgba(0,0,0,0.08) 0px 1px 4px
• Stack: Astro v5 + Tailwind CSS

Generated by Sparkbites — extracted from live CSS analysis