Resend は開発者のために作られたメール API で、使命は「ゴミ箱ではなく本物の人に届けること」です。UI は劇場のように純黒（#000000）にほぼ白の文字（#f0f0f0）を配し、書体は 3 層で分担します。Domaine Display のセリフ体がヒーローの一文を、ABC Favorit がブロックを、Inter が UI を担当。すべてのボーダーは冷たいブルーの色味（rgba(214,235,253,0.19)）を帯び、オレンジ・緑・青・黄・赤の多色システムがそれぞれ番号付き変数を持ち、ピル型ボタンは透明の下地です。開発者向け API とインフラプロダクトに適しています。
Resend生産性と SaaS
プロンプトテンプレート
基本テンプレート
Design a Resend-inspired interface. - Pure black background with near-white (#f0f0f0) text — theatrical, gallery-like darkness; - Three-font hierarchy: Domaine Display (serif hero), ABC Favorit (geometric sections), Inter (body/UI); - Icy blue-tinted borders: rgba(214, 235, 253, 0.19) — every border has a cold, crystalline shimmer; - Multi-color accent system: orange, green, blue, yellow, red — each with numbered CSS variable scales; - Pill-shaped buttons and tags (9999px radius) with transparent backgrounds. Colors: #000000, #f0f0f0, #ffffff, #ff5900 with #ff5900 accent. Typography: - Background: transparent.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Resend aesthetics. Use Resend color identity with #ff5900 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Resend style. Use Resend color identity with #ff5900 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Resend design language. Use Resend color identity with #ff5900 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Resend visual identity. Use Resend color identity with #ff5900 accents. Compelling, conversion-focused.
使用例
Resend アプリ
WebBuild a web app with Resend design language and #ff5900 color system.
Resend ダッシュボード
ダッシュボードCreate a dashboard using Resend style with data visualization and - Background: transparent typography.
✅ 適した用途
- SaaS 製品
- 開発者向け API プロダクトの公式サイト
- ミニマルでダークな SaaS コンソール
❌ 適さない用途
- ポップで多彩なコンシューマー製品
- 伝統産業の重厚な公式サイト
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。