resend/resend-brand
brand-guidelines/SKILL.md
Use when creating Resend marketing materials, documents, presentations, or visual content. Triggers for Resend brand, Resend style, or Resend visual identity requests.
$ install --global
skillsauthnpx skillsauth add resend/design-skills resend-brandInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 5, 2026, 3:07 PM323.8s1 file scanned
SKILL.md
- 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.
- 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.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
Related Skills
resend/design-audit
testing
VerifiedTrustedCommunity
Audit the Resend dashboard for design system alignment. Routes here when a user says "audit design", "design alignment", "dashboard design audit", or when triggered by the scheduled weekly routine.
25SKILL.mdUpdated Apr 23, 2026
resend/resend-design-system
development
VerifiedTrustedCommunity
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.
25SKILL.mdUpdated Apr 22, 2026
resend/resend-design-skills
documentation
VerifiedTrustedCommunity
Use when needing Resend design resources. Routes to brand guidelines, visual identity, UI components, design tokens, and marketing page patterns.
23SKILL.mdUpdated Apr 22, 2026
resend/marketing-pages
development
VerifiedTrustedCommunity
Use when creating, updating, editing, or deleting marketing/public pages in the Resend codebase. Covers page structure, component reuse rules, and the distinction between public and product design systems.
19SKILL.mdUpdated Apr 22, 2026