厳選・オープン・無料
Family
誰もがEthereumを親しみやすく、シンプルに感じられるようにデザインされた、風変わりでキャラクター重視のクリプトウォレット。
cryptowalletmotion
01
デザイン DNA
playfulapproachabletrustinnovationclarity
複雑な暗号通貨の海をnavigateする友好的な仲間
02
カラー
#0080e8Accent
#474645Ink
#7a7876Ink soft
#ffffffBG
#f2f0ecBG soft
#a0a0a0Muted
rgba(71, 70, 69, 0.2)Line
活気のある、個性あるアクセントで区切られたクリーンなホワイトスペース
03
タイポグラフィ
geometric-sans · humanist-sans
- display
64px · 500 - heading-2
44px · 500 - body
16px · 400 - caption
14px · 400
ディスプレイテキストはタイトなline-height (1.05)とネガティブな文字間隔 (-1.5px)を使用 · 本文テキストは読みやすさのために快適な1.6のline-heightを維持 · すべてのテキストはfont-weight 400-500の範囲を使用し、太字のウェイトは使用しない · 一貫性のために、すべてのサイズで文字間隔はわずかにネガティブ
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
96px
一貫した8pxのベースと、セクション間に十分なホワイトスペース
05
サーフェス (角丸 / 影 / 罫線)
sm · 6px
md · 10px
lg · 16px
pill · 40px
深みを出すためにインセットシャドウを使用した微細な1pxボーダー
0px 0px 0px 1px inset rgba(242, 240, 236, 1) · 0px 3px 16px rgba(0, 0, 0, 0.1) · 0px 0px 24px rgba(0, 0, 0, 0.15)
06
レイアウト
1200container
12columns
24pxgutter
768 / 1024breakpoints
十分なパディングを持つ中央揃えのシングルカラムレイアウト
07
モーションとインタラクション
220msmicro
400mssmall
1000msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
ホバーステートのためのトランスフォームと不透明度のトランジション · ページ遷移のための滑らかなcubic-bezierイージング · 0.2秒の期間のマイクロインタラクション
インタラクティブ要素上の微細な色の変化とわずかなトランスフォーム · トランスフォームスケールによる即座のビジュアルフィードバック
08
コンポーネント
- button 高コントラストのピル型ボタン。プライマリはテキストがホワイトのブラック、セカンダリはボーダー付きのゴースト
- card 明るい背景上の微細なインセットボーダーシャドウを持つ柔らかな角丸 (10px)
- chip アイコンプリフィックスと控えめなテキストカラーを持つ小さなピル型ラベル
- input デフォルトでは目立つボーダーがなく、微細な背景を持つミニマルなデザイン
- hero テキストを囲む遊び心のある浮遊イラストを持つ、中央揃えのヘッドライン
09
文体と禁止事項
- トーン フレンドリーで親しみやすく、安心感を与える
- 見出し 遊び心のあるひねりを加えた、短く自信のあるステートメント
- CTA 直接的でアクション重視（「Get Started」、「Watch the Video」など）
- ダークバックグラウンドを使用しない — スクリーンショットは主にホワイト (#ffffff) とライトウォーム (#f2f0ec) のサーフェス
- シャープな角を使用しない — スクリーンショットは丸みのあるボタン (40pxピル半径) とカード (10px半径) を示しています
- 太字のフォントウェイトを使用しない — スクリーンショットはウェイト400-500のみ、700以上はなし
- 詰まったレイアウトを使用しない — スクリーンショットは主要セクション間に十分なホワイトスペース (64-96px) を示しています
- アグレッシブなシャドウを使用しない — スクリーンショットは微細なインセットボーダーと柔らかなドロップシャドウのみ
- 複数のアクセントカラーを同時に使用しない — スクリーンショットはプライマリアクションカラーとしてブラック、セカンダリ装飾としてカラフルなイラストを使用
- 避ける: 技術用語
- 避ける: -formal corporate language
- 避ける: 感嘆符
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
approachableなEthereumクリプトウォレット、Familyのためのデザインシステム。クリーンなホワイト (#ffffff) ベースに、カードとサーフェスにはウォームオフホワイト (#f2f0ec) を使用。プライマリテキストはウォームグレー (#474645)、主要アクセントにはブルー (#0080e8) を使用。タイポグラフィは、ディスプレイ用に幾何学サンセリフ (タイトなトラッキング、500ウェイト) 、本文用にヒューマニストサンセリフ (400ウェイト) を採用。ボタンはピル型で40pxのボーダー半径。重要な注意点：ダークバックグラウンドは絶対に使用しない（サイトはライトテーマ）、シャープな角は回避する（すべて10-40pxの半径を使用）、太字フォントウェイトはスキップする（最大500）、十分なホワイトスペースを維持する（64-96pxの間隔）、微細なシャドウのみ使用する（ハードドロップシャドウは不可）。デザインは、クリプトを威圧的ではなくフレンドリーでアクセスしやすくするために、遊び心のあるイラストとキャラクターを強調しています。
en · zh-CN · zh-TW · ja · ko