厳選・オープン・無料

Folkert Link

デザイナーFolkert Gorterのタイポグラフィ・ポートフォリオ。厳格な等幅フォントのインデックスと表現力豊かなオーバーラップ表示テキストが特徴です。

01

デザイン DNA

ミニマリストで、非常に厳選されたデザインインデックス、またはプロジェクトジャーナル。

02

カラー

スタイリッシュなハイコントラストのモノクローム（黒と白）に、ナビゲーションコンテキスト用の単一の鋭いイエローハイライトを配します。

03

タイポグラフィ

grotesque-sans · system-sans · monospaced

• display120px · 400
• body14px · 400
• mono13px · 400

プライマリタイポグラフィは、ナビゲーションとラベルに使用される厳格な等幅フォントです。 · 大きなディスプレイタイポグラフィには、回転やオーバーラップが頻繁に見られるクリーンなゴーシックサンセリフを使用します。 · テキストカラーは、黒または半透明の黒に限定されます。

04

余白

等幅リストには適度な垂直間隔を設け、ディスプレイテキストではtightにオーバーラップさせることで対比を生み出します。

05

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

カード要素には1px solid rgba(0,0,0,0.15)のボーダーを設定し、特定のインタラクティブコンポーネントにはより太いボーダーを使用します。

06

レイアウト

左に常時表示される等幅フォントのインデックスと、右に動的なコンテンツエリアを持つ非対称分割レイアウトです。

07

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

hover時やナビゲーション変化時の、シンプルなフェードおよびスライドトランジション。

インタラクティブ要素の上でカーソルがポインタに変わり、微細な色の変化や不透明度の変化が発生します。 · プロジェクト固有のオーバーレイや外部リンクにナビゲートします。

08

コンポーネント

• button テキストベースのナビゲーションリンク。太字の等幅フォントスタイルやイエローハイライトが施されたものもあります。
• card プロジェクトサムネイルの非対称グリッド。主に画像で、統一されたボーダー半径はありません。
• chip 該当なし
• input 該当なし
• hero 中央ビューポートを支配する、大きく、表現力豊かでオーバーラップし、縦に回転したディスプレイテキスト。

09

文体と禁止事項

• トーン 無骨で、ミニマルかつ知的。
• 見出し 表現力豊かで、オーバーラップし、しばしば縦方向に配置されるディスプレイタイプ。
• CTA プレーンな等幅テキスト。明るいイエローの背景でハイライトされることもあります。

• 複数のアクセントカラーを使用しないでください — スクリーンショットは、単一のイエローハイライトを持つ厳格なモノクロームパレットを示しています。
• すべての要素に伝統的な角丸を使用しないでください — スクリーンショットは、鋭いエッジと特定の角丸コンテナの混合を示しています。
• メインナビゲーションを中央揃えにしないでください — スクリーンショットは、厳格に左揃えの等幅インデックスを示しています。
• メインインデックスに標準的なサンセリフを使用しないでください — スクリーンショットは専用の等幅フォントを示しています。
• 忙しない背景を使用しないでください — スクリーンショットはクリーンな、無地の白い背景を示しています。
• 重いドロップシャドウを使用しないでください — スクリーンショットは、最小限で微細なボーダーを持つフラットなサーフェスを示しています。
• 避ける: 装飾的な要素やストック写真は避けてください。
• 避ける: 過度に複雑なUIコンポーネントや、重いグラデーションは避けてください。
• 避ける: 複数のアクセントカラーは避けてください。

10

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

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

11

System Prompt

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