厳選・オープン・無料

Dmitrkutsenko

ファッション写真家のポートフォリオのための、峻別されたタイポグラフィによる導入。

01

デザイン DNA

アーティストを告げる、暗いギャラリーの入り口。

02

カラー

写真コンテンツを焦点にするための、ハイコントラストなモノクローム。

03

タイポグラフィ

geometric-sans

• display75px · 400
• body14px · 400

ディスプレイテキストは大文字で、トラッキングを詰めて使用します。 · ボディテキストはナビゲーションやインターフェース要素として大文字で設定されます。

04

余白

4pxのベースユニットグリッド。

05

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

構造的なボーダーは表示されません。スペーシングとカラーコントラストに依存します。

06

レイアウト

最小限の、端に整列したナビゲーションを持つフルブリードヒーロー。

07

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

インタラクティブ要素への精緻なカラートランジション。 · スクロール駆動やクリックトリガーによるコンテンツの表示を示唆。

精緻なbackground-colorまたはtext-colorのトランジション。 · コンテンツトランジションまたはナビゲーションをトリガーします。

08

コンポーネント

• button テキストのみのトリガー。多くの場合、精緻なhoverカラートランジションを伴います。
• card 提供されたビューには表示されません。
• chip 提供されたビューには表示されません。
• input 提供されたビューには表示されません。
• hero 左下に固定された、大きな大文字のタイポグラフィステートメント。

09

文体と禁止事項

• トーン 権威があり、ミニマルで直接的。
• 見出し 全大文字、トラッキングを詰めた、声明的スタイル。
• CTA 小さく、控えめで、指示的。

• グラデーションや複雑な背景パターンを使用しないこと — スクリーンショットでは、無地の暗いフラット背景が示されています。
• プライマリ要素に角丸を使用しないこと — スクリーンショットでは、鋭いエッジとバッジのみのフルラジウスサークルが示されています。
• ディスプレイテキストに太字のフォントウェイトを使用しないこと — スクリーンショットでは、すべてのテキストで統一された400のウェイトが示されています。
• 高彩度のアクセントカラーを使用しないこと — スクリーンショットでは、厳格なモノクローム配色が示されています。
• メインヘッドラインを中央揃えにしないこと — スクリーンショットでは、左下に固定された厳格な左揃えが示されています。
• ナビゲーションに標準の文のキャピタライゼーションを使用しないこと — スクリーンショットでは、メニューとCTA要素に全大文字が示されています。
• 避ける: 装飾的な要素
• 避ける: 雑然とした背景
• 避ける: ごちゃ混ぜのナビゲーション

10

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

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

11

System Prompt

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