厳選・オープン・無料
Uniswap
クリーンで高いコントラストのデザインを持つ、遊び心のあるアクセシブルな分散型取引プラットフォーム。
cryptodefi
01
デザイン DNA
分散型アクセシブル遊び心透明性金融
現代的な銀行アプリのような親しみやすさを持ちつつ、クリプトネイティブな美学を感じさせる、クリーンでフレンドリーなfintechインターフェースです。
02
カラー
#FF37C7Accent
#131313Ink
rgba(19, 19, 19, 0.63)Ink soft
#FFFFFFBG
#F9F9F9BG soft
rgba(19, 19, 19, 0.08)BG quiet
#222222Muted
rgba(19, 19, 19, 0.12)Line
鮮やかなマゼンタのアクセントと高いコントラストのテキストを配置した、明るくクリーンな基盤色。
03
タイポグラフィ
Humanist Sans-Serif
- display
52px · 500 - headline
36px · 500 - body
16px · 485 - label
14px · 485 - small
18px · 485
すべてのテキストにシステムフォントスタック（Basel, -apple-system, system-ui, sans-serif）を使用します。 · ディスプレイ見出しのサイズを52px、ウェイトを500に設定します。 · 本文テキストのサイズを16px、ウェイトを485に設定します。 · 大きなディスプレイテキストには、-1pxのネガティブレタースペーシングを使用します。
04
余白
4px
8px
12px
16px
20px
24px
32px
48px
64px
全体を通して4pxのベースグリッドを使用し、8px、16px、24pxの一般的なギャップを採用しています。
05
サーフェス (角丸 / 影 / 罫線)
sm · 12px
md · 20px
lg · 32px
pill · 999999px
1px solid rgba(19, 19, 19, 0.12)
rgba(19, 19, 19, 0.04) 0px 6px 12px -3px · rgba(19, 19, 19, 0.03) 0px 2px 5px -2px
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
デスクトップでは中央揃えのシングルカラムレイアウト、モバイルではフル幅のレイアウトに拡張します。
07
モーションとインタラクション
100msmicro
125mssmall
400msmedium
cubic-bezier(0.34, 1.56, 0.64, 1)easing
micro-interactionには0.1秒のease-in-out遷移を使用します。 · トランスフォームや不透明度の変化には0.08秒のease-in-out遷移を使用します。 · インタラクティブ要素には0.4秒のcubic-bezier(0.34, 1.56, 0.64, 1)スプリングアニメーションを使用します。
インタラクティブ要素に対する、微細な色の変化や背景の不透明度の変化。 · ボタンやクリック可能なカードに対する、わずかなスケールやトランスフォーム効果。
08
コンポーネント
- button 32pxのボーダーラディウスを持ち、マゼンタのアクセントカラーで塗りつぶされた、ピル型のボタンです。
- card 20pxのボーダーラディウス、12pxのパディングを持ち、微細なシャドウまたは薄いグレーの背景を持つカードです。
- chip カテゴリに合わせたテキスト色を持つ、明るい背景の小型ピル型バッジです。
- input 12pxのボーダーラディウスと薄いグレーの背景を持つ、大型で角の丸い入力フィールドです。
- hero 大きな52pxの見出しとメインのスワップウィジェットをフィーチャーした、目立つ中央揃えのヒーローセクションです。
09
文体と禁止事項
- トーン フレンドリーでアクセシブルかつ直接的。複雑なDeFiの概念を親しみやすく伝えます。
- 見出し 大きく、太く、明確。しばしば1つの力強いセンテンスで構成されます。
- CTA 行動を促し、目立つ。注意を引くためにマゼンタのアクセントカラーを使用します。
- 角の鋭い小さなボーダーラディウスは使用しないでください。スクリーンショットでは、カードやボタンに12pxから32pxのradiusが使用されています。
- 主なキャンバスに暗い背景を使用しないでください。スクリーンショットでは、主に白（#FFFFFF）と薄いグレー（#F9F9F9）のパレットが使用されています。
- インターフェース全体にハイコントラストのダークモードを使用しないでください。スクリーンショットでは、高いコントラストのテキストを持つライトテーマが使用されています。
- 見出しに細く軽いタイポグラフィを使用しないでください。スクリーンショットでは、52pxの見出しに500ウェイトが使用されています。
- 幅広い範囲のプライマリカラーを使用しないでください。スクリーンショットでは、単一の支配的なマゼンタ（#FF37C7）のアクセントが使用されています。
- 重厚なボーダーを持つ、硬直したグリッド重視のレイアウトを使用しないでください。スクリーンショットでは、分離にソフトなシャドウと角丸が使用されています。
- 避ける: 専門用語の乱用
- 避ける: アグレッシブなマーケティングトーン
- 避ける: 詰め込まれたテキストブロック
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
これはUniswap、分散型金融（DeFi）プラットフォームです。デザインはクリーンでアクセシブルで、白（#FFFFFF）と薄いグレー（#F9F9F9）の背景を持つライトテーマを採用しています。プライマリアクセントは鮮やかなマゼンタ（#FF37C7）です。タイポグラフィにはヒューマニストサンセリフ（Basel）が使用され、ディスプレイ見出しのウェイトは500、サイズは52pxです。重要な禁止事項：1）メインUIに暗い背景を使用しない。2）角を鋭くしない；12pxから32pxの十分なボーダーラディウスを使用する。3）見出しに細いフォントを使用しない；ウェイトは500を維持する。全体的な印象はフレンドリーで遊び心があり、コーポレート的または重苦しいものではありません。
en · zh-CN · zh-TW · ja · ko