# Mintlify Design

> Mintlify builds documentation that drives growth.

## Overview

Mintlify helps companies create beautiful documentation. The design system emphasizes warmth, clarity, and developer-friendliness.

## Brand Colors

| Token | Light | Dark | Usage |
|-------|-------|------|-------|
| Primary | `#0c8c5e` | `#18e299` | CTAs, links |
| Surface | `#ffffff` | `#0d0d0f` | Backgrounds |
| Text | `#0d0d0f` | `#fafafa` | Body text |
| Border | `#e4e4e7` | `#27272a` | Dividers |

The primary green shifts hue between modes: deeper forest-like in light, brighter in dark.

## Typography

| Role | Family |
|------|--------|
| Primary Sans | Inter |
| Display | ABC Arizona Flare |
| Monospace | Fira Code |

### Scale

| Role | Size | Weight |
|------|------|--------|
| Display | 48px | 500 |
| H1 | 36px | 600 |
| H2 | 30px | 600 |
| Body | 16px | 400 |

## Spacing

8px base: xs=4px, sm=8px, md=16px, lg=24px, xl=32px

## Components

- **Primary Button**: Green background, white text
- **Cards**: 12px radius, subtle shadow on hover
- **Code Blocks**: Syntax highlighting, copy button

## Do's and Don'ts

### Do's
- Use green sparingly for CTAs
- Maintain generous whitespace
- Ensure 4.5:1 contrast

### Don'ts
- Don't use green for body text
- Don't use pure black in dark mode

## Resources

- [mintlify.com](https://mintlify.com)

<!-- Source: https://designmd.app.br/brands/mintlify · designmd.app -->