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を使用したトランザクションメールおよび一括メール配信。単一エンドポイントまたはバッチエンドポイントに対応。単一エンドポイントは添付ファイルやスケジュール設定を含む個別メールに使用し、バッチエンドポイントは1リクエストで2～100通の異なるメールを送信してAPI呼び出しを削減。べき等性キー（<event-type>/<entity-id>形式）を実装し、リトライ時の重複送信を防止、24時間で有効期限切れ。429（レート制限）および500（サーバーエラー）応答のみ指数バックオフでリトライし、400/422のバリデーションエラーは修正してから再試行。

ResendのメールテンプレートをAPI経由で作成、更新、公開、削除、一覧表示する際、またはテンプレート変数を定義する際、ドラフトと…の違いを理解する際に使用します。

Resendダッシュボードのデザインシステム整合性を監査します。ユーザーが「デザイン監査」「デザイン整合性」「ダッシュボードデザイン監査」と言った場合、または…について尋ねた場合にここにルーティングされます。

marketing-pages

Resendコードベース内でマーケティング／公開ページを作成、更新、編集、または削除する際に使用します。ページ構造、コンポーネント再利用のルール、および…をカバーします。

resend-design-skills

Resendのデザインリソースが必要な場合に使用します。ブランドガイドライン、ビジュアルアイデンティティ、UIコンポーネント、デザイントークン、マーケティングページパターンにルーティングします。

resend-design-system

ResendコードベースでUIを構築・変更する際に使用します。すべてのsrc/ui/…に対するコンポーネントAPI、バリアントオプション、デザイントークン、構成パターンを提供します。