NerdWallet は深緑のグラデーションバンドで編集記事と比較ツールをつなぎます。記事ページは #008254 のヒーローバンドで始まり、その下はすぐに白と #f7f7f7 の表の世界へ落ちます。ミントの階調（#effcf8、#e3faf2、#b7ecda）が大きな面を担って影の代わりになり、ボタンの角丸は 2px まで。Gotham は本文 300、見出し 700 で、サイズではなくウェイトの差で階層をつくります。
NerdWalletフィンテックと暗号資産
プロンプトテンプレート
基本テンプレート
Design a NerdWallet-inspired interface. - A deep spruce (#008254) gradient hero band opens every editorial page, then the layout drops immediately to white; - A three-step mint ladder (#effcf8, #e3faf2, #b7ecda) carries large panels and media frames instead of shadows; - Near-square geometry: filled buttons at 2px radius, cards at 8px, inputs at 0; - Gotham body at weight 300 against 700 headings -- hierarchy from weight contrast, not size; - Comparison rows ruled by a single #ebebec hairline with no vertical dividers; - Lime (#e8fdac, #9ae600) only for emphasis that must survive on green. Colors: #008254, #f7f7f7, #effcf8, #e8fdac, #000000 with #008254 accent. Typography: Gotham and GothamDisplay, 300/700.
バリエーションプロンプト
📱 モバイル
Design a mobile finance app with NerdWallet aesthetics. White canvas, #008254 actions, mint panels and stacked comparison cards. Trustworthy, touch-friendly.
💻 Web
Design a web app with NerdWallet style. Green hero band, hairline rate tables, mint callouts and 2px button radii. Editorial and utilitarian.
📊 ダッシュボード
Design a dashboard with NerdWallet design language. #008254 metrics, mint section panels, weight-300 body and ruled comparison rows. Dense but calm.
📄 ランディングページ
Design a landing page with NerdWallet visual identity. #008254 gradient band, lime emphasis, expert-tip panel and square CTA blocks. Conversion-focused, credible.
使用例
NerdWallet 貯蓄比較ページ
WebBuild a savings comparison page with NerdWallet design language and #008254 actions.
NerdWallet 金利ダッシュボード
ダッシュボードCreate a rate dashboard using NerdWallet style with mint panels and hairline comparison rows.
✅ 適した用途
- 個人向け家計・金融比較ツール
- クレジットカードやローンの金利ページ
- 信頼感が求められる金融編集コンテンツ
❌ 適さない用途
- 娯楽色の強いアプリ
- 角丸を多用する柔らかいライフスタイルブランド
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。