厳選・オープン・無料

Postfamiliar

エクスクルーシブなワインクラブのための、大胆でハイコントラストのダークモードエディトリアルデザイン。

01

デザイン DNA

ブラータリストの鋭さを持つ、ハイエンドでエクスクルーシブなワインクラブの雑誌。

02

カラー

鮮やかなピンクのアクセントを1色加えた、厳格なハイコントラストのモノクロ。

03

タイポグラフィ

grotesque-sans · monospace

• display230px · 400
• heading70px · 400
• subhead46px · 400
• body16px · 400
• label20px · 400

見出しやボタンに大文字テキストを多用する。 · 大きなディスプレイテキストにはタイトな字間（tracking）を設定する。

04

余白

一貫したパディングとギャップの倍数を通じて確立される垂直リズム。

05

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

すべてのインタラクティブ要素を、ハイコントラストの2px solid whiteまたはblackボーダーで定義。

06

レイアウト

固定幅のコンテンツカラムを持つ、中央揃えのフルスクリーンヒーロー。

07

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

表示のための不透明度遷移。 · hover状態のためのtransform遷移。

色を反転させるか、ボーダーの色をピンクに変更する。 · scaleや不透明度による即座の視覚的フィードバック。

08

コンポーネント

• button ピル型、2px solid whiteボーダー付きの透明フィル。
• card 鋭角の四角形、2px solid whiteボーダーで定義。
• chip 最小限のテキストラベル。しばしば大文字で、広い字間（tracking）を持つ。
• input 2px solid whiteボーダー付きのピル型。
• hero フルスクリーン、ハイコントラストのタイポグラフィヒーロー。巨大なディスプレイテキストを特徴とする。

09

文体と禁止事項

• トーン 権威があり、エクスクルーシブで、ミニマル。
• 見出し 巨大、太字、大文字のsans-serif。
• CTA 直接的、大文字、ピル型ボタン。

• ドロップシャドウは使用しない — スクリーンショットでは要素が2px solidボーダーで定義されている。
• 明るい背景は使用しない — スクリーンショットではソリッドな#000000のダークモード背景が使用されている。
• 見出しに小文字は使用しない — スクリーンショットでは巨大な大文字のタイポグラフィが使用されている。
• カードの角を丸めない — スクリーンショットではカードが鋭い90度の角を持っている。
• 彩度の低い、抑制された色は使用しない — スクリーンショットでは鮮やかなピンクのアクセントを持つハイコントラストパレットが使用されている。
• すべてのテキストを中央揃えにしない — スクリーンショットでは左揃えの本文と右揃えのナビゲーション要素が使用されている。
• 避ける: フレンドリーまたはカジュアルな言葉遣い。
• 避ける: 丸みのある、柔らかい形状。
• 避ける: 複雑なグラデーションやドロップシャドウ。
• 避ける: 雑然としたレイアウト。
• 避ける: 本文テキストにserifフォントを使用。
• 避ける: 彩度の低いカラーパレット。

10

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

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

11

System Prompt

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