# 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

| Role | Value | Usage |
|------|-------|-------|
| Popup Background | `#f3f7f6` | Code tooltips, popup surfaces |
| Brand Green (annotation) | `rgba(27, 166, 115, 0.125)` | Code annotation highlights |
| Border | `#dbdfde` | Structural borders |
| Shadow (popup) | `rgba(0,0,0,0.08)` | Code tooltip shadows |

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

| Context | Approach |
|---------|----------|
| Headings | Tailwind default scale (likely Inter or similar) |
| Code blocks | Monospace, inherits font setting |
| Annotations | Small, muted, green-tinted |
| Body | 16px, high legibility |

## 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*