厳選・オープン・無料
Cosmos Network
相互運用可能で主権的な金融システム構築のための、エンタープライズグレードのブロックチェーンソリューション。
FintechDeveloper ToolsSaaSDark ModeBold Typography
01
デザイン DNA
ブロックチェーンエンタープライズ台帳主権相互運用性
グローバル金融インフラのための、安全で高度なテクノロジーのコマンドセンター。
02
カラー
#22E6A8Accent
#FFFFFFInk
#808080Ink soft
#000000BG
#181818BG soft
rgba(128,128,128,0.5)Line
ミントグリーンのアクセントを1つ使用した、ハイコントラストのダークモード。深みのある黒に鮮やかな白テキストを配置し、二次情報には控えめなグレーを使用。
03
タイポグラフィ
geometric-sans · monospace
- display
56px · 400 - h2
40px · 400 - body
16px · 400
クリーンでモダン、非常に可読性の高い階層を維持するため、全テキストに「The Future」（geometric-sans）を使用。 · 軽量でプロフェッショナルな印象のため、フォントウェイトを400に統一。 · より一体感がありインパクトのあるビジュアルブロックを作るため、大きなディスプレイテキストには字間を詰める。
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
96px
要素間の均一な間隔を保証する、一貫した4pxベースのグリッドシステム。主要なセクションやレイアウトコンテナにはより大きな倍数を使用。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 20px
pill · 9999px
機能的で最小限。主に、ナビゲーションやボタンの構造定義に1pxボーダーを使用。
なし
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
2カラム分割（テキスト左、イラスト右）の全幅ヒーローに続き、水平カード付きの中央揃え1カラムコンテンツセクション。
07
モーションとインタラクション
150msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
インタラクティブ要素のbackground-color、border-color、fillに対するスムーズなトランジション。 · ボタンやリンクのhover状態に対する、Transformベースのアニメーション（スケール、トランスレート）。 · 要素のフェードイン・フェードアウトの不透明度トランジション。
ボタンやナビゲーションリンクなどのインタラクティブ要素に対する、微細な背景色の変化とTransformベースのスケーリング。 · 微小なトランスフォーム（スケール）と色のトランジションによる、即時フィードバック。
08
コンポーネント
- button 白背景に黒テキストのピル型ボタン。小さな「+」アイコンと、控えめな角の丸みを備える。
- card 柔らかいオフホワイトの背景、丸みのある角、明確な左から右へのフロー（アイコン、タイトル、説明、バッジ）を持つ水平カード。
- chip 分類用の、明るいグレー背景に濃いテキストの、小さなピル型タグ。
- input 明確なタイポグラフィと十分なpaddingに焦点を当てた、シンプルなスタイルのテキストフィールド。
- hero 左側に大規模なタイポグラフィ、右側にオーバーラップする線やラベルを持つ詳細な、ドット付き地球儀イラストレーションを配置した、インパクトのあるダークセクション。
09
文体と禁止事項
- トーン 権威があり、専門的で、将来志向。セキュリティ、スケーラビリティ、グローバルな影響力に重点を置く。
- 見出し 価値提案を明確に説明する、太字で大規模かつ宣言的な声明。
- CTA 直接的でアクション指向。「お問い合わせ」など、シンプルなフレーズを目立つピル型ボタン内で使用。
- 明るい、カラフルなグラデーションを使用しない — スクリーンショットは、ミントグリーンのアクセントを1つ持つ、スタイリッシュでハイコントラストのダークテーマを示している。
- 重厚で飾り立てたタイポグラフィを使用しない — スクリーンショットは、一貫したウェイトのクリーンで幾何学的なsans-serifフォントを示している。
- ボタンやカードに鋭い角を使用しない — スクリーンショットは、柔らかく丸みのあるピル型要素を示している。
- ヒーローに写真の背景を使用しない — スクリーンショットは、スタイリッシュで技術的なドット付き地球儀のイラストレーションを示している。
- 過度なドロップシャドウや3D効果を使用しない — スクリーンショットは、最小限の奥行きを持つフラットで表面ベースのデザインを示している。
- 狭く窮屈な間隔を使用しない — スクリーンショットは、豊かなpaddingと要素間の明確な分離を示している。
- 多様な色を使用しない — スクリーンショットは、黒、白、グレー、アクセントカラー1色の限定されたパレットを示している。
- 避ける: 過度にカジュアルな言葉やスラングを避ける。
- 避ける: 感嘆符やハイプを煽る形容詞の過度な使用を避ける。
- 避ける: 明確な説明のない複雑な専門用語を避ける。
- 避ける: コアメッセージから気を散らす、ごちゃごちゃしたレイアウトを避ける。
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（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
ブロックチェーン企業のための洗練されたエンタープライズグレードのテクノロジーウェブサイトをデザインする。深みのある黒（#000000）の背景に、ハイコントラストの白（#FFFFFF）テキストと二次要素には控えめなグレー（#808080）を使用。主要なハイライトには、単一の鮮やかなミントグリーン（#22E6A8）のアクセントを組み込む。「The Future」のようなクリーンで幾何学的なsans-serifフォントを、きびきびとしたプロフェッショナルなスケールで使用。厳密な4pxの間隔グリッドを維持し、柔らかくピル型のコンポーネントを使用。レイアウトは、技術的なイラストレーションを備えた強力な2カラムヒーローと、水平カード付きの明確な1カラムコンテンツセクションを特徴とする。すべてのインタラクションは、微細な0.2秒のトランジションでスムーズにする。明確さ、権威、プレミアムで未来的な美学に焦点を当てる。重いシャドウ、鋭い角、ごちゃごちゃしたカラフルなパレットは決して使用しない。
en · zh-CN · zh-TW · ja · ko