Agent skill
resend-brand
Use when creating Resend marketing materials, documents, presentations, or visual content. Triggers for Resend brand, Resend style, or Resend visual identity requests.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/brand-guidelines-growupanand-convoform
Metadata
Additional technical details for this skill
- author
- resend
- version
- 1.0.0
SKILL.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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?