home / skills / resend / design-skills / brand-guidelines

brand-guidelines skill

safe

This skill helps you create consistent Resend brand materials across documents, presentations, and visuals by applying official style guidelines.

npx playbooks add skill resend/design-skills --skill brand-guidelines

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

5.5 KB

---
name: resend-brand
description: Use when creating Resend marketing materials, documents, presentations, or visual content. Triggers for Resend brand, Resend style, or Resend visual identity requests.
metadata:
  author: resend
  version: "1.0.0"
---

# 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

Overview

This skill provides clear, production-ready guidance for creating marketing materials, documents, presentations, and visuals that follow Resend's brand identity. It centralizes rules for color, typography, logo usage, gradients, textures, and layout patterns to ensure consistent, on-brand outputs. Use it to speed design decisions and avoid common brand mistakes.

How this skill works

I inspect your brief (format, audience, medium) and apply Resend’s visual rules: core and semantic colors, typography scale and rules, logo clearspace and sizing, and permitted effects. I suggest compositions using the prescribed layout patterns (Right Object Scene, Interface Scene, Text Only, Big Number) and verify no restricted logo or font alterations are present. I also recommend assets (wordmark, lettermark, noise texture, wallpapers, gradients) and export-safe settings for digital delivery.

When to use it

Designing banners, hero images, or wallpapers for web and social channels
Building slide decks or investor decks that must reflect Resend’s identity
Creating product landing pages, marketing emails, or promotional docs
Preparing UI screenshots or mockups that sit inside branded compositions
Reviewing visuals for brand compliance before publication

Best practices

Use dark-first backgrounds with Resend Black and subtle noise or gradients
Apply sentence case across headings, buttons, labels, and navigation
Use Favorit for headings, Inter for body copy, Domaine only for large display headlines (never in product UI)
Respect logo clearspace (½ cap height) and minimum sizes (preferred 24px; absolute 16px)
Never rotate, distort, recolor, or apply effects to logos; don’t replace brand fonts

Example use cases

A product marketing hero: Right Object Scene with label top-left, two-line title, 3D object on the right, glass blur and noise texture
Investor pitch deck cover: Big Number layout using Domaine for a single large display number and small label below
Feature announcement banner: Interface Scene with top-left label, product screenshot background, and blue semantic accents for interactivity
Email header: Text Only Subtle layout with short two-line centered title and dark background
Social post: Text Only Scene with large two-line title, smooth gradient overlay, and cube element used only as a secondary accent

FAQ

Can I use the Domaine font for UI headings inside the product?

No. Domaine Display Narrow is reserved for display headlines only and must never appear in product UI.

What are acceptable logo variations?

Use the provided black or white wordmark/lettermark files at correct proportions, maintain clearspace, and never add effects, rotate, recolor, or combine symbol and wordmark.