
Resend
紫のネオンカラーの黒いベルベット
Resendはほぼ完全な暗闇の中に存在します。清潔な黒いキャンバス、細いグラファイトの境界線、そして曇りガラスに印刷されたテキストを読んでいるような感覚を生み出す白地に黒のタイポグラフィ。メイン要素は装飾を排したもので、グラデーションやマーケティング用のイラストを一切使わず、96pxのDomaineフォントで書かれた大きなセリフ体の見出しが、3次元の黒い立方体の横に1つだけ配置されています。ブランドマークは濃い紫色(#9281f7)で、メールアドレスの行、ステータスアイコン、コードサンプルに使用されますが、ボタンには一切使用されません。等幅フォント(Commit Mono)は、すべてのコードブロック、アイコン、インラインラベルを通して開発者の個性を伝え、ページ全体が豪華なインターフェースに包まれた端末のように感じられます。コンポーネントは角がシャープまたはわずかに丸みを帯びており(6px / 16px)、高さが低く、レイヤーを区切るために影ではなく1pxの境界線を使用しています。その動きは繊細でありながら表現力豊かだ。メイン画面上のテキストの滑らかなフェードインとスライド、WebGLを使用したキューブの微妙な回転、そしてマウスオーバー時の150ミリ秒という短いトランジションなどが挙げられる。
ビジュアルデザインは、WebGLでレンダリングされた3Dオブジェクト(メインウィンドウの黒い立方体、回転する幾何学的形状)と、暗いコードウィンドウに表示される製品のユーザーインターフェースの埋め込みスクリーンショットでほぼ完全に構成されています。写真、イラスト、ライフスタイル画像は使用されていません。トラストバーのロゴは、元の色で埋め込まれたSVG画像です。アイコンは、#f0f0f0または#a1a4a5のストロークを持つ1px~1.5pxのアウトラインです。ビジュアル言語は、黒いキャンバス、メインウィンドウのアンカーとしての3Dオブジェクト、製品の証明としての暗いコードウィンドウ、社会的証明としての白いSVGロゴです。装飾的なものはなく、すべてのビジュアル要素は構造的(立方体)か実証的(コードウィンドウ、ロゴ)のいずれかです。
パレット
ブランド
- Iris Violet
#9281f7— リンク、タグ、強調表示された短いフレーズには紫色のアクセントテキストを使用し、アイコンコンテナとブランドアイコンには紫からマゼンタへの斜めのグラデーションを適用します。 - Iris Violet Glow
#baa7ff— リンク、タグ、および強調表示された短いフレーズは紫色で強調表示されます。
中性
- Void Black
#000000— ページ背景、段ボール表面、オーバーレイスクリーンなど、キャンバス全体が対象となります。 - Graphite Hairline
#292d30— カード、入力フィールド、ボタン、コードブロック、区切り線に引かれた1ピクセルの境界線は、各レイヤーの区切りを定義します。 - White
#ffffff— 暗い表面上の主要な見出し、タイトル、ボタンのラベル、アイコンの塗りつぶし。 - Bone White
#f0f0f0— 本文、副見出し、アイコンの輪郭線は、読みやすさを考慮したメインカラーで表示される。 - Ash Gray
#a1a4a5— 控えめな本文テキスト、アイコンラベル、アイコンアウトライン - 第3レベルのテキストおよびメタデータ。 - Smoke Gray
#abafb4— リンクの色、無効化されたボタンのテキスト、補助ラベル - 第4レベルのテキスト
タイポグラフィ
12~96ピクセル・8段階
- Inter — 交換: Inter (Google Fonts) · 概要 400, 500, 600 · 本文、UIラベル、ナビゲーション、ボタン、リンク。作業ツール - コードを除くすべての画面で1,280回表示されます。
- Domaine — 交換: GT Sectra · 概要 400 · タイトルテキストは、400ポイントのフォントで文字間隔は96ピクセルとなっており、編集記事のような、まるで印刷物のような印象を与える。このテキストはページ全体で2回のみ使用され、最も大きな見出しにのみ用いられている。
- aBC Favorit — 交換: Inter Display · 概要 400, 500 · セクションの見出しと小見出し。ブランドスタイルのフォントは、56px、ウェイト400、文字間隔-0.05emです。この幾何学的なサンセリフフォントの極めて狭い文字間隔は、メインのDomaine書体とは対照的に、凝縮された自信に満ちた印象を与えます。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 広々とした |
| 基本的なステップ | 16px |
| ボタンの半径 | 6px |
| カード半径 | 16px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 96px |
| ページ幅 | 1200px |
AI がResendスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact ( Next.js )上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Neon — 夜のサーバー室。完全な暗闇の中、唯一の光源はデータとユーザーの操作だけだ。
- Discord — ゲームの世界はポップアップチャットウィンドウの裏に隠されており、各セクションは独自の照明とキャラクターセットを備えた独立した環境となっている。
- Midjourney — 深海に浮かぶ生物発光端末。知能がASCIIストリームで視覚的に自己生成し、操作系がかすかに光るパターンとして現れる深海世界。
- Wope — Wopeは紫色の地平線インターフェースです。暗い天文台のテーブルから、ガラスの下から紫色の光が差し込んでいる様子を想像してみてください。
- Ori — 真夜中のサーバー室は、真っ暗な空間に白い光が灯り、スイッチが一つだけ入っている。
- Amaterasu — セレスティアル・ターコイズ・サンクチュアリ
- Obsidian — 結晶のような知識の宝庫。明快さと集中力を高めるために設計された、透明で多面的なデジタル空間。そこには、光り輝く紫色の脈が、相互作用の場を彩る。
- Morphic — AIを活用したストーリーテリングのための、暗く映画的なキャンバス。純粋な黒がすべてを吸収し、唯一のアクセントとなる青い脈動と、生成された画像の輝きだけが際立つ。
- Valo — 真夜中のノワール調の天文台――300ptの活字が清潔な黒の背景に浮かび上がり、ターコイズと紫のグラデーションがレーザー光線のように部屋を貫いている。
- JetBrains — 黒曜石上のネオン星雲 – 黒い背景に、深宇宙のイメージのように紫と青のグラデーションが広がり、ホットピンクのネオンと各製品のアイコンの鮮やかな輝きが散りばめられたページ。
- beehiiv — ネオンプラズマを備えた真夜中の天文台
- RainbowKit — ネオンカラーのモダール素材の財布オーガナイザーが黒い虚空に浮かび、青紫色の光が暗闇を突き刺している。