厳選・オープン・無料

Nofilter

ファッションとフォトグラフィーのための、クリーンでタイポグラフィ駆動のエディトリアルプラットフォーム。

01

デザイン DNA

ハイエンドファッションマガジンのウェブサイト

02

カラー

白地に黒字の高コントラストでコンテンツを強調するモノクロームパレット。

03

タイポグラフィ

grotesque-sans

• display120px · 400
• heading35px · 400
• body24px · 400
• small15px · 400

全テキストにpragmaticaサンセリフを使用。 · ナビゲーションリンクは大文字。 · 著者と日付の行はより小さな本文サイズで設定。

04

余白

4pxの倍数のパディングとマージンを一貫して使用。

05

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

プライマリコンテナに1px solid rgb(51, 51, 51)。

06

レイアウト

大規模なイメージと非対称なカラムを用いたグリッドベースのエディトリアルレイアウト。

07

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

カーソルをポインタでクリック可能要素を示す。 · カーソルをポインタでクリック可能要素を示す。

08

コンポーネント

• button 大文字スタイルのテキストリンクで、カーソルをポインタ。
• card 大規模なイメージを用いた記事のボーダードコンテナ。
• chip なし
• input なし
• hero 幅全体にわたる大規模なタイポグラフィタイトル。

09

文体と禁止事項

• トーン 権威があり、洗練され、ミニマル。
• 見出し 直接的で衝撃的な、大きなタイポグラフィ。
• CTA 控えめな、テキストベースのナビゲーション。

• 装飾的なフォントを使用しない — スクリーンショットではpragmaticaサンセリフが全体に使用されている。
• 背景グラデーションを追加しない — スクリーンショットでは純白の背景。
• カードにドロップシャドウを使用しない — スクリーンショットではフラットなボーダードコンテナ。
• 角丸を使用しない — スクリーンショットでは鋭角な長方形要素。
• 鮮やかなアクセントカラーを導入しない — スクリーンショットではモノクロームパレット。
• 不要な要素でレイアウトを雑踏させない — スクリーンショットでは十分な余白。
• 避ける: 装飾的なフォントは使用しない。
• 避ける: 背景グラデーションを追加しない。
• 避ける: カードにドロップシャドウを使用しない。
• 避ける: 角丸を使用しない。
• 避ける: 鮮やかなアクセントカラーを導入しない。
• 避ける: 不要な要素でレイアウトを雑踏させない。

10

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

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

11

System Prompt

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