厳選・オープン・無料

Victoiredouy

濃い黒の背景に巨大なディスプレイ見出しを配置した、スタイリッシュでタイポグラフィベースのポートフォリオまたはエディトリアルサイト。

01

デザイン DNA

オーバーサイズでコンデンスされたディスプレイタイプを用いた、ハイコントラストの白黒エディトリアルマガジン。

02

カラー

最大限のコントラストとエディトリアルインパクトのために、ほぼ黒の背景とほぼ白のテキストを使用した厳格なモノクロームパレット。

03

タイポグラフィ

condensed-grotesque-sans · monospaced

• display177px · 400
• heading54px · 400
• body15px · 400

本文テキストとナビゲーションには Space Mono を使用します。 · 巨大なディスプレイ見出しにはコンデンスされたグロテスクサンセリフを使用します。 · 大きなディスプレイテキストにはタイトなネガティブトラッキングを適用します。 · ナビゲーションと特定のラベルには大文字変換を適用します。

04

余白

緩やかで変化に富み、主要セクション間には大きな垂直パディングを設けています。

05

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

細い 2px のボーダーは、主にインタラクティブな状態と微細な区切りに使用されます。

0px 1px 2px rgba(0,0,0,0.5) · 0px 0px 0px 1px rgba(250,250,250,0.1)

06

レイアウト

極端に大きなタイポグラフィに対応するためのフル幅カラム。

07

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

インタラクティブ要素上の滑らかな色トランジション。 · UIの状態変化のための緩やかな opacity と transform のトランジション。

インタラクティブ要素上の微細な色または background-color の変化。 · 標準的なアクティブステート。

08

コンポーネント

• button 大文字のモノスペーステキストと細いボーダーを持つ、ミニマルなテキストベースのボタン。
• card 確認できません。
• chip 確認できません。
• input 確認できません。
• hero オーバーサイズのコンデンステキストを用いた、画面全体を埋める巨大なタイポグラフィのヒーローセクション。

09

文体と禁止事項

• トーン ミニマリストで厳格。
• 見出し 巨大でタイトにトラッキングされた、コンデンスされた大文字のディスプレイタイプ。
• CTA 控えめなモノスペーステキストラベル。

• 角丸を使用しない — スクリーンショットは鋭く半径ゼロのエッジを示しています。
• 鮮やかなアクセントカラーを使用しない — スクリーンショットは厳格なモノクロームパレットを示しています。
• 明るいまたはセリフのディスプレイフォントを使用しない — スクリーンショットは重厚でコンデンスされたサンセリフのディスプレイタイプを示しています。
• 見出しにゆったりとした行間を使用しない — スクリーンショットは、ほとんど互いに触れるほど密接に詰められた表示行を示しています。
• ディスプレイテキストに広い字間を使用しない — スクリーンショットはタイトでネガティブな字間を示しています。
• テキストにドロップシャドウを使用しない — スクリーンショットはフラットでハイコントラストのタイポグラフィを示しています。
• 避ける: カラフルなグラデーション
• 避ける: 角丸
• 避ける: テキストのドロップシャドウ
• 避ける: 遊び心のあるまたは装飾的な要素

10

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

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

11

System Prompt

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