resend-brand

작성자: resend

Resend 마케팅 자료, 문서, 프레젠테이션 또는 시각적 콘텐츠를 제작할 때 사용합니다. Resend 브랜드, Resend 스타일 또는 Resend 시각적 아이덴티티에 대한 트리거…

npx skills add https://github.com/resend/design-skills --skill resend-brand

ZIP 다운로드 GitHub

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

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

resend의 다른 스킬

Resend 대시보드를 디자인 시스템 정합성에 맞게 감사합니다. 사용자가 "디자인 감사", "디자인 정합성", "대시보드 디자인 감사"라고 말하거나…에 대해 질문하면 이 경로로 이동합니다.

marketing-pages

Resend 코드베이스에서 마케팅/공개 페이지를 생성, 업데이트, 편집 또는 삭제할 때 사용합니다. 페이지 구조, 컴포넌트 재사용 규칙 및 기타 관련 사항을 다룹니다.

트랜잭션 및 대량 이메일 전송을 Resend API를 통해 단일 또는 배치 엔드포인트로 제공합니다. 개별 이메일(첨부 파일 또는 예약 포함)에는 단일 엔드포인트를 사용하고, API 호출을 줄이기 위해 한 번의 요청으로 2~100개의 개별 이메일을 보낼 때는 배치 엔드포인트를 사용하세요. 멱등성 키(<event-type>/<entity-id> 형식)를 구현하여 재시도 시 중복 전송을 방지하며, 24시간 만료됩니다. 429(속도 제한) 및 500(서버 오류) 응답에 대해서만 지수 백오프를 사용하여 재시도하고, 400/422 유효성 검사 오류는 재시도 없이 수정하세요.

API를 통해 Resend 이메일 템플릿을 생성, 업데이트, 게시, 삭제하거나 나열할 때, 또는 템플릿 변수를 정의하거나 초안과 최종본의 차이를 이해할 때 사용합니다.

Resend 대시보드의 디자인 시스템 정합성을 감사합니다. 사용자가 "디자인 감사", "디자인 정합성", "대시보드 디자인 감사"라고 말하거나…에 대해 물을 때 여기로 라우팅됩니다.

marketing-pages

Resend 코드베이스에서 마케팅/공개 페이지를 생성, 업데이트, 편집 또는 삭제할 때 사용합니다. 페이지 구조, 컴포넌트 재사용 규칙, 그리고 그…

resend-design-skills

Resend 디자인 리소스가 필요할 때 사용합니다. 브랜드 가이드라인, 시각적 아이덴티티, UI 컴포넌트, 디자인 토큰 및 마케팅 페이지 패턴으로 연결됩니다.

resend-design-system

Resend 코드베이스에서 UI를 구축하거나 수정할 때 사용합니다. 모든 src/ui/…에 대한 컴포넌트 API, 변형 옵션, 디자인 토큰, 구성 패턴을 제공합니다.