growupanand/resend-brand
.agents/skills/resend-design-skills/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 growupanand/convoform 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
growupanand/web-design-guidelines
development
VerifiedTrustedCommunity
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
101SKILL.mdUpdated Apr 5, 2026
growupanand/vercel-react-native-skills
development
VerifiedTrustedCommunity
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
101SKILL.mdUpdated Apr 5, 2026
growupanand/vercel-react-best-practices
development
VerifiedTrustedCommunity
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
101SKILL.mdUpdated Apr 5, 2026
growupanand/vercel-composition-patterns
development
VerifiedTrustedCommunity
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
101SKILL.mdUpdated Apr 5, 2026