厳選・オープン・無料

Georgehatton

クリエイティブディレクターのための、高度に抑制されたタイプ中心のポートフォリオ。

01

デザイン DNA

几帳面に黒字が書かれた、無垢のブラータリストなギャラリーの壁。

02

カラー

厳格でハイコントラストなモノクロームパレット。

03

タイポグラフィ

grotesque-sans

• display16px · 700
• body12px · 700
• small10px · 700

タイポグラフィは完全に等幅幅または tightened tracking で、主に Bold (700) で設定される。 · 行高は小さなフォントサイズに対して厳密に比例的 (1.2) である。

04

余白

厳格で最小限の padding と tightened カラム間隔。

05

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

1px solid rgb(0, 0, 0)

06

レイアウト

多列テキストグリッド。

07

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

すべての要素に適用されるグローバルトランジション。

インタラクティブなテキストリンク上でカーソルがポインタに変化。 · テキストリンクへの即時レスポンス。

08

コンポーネント

• button 上向きの対角矢印付きテキストリンク。
• card 可见なカードやコンテナのない、テキストのみのレイアウト。
• hero 左揃えの密な太字導入テキストブロック。

09

文体と禁止事項

• トーン プロフェッショナルで直接的、かつ客観的。
• 見出し 三人称の伝記的な紹介。
• CTA 控えめな連絡用テキストリンク。

• 複数のフォントファミリーを使用しない — スクリーンショットでは単一の grotesque-sans ファミリーが示されている。
• 強調のために異なるフォントウェイトを使用しない — スクリーンショットでは統一された bold (700) ウェイトが示されている。
• カラーアクセントやハイライトを使用しない — スクリーンショットでは白地に黒字のみが示されている。
• 角丸やカードコンテナを使用しない — スクリーンショットでは生地の、ボーダレスなテキストレイアウトが示されている。
• ドロップシャドウや奥行き効果を使用しない — スクリーンショットでは完全にフラットなタイポグラフィが示されている。
• 装飾的なアイコンを使用しない — スクリーンショットではリンクに単一の矢印文字のみが使用されている。
• 避ける: マーケティング用語
• 避ける: コンテンツのない過度な空白
• 避ける: 装飾的な要素
• 避ける: 複数のフォントファミリー
• 避ける: 主観的な形容詞
• 避ける: カラーアクセント

10

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

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

11

System Prompt

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