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

---

---
version: alpha
name: Resend
description: Email infrastructure for developers.
tone: Technical, precise, minimalist, and developer-focused.
color-scheme: light
colors:
  primary: "#000000"
  surface: "#FFFFFF"
  surface-dim: "#F9F9F9"
  on-surface: "#000000"
  on-primary: "#FFFFFF"
  accent: "#9B7CFF"
  outline: "#E5E5E5"
  error: "#FF4D4D"
  success: "#00C853"
  focus-ring: "#000000"
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
  body-md:
    fontFamily: "-apple-system, sans-serif"
    fontSize: 1rem
    fontWeight: 400
  body-sm:
    fontFamily: "-apple-system, sans-serif"
    fontSize: 0.875rem
    fontWeight: 400
  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: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "#333333"
    textColor: "{colors.on-primary}"
  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.lg}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.accent}"
  badge:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FFEEEE"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-on-surface:
    backgroundColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    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 clean, developer-centric email API and platform. The visual identity is stark, minimalist, and high-contrast, utilizing a monochromatic palette with precise, sharp typography to convey technical reliability and modern simplicity.

## Colors

The color strategy is strictly monochromatic, relying on high-contrast black and white to establish a professional, technical aesthetic. Accents are used sparingly to guide the user's eye toward primary actions or specific status indicators.

*   Primary (#000000): The core brand color used for primary UI elements and text.
*   Surface (#FFFFFF): The primary background color for the application and landing pages.
*   Surface-dim (inferred) (#F9F9F9): A subtle off-white for secondary containers.
*   On-surface (#000000): Primary text color on light backgrounds.
*   On-primary (#FFFFFF): Text color for buttons and dark-mode elements.
*   Accent (#9B7CFF): Brand accent color used for highlights and visual interest.
*   Outline (inferred) (#E5E5E5): Border color for inputs and dividers.
*   Error (inferred) (#FF4D4D): Semantic color for errors and alerts.
*   Success (inferred) (#00C853): Semantic color for success states.
*   Focus-ring (#000000): High-contrast focus state for accessibility.

## Typography

Typography is set in system-default sans-serif fonts, prioritizing readability and a native feel across all platforms. The hierarchy is defined by clear weight and size shifts to maintain a clean, scannable layout.

*   Display-lg (inferred): Used for hero headlines.
*   Display-md (inferred): Used for section titles.
*   Headline-lg (inferred): Used for sub-sections.
*   Headline-md (inferred): Used for feature headers.
*   Body-md: Standard body text.
*   Body-sm: Secondary text and labels.
*   Label-sm: Small UI labels and metadata.

## Layout

Resend utilizes a centered, max-width container strategy that keeps content focused and readable. The layout follows a strict 4px/8px grid system to ensure consistent vertical rhythm and spacing between components. The page structure typically follows a standard flow: nav, hero, features, social-proof, and footer. The hero section is characterized by a centered headline and subhead, paired with primary and secondary CTA buttons, followed by a large, high-fidelity product screenshot. Responsive behavior is mobile-first, with navigation elements collapsing into a drawer on smaller viewports.

## Elevation & Depth

Depth is used sparingly to maintain a flat, modern aesthetic. Subtle single-layer shadows are applied across three levels to provide necessary visual separation without clutter.

*   elevation.sm: Subtle lift for interactive elements.
*   elevation.md: Standard lift for cards and dropdowns.
*   elevation.lg: Pronounced lift for modals or overlays.

## Shapes

The brand employs a intentional mix of sharp and rounded corners to balance technical precision with approachability. Smaller interactive elements like buttons and inputs utilize `{rounded.sm}` or `{rounded.md}`, while larger containers and cards use `{rounded.lg}` or `{rounded.xl}` to soften the interface.

## 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
The primary button uses `{colors.primary}` with `{typography.label-sm}` text. Use these for the main call-to-action on a page. Secondary buttons use a `{colors.surface}` background with a `{colors.outline}` border to maintain a lighter visual weight.

### Card
Cards are defined by a `{colors.surface}` background and `{colors.outline}` border. Use `{rounded.md}` for standard cards and `{rounded.lg}` for elevated cards to create clear content groupings.

### Input Field
Inputs feature a `{colors.surface}` background and `{colors.outline}` border. When active, the border should transition to `{colors.focus-ring}` to indicate focus.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary CTAs. | Do not use `{colors.accent}` for primary action buttons. |
| Use `{typography.body-md}` for all standard paragraph text. | Do not use more than two font weights on a single page. |
| Apply `{rounded.md}` to all card components. | Do not use rounded corners larger than `{rounded.xl}` on standard cards. |
| Use `{colors.outline}` for all subtle dividers. | Do not mix different border-radius scales within the same component group. |
| Maintain high contrast between text and background. | Do not use low-contrast gray text for primary information. |
| Use `{typography.label-sm}` for button labels. | Do not use drop shadows on text. |
| Use `{elevation.sm}` to lift interactive elements. | Do not use heavy, multi-layered shadows. |
| Use `{colors.focus-ring}` for accessibility states. | Do not omit focus states on interactive components. |

## Content Style

CTA labels are imperative, concise, and action-oriented, typically using short verb-led phrases like "Get started."

Headings are direct, benefit-driven, and professional, designed to communicate value immediately without marketing fluff.

Copy density is kept low; paragraphs are short and scannable, frequently broken up by lists or code blocks to match the developer-focused tone.

## Imagery & Icons

Imagery consists of clean, high-fidelity product screenshots and minimalist iconography. Illustrations are sparse, functional, and serve to clarify technical concepts rather than decorate. Defer to the brand's existing asset library for consistent visual language.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Resend, a technical, minimalist developer-focused brand. Match its stark, high-contrast, precise tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference all values by their YAML token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.md}` — never hardcode hex values, font sizes, or pixel radii.
2. Respect every component definition under `components:` exactly. Do not invent variants (e.g., a ghost button, a pill badge) the spec does not list.
3. Follow the Layout section for container strategy, spacing rhythm, and responsive behavior. Use `{spacing.xs}` through `{spacing.2xl}` for all padding and gap values; default to mobile-first with one breakpoint at 768px.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it — for example, using `{colors.accent}` on a primary CTA — surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook, component metadata) is available, those values override the spec.

## Output contract

**Must:**
- Use every token by name; never hardcode a value the spec already defines.
- Include hover, focus, and disabled states for all interactive components where the spec defines them (`button-primary-hover`, `input-field-focus`, `{colors.focus-ring}`).
- Apply `{rounded.sm}` to inputs, `{rounded.md}` to standard cards, and `{rounded.lg}` to elevated cards — no mixing within a component group.
- Use `{typography.label-sm}` for all button labels; match Content Style (imperative, verb-led) only when generating new CTA copy is explicitly requested.
- Apply elevation tokens (`{elevation.sm}` through `{elevation.lg}`) instead of inventing shadow values.

**Must NOT:**
- Introduce colors, font sizes, radii, or shadow values absent from the spec.
- Use generic utility defaults when a brand token exists.
- Use `{colors.accent}` for primary action buttons.
- Add emoji, decorative illustration, or marketing filler copy.
- Rewrite, replace, or restructure existing page copy, headings, navigation items, or routes as a side effect of applying design tokens.

## When in doubt
- If the spec doesn't define a value, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For background roles, default to `{colors.surface}` or `{colors.surface-dim}`; for text on light backgrounds, default to `{colors.on-surface}`.
- For unspecified breakpoints, apply mobile-first layout with a single breakpoint at 768px per the Layout section.
- `{colors.accent}` is reserved for highlights and status indicators — not primary actions.