厳選・オープン・無料

Everafter

スケーラブルでリアルタイムのカスタマーエクスペリエンス管理のための、AIネイティブプラットフォーム。

01

デザイン DNA

顧客成功のための、モダンでプレミアムなB2B SaaSプラットフォーム。

02

カラー

バイビエレントなバイオレットアクセントと、明るいサーフェス用の柔らかなパステルアクセントを備えた、ハイコントラストのダークモード。

03

タイポグラフィ

transitional-serif · humanist-sans

• display56px · 600
• body18px · 400

見出しには、高級感を演出するハイコントラストな過渡期セリフ体（Moret）を使用。 · 本文テキストには、明瞭さを追求した幾何学的人文無衬線体（Poppins）を使用。 · ナビゲーションとほとんどのUI要素には、センテンスケースを使用。

04

余白

主要なレイアウトセクション間には、48pxのスペースを一貫して使用。

05

サーフェス (角丸 / 影 / 罫線)

ダークモード要素には1px solid rgba(34,20,55,1)、ライトモードには薄いグレーを使用。

0px 1px 2px rgba(8, 8, 8, 0.08) · 0px 4px 4px rgba(8, 8, 8, 0.08) · 0px 8px 12px rgb(248, 245, 255)

06

レイアウト

十分なホワイトスペースと明確なヒーローセクションを持つ、中央揃えの単一カラムレイアウト。

07

モーションとインタラクション

ホバーステートとページ読み込み時の、滑らかな不透明度トランジション。 · インタラクティブ要素上の微細なスケールトランスフォーム。

ボタンとリンクの、微細な背景色の変化または不透明度の変化。 · 微細なスケールや色の変化による、即座のビジュアルフィードバック。

08

コンポーネント

• button プライマリボタンは、ソリッドバイオレット（#793CFB）背景と白文字のピル型です。セカンダリボタンは白いボーダーのアウトライン形式です。
• card 製品インターフェースを紹介するために使用される、微細なシャドウを持つ角丸長方形カード。
• chip 軽い背景とテキストラベル（例：「Success Plan」）を持つ、小さなピル型タグ。
• input 角丸ボーダーを持つ、クリーンなアウトライン型入力フィールド。
• hero 片側に太字のセリフ書体のタイポグラフィ、もう片側に製品スクリーンショットを配置し、ダークな背景に設定した分割レイアウト。

09

文体と禁止事項

• トーン プロフェッショナルで、自信に満ち、将来志向の。
• 見出し インパクトを与えるためにセリフ書体を使用した、太く断定的なステートメント。
• CTA 直接的で行動を促す（例：「Get a Tailored Walkthrough」）。

• モノスペースフォントは使用しない — スクリーンショットでは見出しにセリフ体、本文にサンセリフ体が使用されている。
• 明るいネオンカラーは使用しない — スクリーンショットでは深いバイオレットアクセント（#793CFB）とパステルアクセントが使用されている。
• シャープな角は使用しない — スクリーンショットではピル型ボタン（radius 999px）と角丸カードが使用されている。
• ダークモード専用のパレットは使用しない — スクリーンショットでは内部UIコンポーネントにホワイト/ライトモードが使用されている。
• 重いドロップシャドウは使用しない — スクリーンショットでは elevate 用に柔らかく拡散されたシャドウが使用されている。
• プライマリ見出しにすべて大文字は使用しない — スクリーンショットではセンテンスケースまたはタイトルケースが使用されている。
• 避ける: 受動態
• 避ける: 過度な専門用語
• 避ける: すべて大文字の見出し

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko