Resend
Design system da Resend, plataforma de email para desenvolvedores. Estética dark minimal com canvas preto, tipografia Inter, filosofia developer-focused com foco em simplicidade e performance.
Referência Rápida
Cores
Tipografia
Light/Dark
Dark
Filosofia de Design
Estética dark minimal com canvas preto (#000000), tipografia Inter, filosofia developer-focused. Simplicidade radical e foco em performance.
Preview Visual
Landing page fictícia inspirada neste design system — não afiliada à marca.
DESIGN.md
# Resend Design
> Resend is the email API for developers. The brand is minimal, monochromatic, and developer-focused.
## Overview
Resend provides email infrastructure for developers. The design emphasizes simplicity, clarity, and technical precision.
## Brand Colors
| Token | Hex | Usage |
|-------|-----|-------|
| Primary | `#000000` | Text, buttons, brand |
| Background Dark | `#000000` | Dark surfaces |
| Background Light | `#ffffff` | Light surfaces |
| Accent | `#00DC82` | Success highlights |
### Neutrals
| Token | Hex |
|-------|-----|
| gray-50 | `#fafafa` |
| gray-100 | `#f4f4f5` |
| gray-400 | `#a1a1aa` |
| gray-800 | `#27272a` |
| gray-900 | `#18181b` |
## Typography
| Role | Family |
|------|--------|
| Primary Sans | Inter |
| Monospace | Geist Mono |
| Role | Size | Weight |
|------|------|--------|
| H1 | 36px | 600 |
| H2 | 30px | 600 |
| Body | 16px | 400 |
| Code | 14px | 400 |
## Spacing
4px base: 1=4px, 2=8px, 4=16px, 8=32px
## Design Philosophy
- **Minimal**: Strip away decoration
- **Dark-first**: Primary experience is dark mode
- **Developer-centric**: Clear, direct communication
- **Monochromatic**: Black/white with minimal accents
## Do's and Don'ts
### Do's
- Keep interfaces minimal
- Use black/white as primary
- Maintain high contrast
### Don'ts
- Don't add unnecessary color
- Don't use decorative elements
## Resources
- [resend.com](https://resend.com)
- [resend.com/docs](https://resend.com/docs)
Extraído de: https://resend.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.