Mintlify
Design system da Mintlify, plataforma de documentação para desenvolvedores. Verde brand que muda entre temas (#0c8c5e light / #18e299 dark), tipografia Inter + ABC Arizona Flare, filosofia warm off-white.
Referência Rápida
Cores
Tipografia
Light/Dark
Light + Dark
Filosofia de Design
Sistema de design com green brand que muda de matiz entre temas, superfícies warm off-white, tipografia Inter para UI e ABC Arizona Flare para display editorial.
Preview Visual
Landing page fictícia inspirada neste design system — não afiliada à marca.
DESIGN.md
# 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)
Extraído de: https://mintlify.com/design.md
Extraído em: 18/07/2025
Este site não é afiliado, endossado ou patrocinado por nenhuma das marcas listadas. Os tokens de design apresentados foram extraídos exclusivamente de informações publicamente acessíveis (CSS visível em navegadores). Nenhum conteúdo protegido por direitos autorais é reproduzido. Se você é titular de uma marca e deseja solicitar remoção, consulte nossa Política de Privacidade — seção 9.