### Install Resend Design Skills

Source: https://github.com/resend/design-skills/blob/main/README.md

Command to install the Resend Design Skills agent into your workflow. This command uses npx to execute the 'skills add' command for the specified skill.

```bash
npx skills add resend/design-skills
```

--------------------------------

### HTML for Resend Layout Patterns

Source: https://context7.com/resend/design-skills/llms.txt

Implements Resend's standard layout patterns for marketing and social graphics. Provides HTML structures for 'Right Object Scene', 'Interface Scene', 'Big Number', and 'Text Only Subtle' layouts, including inline styles for positioning and typography.

```html
<!-- Right Object Scene: Small label top-left, title top-left (2 lines), 3D object right -->
<div class="right-object-scene" style="background: #000; position: relative;">
  <span class="label" style="position: absolute; top: 24px; left: 24px; font-family: Inter; font-size: 14px; color: #FDFEFFA6;">
    New feature
  </span>
  <h1 style="position: absolute; top: 60px; left: 24px; font-family: 'Domaine Display Narrow'; font-size: 72px; color: #FDFDFD;">
    Introducing<br>webhooks
  </h1>
  <img src="3d-object.png" style="position: absolute; right: 0; top: 50%; transform: translateY(-50%);">
</div>

<!-- Interface Scene: Label top-left, title bottom-left (2 lines), UI screenshot background -->
<div class="interface-scene" style="background: #000; position: relative;">
  <span class="label" style="position: absolute; top: 24px; left: 24px;">Feature</span>
  <img src="ui-screenshot.png" style="width: 100%; opacity: 0.8;">
  <h1 style="position: absolute; bottom: 48px; left: 24px; font-family: 'Domaine Display Narrow';">
    Beautiful<br>dashboards
  </h1>
</div>

<!-- Big Number: Large display number centered (Domaine), small label below -->
<div class="big-number-scene" style="background: #000; text-align: center; padding: 80px;">
  <span style="font-family: 'Domaine Display Narrow'; font-size: 96px; color: #FDFDFD; letter-spacing: -0.96px;">
    50M
  </span>
  <p style="font-family: Inter; font-size: 14px; color: #FDFEFFA6; margin-top: 16px;">
    Emails sent
  </p>
</div>

<!-- Text Only Subtle: Small centered text (2 lines), minimal dark background -->
<div class="text-only-subtle" style="background: #000; text-align: center; padding: 120px 40px;">
  <p style="font-family: 'Favorit'; font-size: 24px; color: #FDFDFD; line-height: 32px;">
    The best way to reach<br>your customers
  </p>
</div>
```

--------------------------------

### Resend Noise Texture URL

Source: https://github.com/resend/design-skills/blob/main/brand-guidelines/SKILL.md

Provides the URL for the 'Noise' texture image, intended for use in hero backgrounds to add atmospheric depth. This is a static asset.

```text
https://resend.com/static/product-pages/noise.png
```

--------------------------------

### Resend Semantic Color System CSS

Source: https://context7.com/resend/design-skills/llms.txt

Implements Resend's semantic color pairs for backgrounds and foregrounds to communicate application states like errors, warnings, success, and informational messages, ensuring consistent user experience.

```css
/* Semantic Color System - Background/Foreground Pairs */

/* Gray - Structure, hierarchy, subtle separation */
.card-subtle {
  background-color: #16171AEB;
  color: #FDFEFFA6;
}

/* Red - Critical states, irreversible actions */
.alert-error {
  background-color: #FF173F2D;
  color: #FF9592;
}

/* Amber - Caution and pending states */
.alert-warning {
  background-color: #FA820022;
  color: #FFCA16;
}

/* Green - Success and completion */
.alert-success {
  background-color: #22FF991E;
  color: #46FEA5D4;
}

/* Blue - Interactive and informational elements */
.alert-info {
  background-color: #0077FF3A;
  color: #70B8FF;
}
```

--------------------------------

### CSS for Resend Effects and Textures

Source: https://context7.com/resend/design-skills/llms.txt

Applies glass blur effects and noise textures for depth and visual interest in Resend's designs. Includes styles for glass panels, noise backgrounds, and combined effects. Utilizes backdrop-filter and background-image properties.

```css
/* Glass Blur Effect */
.glass-panel {
  backdrop-filter: blur(25px);
  background: rgba(0, 0, 0, 0.5);
}

/* Noise Texture - For hero backgrounds and atmospheric depth */
.hero-background {
  background-image: url('https://resend.com/static/product-pages/noise.png');
  background-blend-mode: overlay;
}

/* Combined Glass + Noise */
.branded-card {
  background: #000000;
  backdrop-filter: blur(25px);
  position: relative;
}

.branded-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://resend.com/static/product-pages/noise.png');
  opacity: 0.05;
  pointer-events: none;
}
```

--------------------------------

### Resend Logo URLs

Source: https://github.com/resend/design-skills/blob/main/brand-guidelines/SKILL.md

Lists the URLs for Resend's wordmark and lettermark logos in both white and black, available in SVG and PNG formats. These are essential for brand representation.

```text
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
```

--------------------------------

### Resend Typography System CSS

Source: https://context7.com/resend/design-skills/llms.txt

Applies Resend's typography scale, defining font families and styles for display headlines, titles, body text, and code blocks. It specifies font sizes, line heights, letter spacing, and font weights, emphasizing sentence case for all text.

```css
/* Font Family Definitions */
@font-face { font-family: 'Domaine Display Narrow'; }  /* Display headlines only */
@font-face { font-family: 'Favorit'; }                 /* Headings & titles */
@font-face { font-family: 'Inter'; }                   /* Body text */
@font-face { font-family: 'CommitMono'; }              /* Code blocks */

/* Display Typography Scale */
.display-large {
  font-family: 'Domaine Display Narrow';
  font-size: 96px;
  line-height: 96px;
  letter-spacing: -0.96px;
  /* NEVER use bold with Domaine */
  font-weight: normal;
}

.display-title {
  font-family: 'Favorit';
  font-size: 60px;
  line-height: 64px;
  letter-spacing: -2.8px;
}

.display-small {
  font-family: 'Domaine Display Narrow';
  font-size: 72px;
  line-height: 72px;
  letter-spacing: -0.77px;
}

/* Body Typography Scale */
.body-xlarge {
  font-family: 'Favorit';
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
}

.body-large {
  font-family: 'Inter';
  font-weight: 400; /* or 500 for medium */
  font-size: 18px;
  line-height: 28px;
}

.body-medium {
  font-family: 'Inter';
  font-weight: 400; /* 400, 500, or 600 */
  font-size: 16px;
  line-height: 24px;
}

.body-small {
  font-family: 'Inter';
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}

.code {
  font-family: 'CommitMono';
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}
```

--------------------------------

### HTML for Resend Logo Assets

Source: https://context7.com/resend/design-skills/llms.txt

Provides HTML code snippets to access Resend logo assets from a CDN. Includes options for white and black wordmarks and lettermarks in both SVG and PNG formats. Adheres to minimum height and clearspace requirements.

```html
<!-- Wordmark - White (for dark backgrounds) -->
<img src="https://cdn.resend.com/brand/resend-wordmark-white.svg" alt="Resend" height="24">
<img src="https://cdn.resend.com/brand/resend-wordmark-white.png" alt="Resend" height="24">

<!-- Wordmark - Black (for light backgrounds) -->
<img src="https://cdn.resend.com/brand/resend-wordmark-black.svg" alt="Resend" height="24">
<img src="https://cdn.resend.com/brand/resend-wordmark-black.png" alt="Resend" height="24">

<!-- Lettermark/Icon - White -->
<img src="https://cdn.resend.com/brand/resend-icon-white.svg" alt="Resend" height="24">
<img src="https://cdn.resend.com/brand/resend-icon-white.png" alt="Resend" height="24">

<!-- Lettermark/Icon - Black -->
<img src="https://cdn.resend.com/brand/resend-icon-black.svg" alt="Resend" height="24">
<img src="https://cdn.resend.com/brand/resend-icon-black.png" alt="Resend" height="24">

<!-- Logo Restrictions: NEVER do these -->
<!-- ❌ Rotate the logo -->
<!-- ❌ Apply effects (drop shadow, glow, etc.) -->
<!-- ❌ Outline the logo -->
<!-- ❌ Slant or stretch -->
<!-- ❌ Use multiple colors -->
<!-- ❌ Use low resolution versions -->
<!-- ❌ Combine symbol + wordmark -->
<!-- ❌ Modify proportions -->
```

--------------------------------

### CSS for Resend Gradients

Source: https://context7.com/resend/design-skills/llms.txt

Applies Resend's brand gradients for various design elements. Includes styles for text effects, subtle backgrounds, card borders, and rainbow borders. Uses linear gradients and background clip properties.

```css
/* Font Gradient - For hero text */
.gradient-text {
  background: linear-gradient(97deg, #ffffff 30%, rgba(255,255,255,0.50) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Smooth Gradient - For subtle backgrounds */
.smooth-gradient {
  background: linear-gradient(96deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.10) 100%);
}

/* Border Gradient - For card borders */
.border-gradient {
  border-image: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.05) 100%) 1;
}

/* Rainbow Border - For special highlights */
.rainbow-border {
  border-image: linear-gradient(90deg, rgba(2,252,239,0.44) 0%, rgba(255,181,43,0.44) 50%, rgba(160,43,254,0.44) 100%) 1;
}
```

--------------------------------

### Resend Semantic Colors

Source: https://github.com/resend/design-skills/blob/main/brand-guidelines/SKILL.md

Provides semantic color definitions for various UI states and elements, including background and foreground hex codes. These colors aid in conveying meaning and hierarchy.

```text
Gray: Background #16171AEB, Foreground #FDFEFFA6
Red: Background #FF173F2D, Foreground #FF9592
Amber: Background #FA800022, Foreground #FFCA16
Green: Background #22FF991E, Foreground #46FEA5D4
Blue: Background #0077FF3A, Foreground #70B8FF
```

--------------------------------

### Resend Design Principles (JavaScript)

Source: https://context7.com/resend/design-skills/llms.txt

Defines Resend's core design principles as a JavaScript object. It covers aspects like color philosophy, contrast, element usage, accent colors, forms, and typography rules. This serves as a configuration or reference for implementing Resend's brand guidelines.

```javascript
const resendDesignPrinciples = {
  // 1. Dark-first design philosophy
  preferDarkBackgrounds: true,
  defaultBackground: '#000000',
  defaultForeground: '#FDFDFD',

  // 2. Sharp contrast between black and light
  contrastRatio: 'high',
  avoidMidtones: true,

  // 3. Precision and focus over decoration
  decorativeElements: 'minimal',
  purposefulDesign: true,

  // 4. Accent colors communicate state, not style
  accentColorUsage: 'semantic-only', // error, warning, success, info
  noDecorativeColors: true,

  // 5. Simple, stable, intentional forms
  animations: 'subtle',
  shapes: 'geometric',

  // Typography rules
  typography: {
    casing: 'sentence-case', // ALWAYS sentence case
    domaineInBold: false,    // NEVER bold Domaine
    monospaceForTitles: false // NEVER monospace for titles
  }
};
```

--------------------------------

### Resend Typography Scale

Source: https://github.com/resend/design-skills/blob/main/brand-guidelines/SKILL.md

Details the typography scale for display and body text, specifying font families, sizes, line heights, and letter spacing. This ensures consistent text presentation.

```text
Display:
- 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:
- 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
```

--------------------------------

### Resend Design Skills: Gradient Application Test

Source: https://github.com/resend/design-skills/blob/main/tests/TESTS.md

Tests the Resend brand skill's ability to provide specific gradient values for text. With the skill, the agent should return a precise CSS linear gradient. Without the skill, the agent may provide a generic or incorrect gradient.

```css
linear-gradient(97deg, #ffffff 30%, rgba(255,255,255,0.50) 100%)
```

--------------------------------

### Resend Core Colors

Source: https://github.com/resend/design-skills/blob/main/brand-guidelines/SKILL.md

Defines the primary black and white colors used in Resend branding. These are fundamental for the brand's visual identity.

```text
Resend Black: #000000
Resend White: #FDFDFD
```

--------------------------------

### Resend Core Brand Colors CSS

Source: https://context7.com/resend/design-skills/llms.txt

Defines Resend's primary brand colors for backgrounds and text, adhering to a dark-first design principle with black backgrounds and white text for UI elements and sections.

```css
/* Core Brand Colors */
.resend-primary {
  background-color: #000000; /* Resend Black */
  color: #FDFDFD;            /* Resend White */
}

/* Dark-first design - black backgrounds with white text */
.hero-section {
  background: #000000;
  color: #FDFDFD;
}
```

--------------------------------

### Resend Glass Blur Effect

Source: https://github.com/resend/design-skills/blob/main/brand-guidelines/SKILL.md

Specifies the CSS value for the 'Glass blur' effect, utilizing the backdrop-filter property. This effect is used for visual styling.

```css
Glass blur: backdrop-filter: blur(25px)
```

--------------------------------

### Resend Gradient Values

Source: https://github.com/resend/design-skills/blob/main/brand-guidelines/SKILL.md

Defines the CSS linear gradient values for various applications, including font gradients, smooth gradients, borders, and a rainbow border. These add visual depth and style.

```css
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%)
```

--------------------------------

### Resend Design Skills: Routing Discovery Test

Source: https://github.com/resend/design-skills/blob/main/tests/TESTS.md

Tests the Resend design skill's ability to identify and describe available sub-skills. The expected outcome with the skill is the agent listing relevant design resources like 'brand-guidelines'. Without the skill, the agent should have no knowledge of these specific design skills.

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.