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