厳選・オープン・無料

Aave

銀行アプリの利用と同じくらい簡単に、収益を生み出せる分散型貯蓄プラットフォーム。

01

デザイン DNA

アクセシビリティと信頼に焦点を当てた、洗練されたモダン・フィンテックの銀行支店を分散型に適応させたもの。

02

カラー

柔らかなオフホワイト系のサーフェスに、高コントラストのインク・ブラックを配し、プライマリ・アクションには単一の鮮やかなラベンダー色を使用。

03

タイポグラフィ

geometric-sans · mono

• display72px · 500
• headline40px · 500
• body16px · 400
• caption14px · 500

大きなディスプレイ・テキストには、タイトな文字間隔（-3.6px）を使用。 · プライマリ本文はウェイト400。 · 見出しはウェイト500を使用。

04

余白

8pxの基本グリッド。セクション間には十分なパディングを設けた、垂直方向のスタック。

05

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

rgba(0, 0, 0, 0.06)による、非常に微細な1pxボーダー。

0 6px 20px rgba(0, 0, 0, 0.05) · 0 0 0 1px rgba(0, 0, 0, 0.06)

06

レイアウト

中央揃えの単一カラム・ヒーロー。スクロール以下のフィーチャーカードは2カラムグリッドに移行。

07

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

インタラクティブ要素への微細なカラー・不透明度のトランジション（0.15s）。 · スケールや動きのためのTransformトランジション（0.2s ease-out）。

ボタンやリンクに、微細な背景色や不透明度のシフト。 · 即座のフィードバック。おそらく微小なスケールや不透明度の縮小。

08

コンポーネント

• button ハイコントラストのプライマリボタン（ラベンダー背景、白テキスト）と、サブティルなセカンダリボタン（ライトラベンダー背景、パープルテキスト）。完全に丸みを帯びたピル形状。
• card 非常に微細な背景と最小限のボーダーを備えた、柔らかくわずかに丸みを帯びたカード（角丸12-20px）。
• chip 主要な装飾要素ではないが、タグ類の要素には控えめなラベンダー背景を使用。
• input 提供されたスクリーンショットには表示されていません。
• hero 72pxの巨大なディスプレイ・フォント、説明的なサブタイトル、並列に配置された2つのCTAを備えた、テキスト中心の中央揃えヒーローセクション。

09

文体と禁止事項

• トーン 自信に満ち、明瞭で、わずかに技術的だが、非常にアクセシブル。
• 見出し 短く、鋭く、メリットを強調する陳述（「誰でもできる貯蓄」「最高の構築」など）。
• CTA アクション指向でプラットフォーム固有の表現（「iOS版をダウンロード」「Aaveを使用」など）。

• セリフフォントは使用しない。スクリーンショットでは、全テキストに幾何学的なサンセリフ体が使用されている。
• ダークモードをデフォルトとしない。スクリーンショットでは、主にホワイトとライトグレーのインターフェースが示されている。
• プライマリ要素にシャープな角を使用しない。スクリーンショットでは、大きく丸みを帯びたピル形状と柔らかな角丸が使用されている。
• アクセントにハイコントラストな鮮やかな赤や緑を使用しない。スクリーンショットでは、控えめなラベンダーがプライマリアクセントとして使用されている。
• 全テキストを中央揃えにしない。スクリーンショットでは、本文やフィーチャーの説明に左揃えが使用されている。
• 奥行きを出すためにドロップシャドウを使用しない。スクリーンショットでは、分離のために非常に微細で不透明度の低いボーダーまたはフラットなカラー差が使用されている。
• 避ける: 文脈なしの過度に専門的な金融用語は避ける。
• 避ける: 不要なアイコンやボーダーでインターフェースを雑然とさせるのは避ける。
• 避ける: アグレッシブな配色やネオンカラーのパレットは避ける。

10

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

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

11

System Prompt

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