# Resend — Design System
> Email infrastructure for developers
- **Canonical:** https://uiuxskills.com/library/resend-2
- **Source:** https://resend.com/home
- **Category:** Developer Tools & IDEs
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-06-09T23:16:43.338Z

---

---
version: alpha
name: Resend
description: Email infrastructure for developers
tone: >-
  Professional, technical, direct, and confident. The voice is that of an engineer speaking to other
  engineers, focusing on utility and performance.
color-scheme: light
colors:
  primary: "#000000"
  surface: "#FFFFFF"
  surface-dim: "#F9F9F9"
  surface-container: "#F0F0F0"
  on-surface: "#000000"
  on-surface-variant: "#737373"
  outline: "#E5E5E5"
  accent: "#9B7CFF"
  error: "#FF4D4D"
  success: "#00C853"
typography:
  display-lg:
    fontFamily: "-apple-system, sans-serif"
    fontSize: 3rem
    fontWeight: 600
  display-md:
    fontFamily: "-apple-system, sans-serif"
    fontSize: 2.25rem
    fontWeight: 600
  headline-lg:
    fontFamily: "-apple-system, sans-serif"
    fontSize: 1.875rem
    fontWeight: 600
  headline-md:
    fontFamily: "-apple-system, sans-serif"
    fontSize: 1.5rem
    fontWeight: 600
  headline-sm:
    fontFamily: "-apple-system, sans-serif"
    fontSize: 1.25rem
    fontWeight: 500
  body-md:
    fontFamily: "-apple-system, sans-serif"
    fontSize: 1rem
    fontWeight: 400
  body-sm:
    fontFamily: "-apple-system, sans-serif"
    fontSize: 0.875rem
    fontWeight: 400
  label-md:
    fontFamily: "-apple-system, sans-serif"
    fontSize: 0.875rem
    fontWeight: 500
  label-sm:
    fontFamily: "-apple-system, sans-serif"
    fontSize: 0.75rem
    fontWeight: 500
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#FFFFFF"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#333333"
    textColor: "#FFFFFF"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.accent}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-success:
    backgroundColor: "#E6F4EA"
    textColor: "{colors.success}"
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  card-dim:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-on-surface:
    backgroundColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-on-surface-variant:
    backgroundColor: "{colors.on-surface-variant}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.05)
  md: 0 4px 6px -1px rgba(0,0,0,0.1)
  lg: 0 10px 15px -3px rgba(0,0,0,0.1)
---

## Overview

Resend provides a modern, developer-centric email platform. The visual identity is stark, minimalist, and high-contrast, utilizing a monochromatic palette with sharp, precise typography to emphasize clarity and technical reliability. The design language is engineered for utility, ensuring that the interface never distracts from the core task of sending and managing emails.

## Colors

The color strategy relies on a strict monochromatic foundation to maintain a clean, professional aesthetic, with specific accent colors used sparingly to guide user attention.

*   Primary (`{colors.primary}`): The core brand color used for text, primary buttons, and active UI elements.
*   Surface (`{colors.surface}`): The primary background color for the application and marketing site.
*   Surface Dim (inferred) (`{colors.surface-dim}`): A subtle off-white used for secondary sections to create depth without shadows.
*   Surface Container (inferred) (`{colors.surface-container}`): Used for UI blocks and card backgrounds.
*   On Surface Variant (inferred) (`{colors.on-surface-variant}`): Secondary text color for labels and descriptive metadata.
*   Outline (`{colors.outline}`): The standard border color for inputs, dividers, and card containers.
*   Accent (`{colors.accent}`): Used exclusively for highlights and specific brand moments.
*   Error (inferred) (`{colors.error}`): Semantic color for destructive actions and validation errors.
*   Success (inferred) (`{colors.success}`): Semantic color for successful states and positive feedback.

## Typography

The typography system uses the system font stack to ensure fast loading and native readability across all devices. Hierarchy is established through font weight and size rather than color variation.

*   Display LG/MD (inferred): Used for hero headlines to establish immediate impact.
*   Headline LG/MD/SM (inferred): Used for section headers to create clear content grouping.
*   Body MD (inferred): The standard font size for all paragraph content.
*   Body SM: Secondary text for captions and descriptive details.
*   Label MD/SM: Used for button text, badges, and UI labels.

## Layout

The layout follows a container-based grid system with a max-width of 1200px, utilizing a 4px/8px base spacing rhythm. The page structure typically follows this order: nav, hero, features, code-demo, social-proof, and footer. The hero section utilizes a centered composition with primary and secondary CTAs, followed by a product interface visual. The design is mobile-first, with navigation collapsing into a menu on smaller screens and grid layouts stacking vertically.

## Elevation & Depth

Elevation is used sparingly, primarily to distinguish interactive cards from the background. The brand relies more on border strokes and color contrast than drop shadows to convey depth.

*   `elevation.sm`: Subtle lift for small UI elements.
*   `elevation.md`: Standard lift for card components.
*   `elevation.lg`: Used for modal or drawer overlays.

*Note: Elevation values were inferred from standard design patterns.*

## Shapes

The radius philosophy prioritizes consistency across component types. Smaller elements like inputs and buttons use tighter corners, while larger containers use more generous rounding to soften the stark monochromatic aesthetic.

The `{rounded.sm}` and `{rounded.md}` tokens are standard for interactive components, while `{rounded.lg}` and `{rounded.xl}` are reserved for larger containers. The `{rounded.full}` token is strictly for pill-shaped badges and specific UI indicators.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use `{colors.primary}` for primary actions and `{colors.surface}` with an `{colors.outline}` border for secondary actions. They are designed to be concise, using `{typography.label-md}` for clear, actionable labels.

### Card
Cards are the primary container for grouping content, utilizing `{rounded.md}` and a `{colors.outline}` border. They should be used to isolate features or data blocks from the main background.

### Input Field
Inputs use `{rounded.sm}` and a `{colors.outline}` border by default. On focus, the border should transition to `{colors.primary}` to provide clear feedback to the user.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Use `{colors.error}` for non-destructive actions. |
| Apply `{typography.body-md}` for all standard paragraphs. | Use `{typography.display-lg}` for body text. |
| Use `{rounded.md}` for all card components. | Mix `{rounded.full}` and `{rounded.sm}` on the same component. |
| Ensure all input fields have a `{colors.outline}` border. | Use drop shadows on flat text elements. |
| Use `{colors.accent}` sparingly for highlights only. | Use more than two font weights on a single page. |
| Maintain hierarchy with `{typography.headline-lg}`. | Use low-contrast color combinations for text. |
| Use `{colors.surface-container}` for card backgrounds. | Use high-elevation shadows for simple cards. |
| Apply `{typography.label-md}` for button text. | Use custom fonts that deviate from system defaults. |

## Content Style

CTA labels should use imperative verbs and remain concise, such as "Get started" or "Learn more." The tone is direct and benefit-focused, speaking to an engineering audience that values efficiency.

Copy density should be kept low, utilizing short paragraphs and frequent bullet points to ensure the content remains scannable. Avoid marketing fluff; focus on technical utility and performance results.

## Imagery & Icons

The imagery style is mixed, featuring high-quality product screenshots, clean UI mockups, and simple, monochromatic iconography. Photography is used sparingly, primarily for social proof through avatars. Icons should be minimal and match the stroke weight of the surrounding UI elements.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Resend, a minimal enterprise developer-tools brand. Match its direct, engineer-to-engineer tone — precise, utility-first, no decoration. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name (`{colors.primary}`, `{typography.body-md}`, `{rounded.md}`, `{spacing.lg}`) — never hardcode hex values, pixel sizes, or font weights.
2. Use only the component variants listed under `components:`. Do not invent new button styles, card types, or badge variants beyond what the spec defines.
3. Follow the Layout section for page structure (nav → hero → features → code-demo → social-proof → footer), container max-width of 1200px, and mobile-first stacking.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with a rule — e.g. using `{colors.error}` for a non-destructive action — surface the conflict explicitly before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook, tokens JSON) exists, those values supersede the spec.

## Output contract

**Must:**
- Use token names for all colors, typography, spacing, radius, and elevation.
- Render all interactive components (buttons, inputs, links) with their defined hover, focus, and disabled states per the `components:` block.
- Apply `{rounded.sm}` to inputs, `{rounded.md}` to cards, and `{rounded.full}` only to pill badges.
- Use `{typography.label-md}` for all button labels; keep CTA copy imperative and concise per Content Style.
- Use `{colors.accent}` sparingly — highlights and specific brand moments only.

**Must NOT:**
- Invent colors, font families, radii, or spacing values absent from the spec.
- Use generic utility defaults (e.g. `gray-500`, `rounded-md` as a hardcoded string) when a brand token exists.
- Add emoji, marketing filler, or decorative copy.
- Apply `elevation.md` or `elevation.lg` to flat text elements or simple cards.
- Rewrite page copy, rename navigation items, or alter information architecture as a side effect of token application.

## When in doubt
- If a required token isn't in the spec, ask the product team before inventing a value.
- For backgrounds without a clear role, default to `{colors.surface}`; for secondary sections use `{colors.surface-dim}`; for UI blocks use `{colors.surface-container}`.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px per the Layout narrative.
- Prefer composing existing components over introducing new ones.
- Inferred tokens are approximations — flag them if precision is critical for production use.