厳選・オープン・無料

Rainbowkit

Web3アプリケーション用のウォレット接続に最適な方法。

01

デザイン DNA

開発者とブロックチェーンウォレットをつなぐ、親しみやすくカラフルな橋。

02

カラー

可視性のための鮮やかな青と紫のアクセントを持つ、暗く高コントラストのベース。

03

タイポグラフィ

humanist-sans · monospace

• display52px · 700
• heading24px · 600
• body16px · 400
• caption13px · 400

すべてのプライマリUIテキストにhumanist-sansを使用 · コードスニペットとバージョン番号にmonospaceを使用 · 見出しのレタースペーシングは締める

04

余白

4px刻みに基づく一貫した縦のリズム。ヒーローセクションには余裕のあるパディングを採用。

05

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

1px solid rgba(245, 248, 255, 0.12)

rgba(0, 0, 0, 0.4) 0px 8px 24px 0px · rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset

06

レイアウト

コンテンツ量の多いセクションには、全幅の暗い背景を持つ、センタリングされた単一カラムレイアウト。

07

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

ホバー状態のための滑らかなtransformとopacityトランジション · より長い背景要素のためのリニアopacityフェード

わずかなtransformスケールとカラー変化 · transformリセットによる即座のフィードバック

08

コンポーネント

• button 青い塗りつぶし背景と白色テキストを持つ、丸みのあるピル形状
• card 繊細なボーダーと内側のパディングを持つ、暗い丸みのあるコンテナ
• chip バージョン番号やラベル用の小さな丸みのあるバッジ
• input コマンドラインスニペット用の、繊細なボーダーを持つ暗い背景
• hero 背景グラデーションと顕著なCTAボタンを持つ、センタリングされた大きなテキスト

09

文体と禁止事項

• トーン 技術的で親しみやすく、自信に満ちた
• 見出し 機能性に関する太字で直接的なステートメント
• CTA 'ドキュメントを見る'や'ウォレットを接続する'のような明確でアクション指向の動詞

• ライトテーマを使用しない — スクリーンショットは厳格なダークモードインターフェースを示している。
• シャープなコーナーを使用しない — スクリーンショットは主に丸みのある要素とピル形状を示している。
• 単一のフラットカラーを使用しない — スクリーンショットは鮮やかな青と紫のグラデーションを示している。
• 広く大きく線の高さを使用しない — スクリーンショットは締まったコンパクトな縦の間隔を示している。
• セリフフォントを使用しない — スクリーンショットはすべてのプライマリUIテキストにhumanist-sansを示している。
• 小さく窮屈なボタンを使用しない — スクリーンショットは大きくパディングの十分なインタラクティブ要素を示している。
• 避ける: 過度にコーポレートまたはフォーマルな言葉遣いを避ける
• 避ける: ヒーローセクションで不要な専門用語を避ける
• 避ける: インターフェースにオプションを詰め込みすぎない

10

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

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

11

System Prompt

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