厳選・オープン・無料

Represent

強力なタイポグラフィとフルブリードフォトグラフィーに焦点を当てた、ミニマルでboldなファッションエディトリアルサイト。

01

デザイン DNA

クリーンでエディトリアルな雑誌として提示される、ハイエンドストリートウェアのルックブック。

02

カラー

強調のための単一の深い赤アクセントを含む、ハイコントラストのモノクローム。

03

タイポグラフィ

grotesque-sans

• display48px · 700
• h232px · 600
• body16px · 400
• caption12px · 400

ナビゲーション、タグ、およびセカンダリUI要素には大文字を使用します。 · 大きなディスプレイタイポグラフィには、タイトなトラッキングを維持します。

04

余白

タイトなUI要素のために4pxのマイクロステップを含む8pxベース。

05

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

1px solid rgba(0,0,0,0.1)

rgba(0, 0, 0, 0.3) 0px 0px 24px 0px

06

レイアウト

オーバーレイテキストを含むフルブリードフォトグラフィーから、製品リスト用のクリーンなグリッドに移行。

07

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

hoverおよびscrollでの滑らかな不透明度とトランスフォームの遷移。 · イメージ遷移用の控えめなフェーディング。

インタラクティブ要素での控えめな不透明度の変化または軽微なスケーリング。 · トランジション効果による即座の視覚フィードバック。

08

コンポーネント

• button 白の大文字テキストを含む、純黒の長方形ボタン。ピル型のバリアントもたまに使用します。
• card ボーダーなしのクリーンな製品カードで、イメージに焦点を当てます。
• chip フィルタリング用の太字の大文字テキストチップ。
• input 1pxのsolidボトムボーダーを備えたミニマルなインプット。
• hero オーバーレイタイポグラフィを含む、フルスクリーンで高インパクトのフォトジェニックなヒーロー。

09

文体と禁止事項

• トーン ミニマルで、直接的で、プレミアム。
• 見出し 太字、大文字、コンデンス。
• CTA アクション重視、大文字、非常に視認性が高い。

• 装飾的なフォントを使用しないこと — スクリーンショットは、太字のグロテスクサンセリフへの厳格な依存を示しています。
• プライマリUI要素に角丸を使用しないこと — スクリーンショットは、シャープで長方形のエッジを示しています。
• マルチカラーパレットを使用しないこと — スクリーンショットは、単一の赤アクセントを含む厳格なモノクロームベースを示しています。
• カードに控えめなドロップシャドウを使用しないこと — スクリーンショットは、フラットなサーフェスまたは非常に重く特定のシャドウを示しています。
• プライマリナビゲーションに混在するケースを使用しないこと — スクリーンショットは、UIラベルに大文字のみを使用しています。
• ソフトでパステルの背景を使用しないこと — スクリーンショットは、真っ白または薄いグレー（#F7F7F7）のベースを示しています。
• 避ける: 筆記体フォント
• 避ける: 派手なグラデーション
• 避ける: ごちゃごちゃしたレイアウト

10

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

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

11

System Prompt

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