Resend

Difficulty:
Company
Resend Effect Preview

Effect Preview

Design Tokens

Key tokens derived from official brand references and this style's prompt. Copy them or pair with the DESIGN.md below.

Colors

  • primaryBrand

    Primary actions & highlights

  • on-primaryDerived

    Text on primary

  • secondaryDerived

    Chips, badges & soft emphasis

  • on-secondaryDerived

    Text on secondary

  • neutralPrompt

    Page canvas

  • on-neutralDerived

    Text on canvas

  • surfaceDerived

    Cards, panels & elevated containers

  • on-surfaceDerived

    Text on surface

  • borderDerived

    Borders & dividers

Radius & Shapes

Prompt
sm · 12px
md · 24px
lg · 24px
full

Interactive controls use fully rounded pill shapes.

Spacing

Derived
  • sm8px
  • md12px
  • lg24px

Elevation

Derived

Depth is expressed through hairline borders and tonal layering.

Typography

Prompt
  • Ag

    Headings 32px · bold

    Favorit

  • Ag

    Body 16px · regular

    Favorit

  • Ag

    Labels 13px · medium

    Favorit

Resend is email for developers — the best way to reach humans instead of spam folders. Its interface is theatrical pure black (#000000) with near-white text (#f0f0f0), a three-font hierarchy (Domaine Display serif heroes, ABC Favorit sections, Inter UI), icy blue-tinted borders at rgba(214,235,253,0.19) that shimmer crystalline, a multicolor accent system with numbered scales, and transparent pill buttons.

SaaSMinimal

Prompt Template

Base Template
Design a Resend-inspired interface. - Pure black background with near-white (#f0f0f0) text — theatrical, gallery-like darkness; - Three-font hierarchy: Domaine Display (serif hero), ABC Favorit (geometric sections), Inter (body/UI); - Icy blue-tinted borders: rgba(214, 235, 253, 0.19) — every border has a cold, crystalline shimmer; - Multi-color accent system: orange, green, blue, yellow, red — each with numbered CSS variable scales; - Pill-shaped buttons and tags (9999px radius) with transparent backgrounds. Colors: #000000, #f0f0f0, #ffffff, #ff5900 with #ff5900 accent. Typography: - Background: transparent.

Variant Prompts

📱 Mobile
Design a mobile app with Resend aesthetics. Use Resend color identity with #ff5900 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Resend style. Use Resend color identity with #ff5900 accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Resend design language. Use Resend color identity with #ff5900 accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Resend visual identity. Use Resend color identity with #ff5900 accents. Compelling, conversion-focused.

Usage Examples

Resend App

Web
Build a web app with Resend design language and #ff5900 color system.

Resend Dashboard

Dashboard
Create a dashboard using Resend style with data visualization and - Background: transparent typography.

✅ Best For

  • SaaS
  • Developer API product sites
  • Minimal dark SaaS consoles

❌ Avoid For

  • Playful colorful consumer products
  • Heavy traditional industry sites

DESIGN.md File

A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.

Download