厳選・オープン・無料

Light

オンチェーンインターネット時代のための開発者ビルディングブロック。

01

デザイン DNA

次世代のブロックチェーンアプリケーションを構築するためのモダントールキット。

02

カラー

プライマリアクションに鮮やかな紫のアクセントを使用した、クリーンでハイコントラストなインターフェース。

03

タイポグラフィ

grotesque-sans · humanist-sans · monospace

• display52px · 700
• headline32px · 700
• body16px · 400
• label14px · 500

見出しには太字のウェイトを使用し、強い階層を確立する。 · 大きなディスプレイテキストには tighten された行間を維持する。 · 本文テキストは、適度なline-heightで可読性を確保する。

04

余白

垂直方向のリズムとコンポーネントのpaddingに、モジュラースケールを用いた一貫した4pxの基本単位。

05

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

1px solid rgba(0, 0, 0, 0.05)

0 2px 1px 0 rgba(0, 0, 0, 0.03) · 0 1px 0 0 rgba(0, 0, 0, 0.05) · 0 0 24px 0 rgba(128, 128, 128, 0.1)

06

レイアウト

フル幅コンテナの中央揃えヒーローから、機能セクションのためのマルチカラムグリッドへと移行する。

07

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

hover状態における控えめなopacityとtransformのトランジション。 · すべてのインタラクティブ要素に対する滑らかなイージング。

インタラクティブ要素における控えめな色の変化やopacityの調整。 · 軽微なスケールや色の変化による即座のビジュアルフィードバック。

08

コンポーネント

• button プライマリボタンは紫色の背景を持つピル型。セカンダリボタンはテキスト付きのghost/outlineスタイル。
• card 機能のハイライトに使用する、柔らかい影と角丸を持つ白いカード。
• chip カテゴリに使用する、背景色とテキストを持つ角丸ラベル。
• input 控えめなボーダーと角丸を持つテキスト入力。
• hero 大きなタイポグラフィと目立つCTAボタンを備えた、フル幅の中央揃えセクション。

09

文体と禁止事項

• トーン プロフェッショナルで、テクニカルかつ将来志向。
• 見出し 太字で明確、かつアクション指向のメッセージ。
• CTA 「Start building」や「Read docs」のような動詞を使用した、直接的で前向きな呼びかけ。

• 見出しに細いまたはライトなフォントウェイトを使用しない — スクリーンショットでは太字ウェイト700が使用されている。
• 幅広で箱型のコンテナを使用しない — スクリーンショットでは明確なマージンを持つ中央揃えコンテンツエリアが使用されている。
• プライマリ要素に鋭い角を使用しない — スクリーンショットでは角丸（ピル型ボタン、角丸カード）が使用されている。
• メインページにダーク背景を使用しない — スクリーンショットでは明るいグレー/オフホワイトの背景が使用されている。
• プライマリCTAに控えめまたはくすんだアクセントカラーを使用しない — スクリーンショットでは鮮やかな高彩度の紫色が使用されている。
• プライマリ背景に複雑な多色グラデーションを使用しない — スクリーンショットではクリーンな単色セクションが使用されている。
• 避ける: カジュアルな言葉遣い
• 避ける: 説明のない過度な専門用語
• 避ける: 受動態

10

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

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

11

System Prompt

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