resend/design-skills/resend-brand
Trust tier 3
- community
Source check pending
Checking that the SKILL.md file is still in the repository.
Use when creating Resend marketing materials, documents, presentations, or visual content. Triggers for Resend brand, Resend style, or Resend visual identity requests.
Install
npx vskill@latest install resend/design-skills/resend-brandSKILL.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.svghttps://cdn.resend.com/brand/resend-wordmark-white.pnghttps://cdn.resend.com/brand/resend-wordmark-black.svghttps://cdn.resend.com/brand/resend-wordmark-black.png
Lettermark
https://cdn.resend.com/brand/resend-icon-white.svghttps://cdn.resend.com/brand/resend-icon-white.pnghttps://cdn.resend.com/brand/resend-icon-black.svghttps://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
- Dark-first design philosophy
- Sharp contrast between black and light
- Precision and focus over decoration
- Accent colors communicate state, not style
- Simple, stable, intentional forms
Security
- Security scanPassed, 90 of 100Pattern checks on the skill's files.
- Model reviewPassed
Quality evaluation
- Task evaluationNot runNo evaluation yet. Run one in Skill Studio.
Source
- SKILL.md in the repositoryCheckingresend-brand/SKILL.md
Popularity
- Repository stars
- 39
- Repository forks
- 4
- 7-day trend score
- 0
Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.
Works with
Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.
- Claude Code
- Cursor
- GitHub Copilot
- Windsurf
- Codex
- Gemini CLI
- Cline
- Amp
- Roo Code
- Goose
- Continue
- Kilo Code
- Junie
- Trae
- OpenHands
- Qwen Code
- AI Agent
- Tabnine Chat
- Sourcegraph Cody
- Amazon Q
- Firebase Genkit
- Sweep
- Devin
- Phind
- Mentat
- Claude Desktop
- Aider
- GPT Pilot
- Plandex
- bolt.new
- v0
- Replit Agent
- Anse
- TypingMind
- BetterChatGPT
- LibreChat
- Warp AI
- Pieces
- Fig AI
Embed badge
[](https://verified-skill.com/skills/resend/design-skills/resend-brand)