厳選・オープン・無料

Genesis

シネマティックな暗色美学と鋭い幾何学的精度を持つプレミアム自動車ブランド

01

デザイン DNA

シネマティックなライティングを備えた高級自動車ショールーム

02

カラー

ドラマチックなライティング効果を備えた高コントラストモノクロパレット

03

タイポグラフィ

grotesque-sans · humanist-sans

• display40px · 400
• h140px · 400
• h224px · 400
• body16px · 400
• caption14px · 400

見出しはすべて大文字で、広い字間隔を採用 · 本文はゆったりとした行間を維持 · フォントウェイトは全体を通してライトからミディアム

04

余白

主なコンテンツ間隔として24pxを用いたゆったりとしたスパシング

05

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

暗色の1px solidボーダーを用いた最小限のデザイン

0 0 5px 0 rgb(128, 128, 128) · 0 0 18px 0 rgba(0, 0, 0, 0.2)

06

レイアウト

左揃えのコンテンツオーバーレイを備えたフル幅ヒーロー

07

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

ホバー時の滑らかなカラートランジション · 可視性の変化のための透明度フェード · インタラクティブ要素のトランスフォームアニメーション

0.2s ease-in-outのカラートランジション · 微細なスケールまたは透明度の変化

08

コンポーネント

• button 角丸の最小限アウトライン
• card 画像を前面に出し、オーバーレイでタイポグラフィを配置
• input 最小限の下線付きスタイル
• hero テキストオーバーレイを備えたシネマティックなフルブリードフォトグラフィ

09

文体と禁止事項

• トーン 自信に満ち、向上心をそそる
• 見出し すべての大文字による大胆な宣言
• CTA 洗練された控えめなアクション

• 遊び心のある要素や角丸を使うな — スクリーンショットは鋭い幾何学的精度を示している
• 雑然とした背景を適用するな — スクリーンショットはクリーンな写真中心の焦点を示している
• 複数のアクセントカラーを使うな — スクリーンショットはモノクロパレットを示している
• 狭いレイアウトを作成するな — スクリーンショットはゆったりとした余白とスパシングを示している
• 重いフォントウェイトを使うな — スクリーンショットはライトからミディアムのタイポグラフィを示している
• 装飾的なボーダーを追加するな — スクリーンショットは最小限の1pxボーダーのみを示している
• 角丸のコンテナを使うな — スクリーンショットは全体を通して鋭い角を示している
• 避ける: 過度な技術用語
• 避ける: カジュアルまたは遊び心のある言葉
• 避ける: 雑然としたレイアウト
• 避ける: 明るい飽和色
• 避ける: 装飾的な要素

10

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

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

11

System Prompt

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