厳選・オープン・無料

Everlane

ニュートラルなパレットで、高品質の写真とタイポグラフィに焦点を当てた、クリーンでミニマルな美学。

01

デザイン DNA

本質的な衣類のキュレーションされたギャラリー

02

カラー

写真が主たる視覚的関心を提供するニュートラルパレット。

03

タイポグラフィ

grotesque-sans · monospace

• display56px · 400
• heading24px · 400
• body16px · 400
• small12px · 400

すべてのプライマリテキストは大文字で、十分な文字間隔を設けます。

04

余白

スペーシングに4pxの基本単位を一貫して使用します。

05

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

最小限で、主に1pxの実線ボーダーを控えめな区切りに使用します。

rgba(0, 0, 0, 0.15) 0px 4px 20px 0px

06

レイアウト

豊かなホワイトスペースを備えたグリッドベースのレイアウト。

07

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

hover状態のための控えめなオペシティトランジション · インタラクティブ要素のためのフォントサイズトランジション

テキストおよび画像要素の控えめなオペシティ低減。 · インタラクティブ要素における標準ポインターカーソル。

08

コンポーネント

• button 大文字テキストと十分な文字間隔を備えた、ミニマルなテキストベースのボタン。
• card クリーンな写真とその下のミニマルなタイポグラフィを備えたシンプルな長方形カード。
• chip 大文字テキストを備えたシンプルなテキストチップ。
• input 控えめなボトムボーダーを備えたミニマルなテキストインプット。
• hero オーバーレイテキストとアクションコールを備えたフルワイドのフォトジェニックヒーロー。

09

文体と禁止事項

• トーン 自信に満ち、ミニマルで、率直。
• 見出し 短く、力強い、全て大文字のステートメント。
• CTA アクション指向の大文字テキスト。

• 装飾的なフォントやスクリプトフォントを使用しない — スクリーンショットはクリーンで幾何学的なグルテスクサンセリフを示しています。
• カードやコンテナに角丸を使用しない — スクリーンショットはシャープで長方形のエッジを示しています。
• 明るく彩度の高的なアクセントカラーを使用しない — スクリーンショットは黒、白、グレーの厳格なニュートラルパレットを使用しています。
• 重いドロップシャドウや複雑な3D効果を使用しない — スクリーンショットは最小限で控えめなシャドウを示しています。
• 本文テキストにセンタリングを使用しない — スクリーンショットは左揃え、または見出しのみのセンタリングを示しています。
• ナビゲーションやセクション見出しに小文字を使用しない — スクリーンショットは広い文字間隔を備えた全て大文字のテキストを示しています。
• 避ける: 装飾的なフォントの使用を避ける。
• 避ける: UI内に明るく彩度の高いカラーを使用しない。
• 避ける: 雑然としたレイアウトや過度な視覚要素を避ける。

10

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

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

11

System Prompt

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