القائمة
Use when creating Resend marketing materials, documents, presentations, or visual content. Triggers for Resend brand, Resend style, or Resend visual identity requests.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Use when needing Resend design resources. Routes to brand guidelines, visual identity, UI components, design tokens, and marketing page patterns.
Audit the Resend dashboard for design system alignment. Routes here when a user says "audit design", "design alignment", "dashboard design audit", asks about undocumented components or design violations, or when triggered by the scheduled weekly routine.
Use when building or modifying UI in the Resend codebase. Provides component APIs, variant options, design tokens, composition patterns for all src/ui/ primitives, and the Resend heuristics for UX decisions like dialog-vs-stepper or disable-vs-hide.
Use when creating, updating, editing, or deleting marketing/public pages in the Resend codebase. Covers page structure, component reuse rules, and the distinction between public and product design systems.
| name | resend-brand |
| description | Use when creating Resend marketing materials, documents, presentations, or visual content. Triggers for Resend brand, Resend style, or Resend visual identity requests. |
| metadata | {"author":"resend","version":"1.0.2"} |
| Name | Hex |
|---|---|
| Resend Black | #000000 |
| Resend White | #FDFDFD |
| 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 |
| Font | Role |
|---|---|
| Domaine Display Narrow | Display headlines (never in product UI) |
| Favorit | Headings & titles |
| Inter | Body text |
| CommitMono | Code |
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 |
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.pngLettermark
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.pngMinimum clear space = 1/2 cap height on all sides
Never: rotate, apply effects, outline, slant/stretch, use multiple colors, use low resolution, combine symbol+wordmark, modify proportions
Secondary brand symbol. Never use as: primary logo, navigation element, or with modified geometry/colors.
| 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%) |
| Name | Value |
|---|---|
| Glass blur | backdrop-filter: blur(25px) |
https://resend.com/static/product-pages/noise.pngBrand wallpapers available at: https://resend.com/wallpapers
| 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: