Agent skill

resend-brand

Use when creating Resend marketing materials, documents, presentations, or visual content. Triggers for Resend brand, Resend style, or Resend visual identity requests.

View SKILL.md on GitHub Repository
Stars 18
Forks 2

Install this agent skill to your Project

npx add-skill https://github.com/resend/design-skills/tree/main/brand-guidelines

Metadata

Additional technical details for this skill

author
resend
version
1.0.0

SKILL.md

Resend Brand Guidelines

Core Colors

Name Hex
Resend Black #000000
Resend White #FDFDFD

Semantic Colors

Scale Background Foreground Usage
Gray #16171AEB #FDFEFFA6 Structure, hierarchy, and subtle separation
Red #FF173F2D #FF9592 Critical states and irreversible actions
Amber #FA820022 #FFCA16 Caution and pending states
Green #22FF991E #46FEA5D4 Success and completion
Blue #0077FF3A #70B8FF Interactive and informational elements

Typography

Font Role
Domaine Display Narrow Display headlines (never in product UI)
Favorit Headings & titles
Inter Body text
CommitMono Code

Typography Rules

  • Use sentence case everywhere (headings, buttons, labels, navigation)
  • Never use the Domaine font in bold
  • Never use monospace for titles or body copy
  • Never replace brand fonts with alternatives

Typography Scale

Display

Style Font Size/Line Letter Spacing
display/large Domaine Display Narrow 96/96 -0.96px
title Resend Favorit 60/64 -2.8px
small Domaine Display Narrow 72/72 -0.77px

Body

Style Font Weight Size/Line
xlarge Resend Favorit Regular 24/32
large Inter Regular/Medium 18/28
medium Inter Regular/Medium/Semi Bold 16/24
small Inter Regular 14/20
code CommitMono Regular 14/20

Logo

Wordmark

  • https://cdn.resend.com/brand/resend-wordmark-white.svg
  • https://cdn.resend.com/brand/resend-wordmark-white.png
  • https://cdn.resend.com/brand/resend-wordmark-black.svg
  • https://cdn.resend.com/brand/resend-wordmark-black.png

Lettermark

  • https://cdn.resend.com/brand/resend-icon-white.svg
  • https://cdn.resend.com/brand/resend-icon-white.png
  • https://cdn.resend.com/brand/resend-icon-black.svg
  • https://cdn.resend.com/brand/resend-icon-black.png

Clearspace

Minimum clear space = 1/2 cap height on all sides

Minimum Size

  • Preferred: 24px height
  • Extreme cases: 16px height minimum

Logo Restrictions

Never: rotate, apply effects, outline, slant/stretch, use multiple colors, use low resolution, combine symbol+wordmark, modify proportions

Cube Element

Secondary brand symbol. Never use as: primary logo, navigation element, or with modified geometry/colors.

Gradients

Name Value
Font gradient linear-gradient(97deg, #ffffff 30%, rgba(255,255,255,0.50) 100%)
Smooth gradient linear-gradient(96deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.10) 100%)
Border linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.05) 100%)
Rainbow border linear-gradient(90deg, rgba(2,252,239,0.44) 0%, rgba(255,181,43,0.44) 50%, rgba(160,43,254,0.44) 100%)

Effects

Name Value
Glass blur backdrop-filter: blur(25px)

Textures

  • Noise: Hero backgrounds, atmospheric depth https://resend.com/static/product-pages/noise.png

Backgrounds

Brand wallpapers available at: https://resend.com/wallpapers

Layout Patterns

Name Description
Right Object Scene Small label top-left, title top-left (2 lines), 3D object right
Interface Scene Label top-left, title bottom-left (2 lines), UI screenshot background
Text Only Scene Title top-left, 3D abstract scene fills background
Text Only Background Large title centered, subtle texture/gradient background
Text Only Subtle Small centered text (2 lines), minimal dark background
Big Number Large display number centered (Domaine), small label below

Common patterns:

  • Label/category always small, top-left or top-center
  • Titles use 2-line breaks for rhythm
  • Titles are never longer than 3 lines.
  • Objects positioned right, left, or as full background
  • Dark backgrounds with subtle depth

Design Principles

  1. Dark-first design philosophy
  2. Sharp contrast between black and light
  3. Precision and focus over decoration
  4. Accent colors communicate state, not style
  5. Simple, stable, intentional forms

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

resend/design-skills

resend-design-system

Use when building or modifying UI in the Resend codebase. Provides component APIs, variant options, design tokens, and composition patterns for all src/ui/ primitives.

18 2
Explore
resend/react-email

react-email

Use when creating HTML email templates with React components - welcome emails, password resets, notifications, order confirmations, newsletters, or transactional emails.

18,318 950
Explore
resend/resend-skills

react-email

Use when creating HTML email templates with React components - welcome emails, password resets, notifications, order confirmations, newsletters, or transactional emails.

96 14
Explore
resend/resend-skills

resend

Use when working with the Resend email API — sending transactional emails (single or batch), receiving inbound emails via webhooks, managing email templates, tracking delivery events, managing domains, contacts, broadcasts, webhooks, API keys, viewing API request logs, or setting up the Resend SDK. Always use this skill when the user mentions Resend, even for simple tasks like "send an email with Resend" — the skill contains critical gotchas (idempotency keys, webhook verification, template variable syntax) that prevent common production issues.

96 14
Explore
resend/resend-skills

agent-email-inbox

Use when building any system where email content triggers actions — AI agent inboxes, automated support handlers, email-to-task pipelines, or any workflow processing untrusted inbound email. Always use this skill when the user wants to receive emails and act on them programmatically, even if they don't mention "agent" — the skill contains critical security patterns (sender allowlists, content filtering, sandboxed processing) that prevent untrusted email from controlling your system.

96 14
Explore
resend/resend-skills

resend-cli

Operate the Resend platform from the terminal — send emails (including React Email .tsx templates via --react-email), manage domains, contacts, broadcasts, templates, webhooks, and API keys via the `resend` CLI. Use when the user wants to run Resend commands in the shell, scripts, or CI/CD pipelines, or send/preview React Email templates. Always load this skill before running `resend` commands — it contains the non-interactive flag contract and gotchas that prevent silent failures.

96 14
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results