---
name: Resend
description: "Resend's design is worth including as a masterclass in high-end developer tool aesthetics, blending premium editorial typography with a stark, functional dark-mode interface."
version: alpha

colors:
  background: "#000000"
  primary: "#F0F0F0"
  secondary: "#A1A1A1"
  tertiary: "#44FFA4"
  neutral: "#70757E"
  bg-quiet: "#141517"
  line: "rgba(217, 237, 254, 0.15)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 76.8px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-2.8px"

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

Modern email infrastructure for developers.

*A black monolith or a precision tool built for engineers.*

## Colors

High-contrast monochrome with a single neon accent to signal modernity and technical precision.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#F0F0F0`)** — uses `ink` token
- **Secondary text (`#A1A1A1`)** — uses `ink-soft` token
- **Accent (`#44FFA4`)** — uses `accent` token
- **Muted (`#70757E`)** — uses `muted` token
- **Borders (`rgba(217, 237, 254, 0.15)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** grotesque-sans
- **Mono:** monospace

- Headlines use a refined transitional-serif with tight tracking.
- Body and UI text use a neutral grotesque-sans.
- Code examples use a dedicated monospace font.

## Layout

Full-width dark hero with left-aligned text and a floating 3D object on the right.

*Rhythm:* Standard 4px base with generous padding in navigation and hero sections.

## Elevation & Depth

- rgba(176, 199, 217, 0.145) 0px 0px 0px 1px
- rgba(0, 0, 0, 0.1) 0px 1px 3px 0px
- Borders: Subtle 1px borders used sparingly for separation and code block outlines.

## Shapes

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

## Components

- **button:** Solid white text on dark backgrounds with subtle borders; pill-shaped 'Get Started' call-to-action.
- **card:** Dark code editor window with colored dots and syntax highlighting.
- **chip:** Outlines pill tags with subtle border and chevron.
- **input:** Dark input fields with subtle borders, consistent with the developer tool aesthetic.
- **hero:** Large serif headline, sub-copy, and a prominent 3D cube visual.

## Do's and Don'ts

**Don't:**
- Don't use bright, multi-colored backgrounds — screenshot shows a predominantly black and dark gray environment.
- Don't use playful or rounded sans-serif fonts for headlines — screenshot shows a refined transitional-serif for display.
- Don't use excessive drop shadows on containers — screenshot shows mostly flat surfaces with subtle 1px borders.
- Don't use a dense, text-heavy layout — screenshot shows significant whitespace and a focused hero message.
- Don't use low-contrast text — screenshot shows high-contrast white and light gray text against a dark background.
- Don't use a wide variety of accent colors — screenshot shows a single, restrained neon green accent for specific highlights.

---

## System Prompt (paste into AI agent)

```
Resend is a premium developer tool for email infrastructure, positioned as a high-end, reliable service for engineers. The visual identity is built on a stark, sophisticated dark mode palette with a primary background of #000000 and ink at #F0F0F0. Typography contrasts a refined transitional-serif (display) with a neutral grotesque-sans (body) and monospace (code). Key colors include #A1A1A1 for secondary text and #44FFA4 as a rare, high-chroma accent. Critical donts: avoid bright or multi-colored backgrounds; don't use playful fonts for headlines; don't clutter the layout with excessive shadows or elements; don't use low-contrast text; avoid a wide variety of accent colors; and don't use dense, text-heavy paragraphs in primary sections.
```