厳選・オープン・無料
Empower Me
巨大なタイポグラフィとフォトグラフィックストーリーテリングを駆使し、クレジットと金融の可能性を解き明かす、大胆でハイコントラストなフィンテックプラットフォーム。
FintechBold TypographyDark ModeCleanApp UI
01
デザイン DNA
大胆エンパワリングアクセシブルモダン信頼性
鮮やかな黄色のポケットチーフを添えた、スタイリッシュなダークスーツを着た、大胆でエンパワリングなファイナンシャルアドバイザー。
02
カラー
#E4E24EAccent
#FFFFFFInk
#171616BG
#F7F5EFBG soft
#FDFDF6BG quiet
#64635CMuted
rgba(16,15,15,1.0)Line
プライマリアクションへ視線を誘引するために、ネオンに近い鮮やかなシャトーズのアクセントを1つ配置した、ハイコントラストダークモード。
03
タイポグラフィ
geometric-sans · grotesque-sans
- display
96px · 900 - heading
48px · 900 - body
16px · 400
大きな見出しにはタイトな文字間隔（-0.6px～-1px）を使用 · ナビゲーションと小さなラベルには大文字トレッキング（+1.2px）を使用 · 巨大なジオメトリックディスプレイタイプと、よりクリーンなgrotesque-sansをUI要素に組み合わせる
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
主要コンテンツブロックの周りやヒーローセクション内部には、ゆとりのあるpaddingを配置。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 16px
lg · 24px
pill · 99999px
ダークヒーローとライトセクションを分ける、薄くハイコントラストなボーダー（2px）。
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
フルワイドのダークヒーローセクションから、3カラムのフィーチャーグリッドを備えた、中央揃えのライトコンテンツエリアへと移行。
07
モーションとインタラクション
150msmicro
300mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hoverやfocus状態でのスムーズなカラー遷移
ボタンやリンクでの背景色のスムーズな遷移。 · 微細なイージングによる即座のレスポンス。
08
コンポーネント
- button 鮮やかなシャトーズ背景にダーク文字、大胆な大文字トレッキングを持つ、ピル-shaped（カプセル型）。
- card ゆとりのある内部paddingと、遊び心のあるハンドドローントラックスタイルを備えた、ライトで角丸のカード。
- chip アイコンとテキストを備えた、ピル-shaped（カプセル型）の小さなフローティングバッジ。
- hero 巨大な白色見出しと、小さなデータバッジを添えた非対称なフォトグラフィックポートレートのコラージージが浮かぶ、巨大なダークセクション。
09
文体と禁止事項
- トーン エンパワリングで直接的、かつアクセシブル。複雑な金融概念を、シンプルで親しみやすい言葉に分解。
- 見出し 極めて大胆で簡潔、メリット重視。ブランドニングに™（商標）記号をよく使用。
- CTA 鮮やかなカラーで大文字とした、強くアクション指向の命令形動詞。
- 繊細でデリケートなフォントを使用しない — スクリーンショットでは巨大で太字のタイポグラフィが使われています。
- 複雑で多色のパレットを使用しない — スクリーンショットではダーク/白/シャトーズという厳格な配色が使われています。
- 鋭角で四角い角を使用しない — スクリーンショットでは角が大きく丸まれた、ピル-shaped（カプセル型）のボタンやカードが使われています。
- 小さく控えめなCTAを使用しない — スクリーンショットでは大きくハイコントラストの黄色いボタンが使われています。
- 密集したテキスト多めのレイアウトを使用しない — スクリーンショットではゆとりのあるホワイトスペースと大きな画像が使われています。
- 本文にセリフフォントを使用しない — スクリーンショットでは太字サンセリフのディスプレイフォントとgrotesque-sansの本文フォントが排他的に使われています。
- 避ける: 過度に技術的な専門用語
- 避ける: 受動態
- 避ける: 一般的な企業向け表現
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
これは、ダークモードの美学を活用し、ユーザーの注目をプライマリアクションに誘引するために、1つの鮮やかなシャトーズのアクセントカラー（#E4E24E）を配置したフィンテックプラットフォームのデザインシステムです。タイポグラフィは、本文にはよりクリーンなgrotesque-sansと組み合わせた、巨大で太字のジオメトリックサンセリフの見出しが特徴です。レイアウトは、ゆとりのあるスペーシング、ハイコントラストなセクション間の遷移、そしてリアルな写真と遊び心のある丸みのあるUIコンポーネントの組み合わせを特徴としています。重要な注意点：複数の競合するアクセントカラーを使用しないこと；見出しに繊細でデリケートなタイプフェースを使用しないこと；ボタンやカードに鋭角で四角い角を使用しないこと。このシステムは、直接的な言語とインパクトのある視覚的階層を通じて、大胆でエンパワリングなトーンを優先します。
en · zh-CN · zh-TW · ja · ko