厳選・オープン・無料

Veja

写真を重視したミニマルなエディトリアルデザインシステムを活用する、プレミアムな持続可能シューズブランドです。

01

デザイン DNA

ミニマルなEコマースとハイエンドのエディトリアルストーリーテリングを融合した、プレミアムファッションブランドです。

02

カラー

ハイコントラストの黒と白を用いたモノクロームパレットで、写真に視覚的な豊かさを委ねます。

03

タイポグラフィ

grotesque-sans

• display60px · 700
• body16px · 400

ナビゲーションや主要なCTAテキストには大文字を使用 · Helveticaとsans-serifフォールバックを使用し、厳格なタイポグラフィ階層を維持 · 大きなディスプレイテキストにはタイトな行間を、本文には標準的な間隔を確保

04

余白

インタラクティブ要素やモーダルレイアウトに十分なパディングを確保した、一貫した4pxグリッドを採用しています。

05

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

ボタンやインタラクティブ状態には1pxソリッドボーダーを使用します。

0px 0px 18px 0px rgba(0, 0, 0, 0.2)

06

レイアウト

写真を重視したレイアウトで、中央のモーダルと底部のクッキーバナーの背後に標準的なEコマースグリッドを配置しています。

07

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

ホーバー状態やモーダル表示に対する、不透明度とトランスフォームのトランジション。

インタラクティブ要素に対して、控えめな不透明度またはトランスフォームトランジション。 · 標準的なポインターカーソルとトランジションフィードバック。

08

コンポーネント

• button 最小限のボーダー半径と大文字テキストを備えた矩形ボタンです。
• card 目立つボーダーなしで、プロダクトまたはエディトリアル画像をグリッド表示します。
• chip N/A
• input N/A
• hero フルブリードのシネマティック写真を、プライマリヒーロー要素として使用します。

09

文体と禁止事項

• トーン 静かに自信に満ち、プレミアムで透明性があります。
• 見出し 大胆で大文字、宣言的。
• CTA 明確さのため大文字を使用した、直接的で機能的。

• 鮮やかなアクセントカラーを使用しない — スクリーンショットには黒、白、グレーの厳格なモノクロームパレットが示されています。
• 角丸のピルボタンを使用しない — スクリーンショットには5px以下の小さなボーダー半径を持つ矩形ボタンが示されています。
• 遊び心のある、手書き風、またはセリフ体のフォントを使用しない — スクリーンショットには厳格なHelvetica/grotesque-sansの使用が示されています。
• 複数のテキスト要素を重ねてレイアウトを雑然とさせない — スクリーンショットには大きな写真領域の上に最小限のテキストが示されています。
• 複雑なナビゲーションでブランドアイデンティティを隠さない — スクリーンショットには明確で一貫したロゴ配置が示されています。
• 明るく軽いパステル調の背景を使用しない — スクリーンショットにはハイコントラストのための深い黒と鮮明な白が示されています。
• 避ける: 鮮やかなアクセントカラーの過度な使用
• 避ける: 角丸で遊び心のあるUI要素
• 避ける: 密集した、ごちゃごちゃしたタイポグラフィ

10

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

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

11

System Prompt

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