---
name: Mintlify
description: "This site is worth including as a prime example of modern SaaS documentation design, blending professional aesthetics with developer-friendly tooling."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  tertiary: "#0D2F2F"
  neutral: "#0D2F2F"
  bg-soft: "#F7F7F7"
  line: "rgba(13, 47, 47, 0.5)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.8px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  label:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.5
    fontWeight: 500
    letterSpacing: "0.6px"

rounded:
  sm: 4px
  md: 8px
  lg: 16px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A developer-focused SaaS platform for AI-powered documentation with a clean, professional aesthetic and illustrated hero.

*A clean, modern SaaS interface for developer documentation with an illustrated, stylized hero background.*

## Colors

Clean, high-contrast palette with a deep teal-green accent against stark white and black.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#0D2F2F`)** — uses `accent` token
- **Muted (`#0D2F2F`)** — uses `muted` token
- **Borders (`rgba(13, 47, 47, 0.5)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Display type uses tight tracking (-0.8px) for large headlines.
- Labels and tags use uppercase with wider tracking (0.6px) for emphasis.
- Monospace font is reserved for code snippets or technical references.

## Layout

Standard 12-column grid with centered content containers.

*Rhythm:* Consistent 4px grid with generous padding for section separation.

## Elevation & Depth

- 0px 2px 4px 0px rgba(13, 47, 47, 0.03)
- 0px 2px 4px 0px rgba(255, 255, 255, 0.05)
- Borders: 1px solid rgba(13, 47, 47, 0.5)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 16px
- `pill`: 999px

## Components

- **button:** Clean, rounded pill-shaped buttons with solid backgrounds or outlines.
- **card:** Lightly shadowed cards with rounded corners, often containing illustrations.
- **chip:** Small, rounded badges for labels like 'NEW' or category tags.
- **input:** Rounded input fields with subtle borders or transparent backgrounds over images.
- **hero:** Full-width section with a stylized landscape illustration background and centered text.

## Do's and Don'ts

**Don't:**
- Don't use harsh, bright neon colors — screenshot shows a palette of deep teal, white, and black.
- Don't use heavy, decorative serif fonts — screenshot shows clean, modern sans-serif typography.
- Don't create cluttered layouts with many competing elements — screenshot shows ample whitespace and clear hierarchy.
- Don't use sharp, square corners on all elements — screenshot shows rounded corners on cards, buttons, and inputs.
- Don't use complex, realistic photography for all backgrounds — screenshot shows stylized, illustrative backgrounds.
- Don't use a dark mode as the primary interface — screenshot shows a predominantly light interface with a dark hero section.

---

## System Prompt (paste into AI agent)

```
Design a clean, professional developer-focused SaaS interface. Use a high-contrast palette of stark white (#FFFFFF), black (#000000), and a deep teal-green accent (#0D2F2F). Typography should be modern humanist-sans-serif with tight tracking for large headlines and uppercase labels with wider tracking. Ensure ample whitespace and clear visual hierarchy. Don't use harsh neon colors, heavy decorative serifs, cluttered layouts, sharp corners on all elements, or realistic photography for backgrounds.
```