厳選・オープン・無料

Maximilianberndt

厳格なグリッドとモノクロパレットを使用した、クリエイティブデベロッパーのための、ストリックでタイポグラフィ重視のポートフォリオ。

01

デザイン DNA

デジタルクラフツマンのための、クリーンなスイススタイルのタイポグラフィ見本帖。

02

カラー

厳密にモノクロで、最大限の可読性のために、オフホワイト背景にダークカラーとミディアムグレーを使用。

03

タイポグラフィ

grotesque-sans · monospace

• display12px · 400

04

余白

レイアウトは、セクション間に余裕のある垂直間隔と一貫したパディングを備えた、厳格なグリッドシステムに依存しています。

05

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

視覚的なボーダーはなし。間隔と色のコントラストで境界を定義。

06

レイアウト

デスクトップでは厳格な2カラム非対称グリッド、モバイルでは単一カラムに折りたたまれる。

07

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

スクロールやhover時の、滑らかなフェードインやリストトランジション。

繊細なopacityの変化や色のシフト。 · 複雑なアニメーションなしの直接ナビゲーション。

08

コンポーネント

• button 視覚的な装飾のない、テキストのみのリンク。
• card 視覚的なカードはなし。コンテンツはリスト構造で組織化。
• chip なし。
• input なし。
• hero 大量のホワイトスペースを用いた、純粋にタイポグラフィによるヒーローセクション。

09

文体と禁止事項

• トーン プロフェッショナルで控えめ、そして非常に高い熟練度。
• 見出し 最小限の、小さく精密なタイポグラフィを使用。
• CTA プレーンテキストリンク。右上やリスト内に隠されることが多い。

• 明るいアクセントカラーを使用しない — スクリーンショットは厳格なモノクロパレットを示しています。
• 大きすぎる装飾フォントを使用しない — スクリーンショットは12pxのグロテスクサンスの均一なタイポグラフィを示しています。
• 影やボーダーを追加しない — スクリーンショットはホワイトスペースで定義されたフラットなレイアウトを示しています。
• メインレイアウトに複雑なイメージを使用しない — スクリーンショットはテキストのみのコンテンツを示しています。
• 角丸を使用しない — スクリーンショットは角張った、スタイルのない要素を示しています。
• テキストを中央揃えにしない — スクリーンショットは厳格な左揃えのレイアウトを示しています。
• 避ける: 過度に装飾的な要素
• 避ける: 鮮やかな色
• 避ける: 複雑なアイコノグラフィ

10

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

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

11

System Prompt

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