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.

View SKILL.md on GitHub Repository
Stars 133
Forks 18

Install this agent skill to your Project

npx add-skill https://github.com/julianromli/opencode-template/tree/main/skill/resend-design-skills/brand-guidelines

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.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

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

  1. Dark-first design philosophy
  2. Sharp contrast between black and light
  3. Precision and focus over decoration
  4. Accent colors communicate state, not style
  5. Simple, stable, intentional forms

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

julianromli/opencode-template

test-driven-development

Use when implementing any feature or bugfix, before writing implementation code

133 18
Explore
julianromli/opencode-template

code-refactoring

Code refactoring patterns and techniques for improving code quality without changing behavior. Use for cleaning up legacy code, reducing complexity, or improving maintainability.

133 18
Explore
julianromli/opencode-template

using-superpowers

Use when starting any conversation - establishes how to find and use skills, requiring Skill tool invocation before ANY response including clarifying questions

133 18
Explore
julianromli/opencode-template

ui-ux-pro-max

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.

133 18
Explore
julianromli/opencode-template

task-generator

Generate structured task lists from specs or requirements. IMPORTANT: After completing ANY spec via ExitSpecMode, ALWAYS ask the user: "Would you like me to generate a task list for this spec?" Use when user confirms or explicitly requests task generation from a plan/spec/PRD.

133 18
Explore
julianromli/opencode-template

next-best-practices

Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling

133 18
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results