厳選・オープン・無料
Sharp Type
グローバルなデジタル・タイプファウンドリーのための、洗練された、タイポグラフィ重視のウェブサイト。
typefoundry
01
デザイン DNA
タイプファウンドリーグローバルタイポグラフィデザインツールキットカスタムタイプ
プレミアム・タイプフェースのための、清廉なギャラリー・カタログ。
02
カラー
#000000Ink
#FFFFFFBG
#BDBDBDMuted
rgba(0,0,0,1)Line
タイプフェースのカテゴリ分けに用いる、高彩度で多様なドットインジケーターを伴う、ミニマルなモノクローム（白と黒）。
03
タイポグラフィ
geometric-sans · humanist-sans · monospace
- display
40px · 700 - body
21px · 400 - caption
14px · 400
見出しと特定の強調語にのみ、太字（700）を厳格に使用する。 · 大きな表示用テキストには、 tightな字間隔（負の値）を維持する。 · 本文およびすべてのナビゲーション要素には、標準ウェイト（400）を使用する。
04
余白
7px
14px
21px
28px
35px
42px
49px
7pxの基本単位を、パディング、ギャップ、マージンに一貫して使用する。
05
サーフェス (角丸 / 影 / 罫線)
sm · 2px
md · 10px
lg · 14px
pill · 999px
プライマリ区切りには1pxの細い黒線を、セカンダリボーダーにはライトグレー（rgb(189, 189, 189)）を使用する。
rgb(128, 128, 128) 0px 0px 5px 0px
06
レイアウト
1440container
3columns
21pxgutter
768 / 1024breakpoints
モバイルのシングルカラムから、タイプフェースカタログ用の三カラムグリッドへ移行する、流動的なレイアウト。
07
モーションとインタラクション
220msmicro
300mssmall
400msmedium
cubic-bezier(0.4, 0.0, 0.2, 1)easing
すべての要素に`all 0.3s`でトランジションを適用する。 · ナビゲーションメニューなどのインタラクティブ要素には、右に位置するスライディングパネルが使用される可能性が高い。
すべてのインタラクティブ要素に、標準的なポインターカーソル（pointer）を使用する。 · 標準的なウェブインタラクションのため、ポインターダウンで即座に応答する。
08
コンポーネント
- button 2pxの青いボーダー、丸みのある端、青の大文字テキストを持つゴーストボタン。
- card タイプフェースリスト用の、細い線で区切られたミニマルなカード状の行。
- chip タイプフェース名の横に配置される、小さな円形のカラーピンジケーター（ドット）。
- input 提供されたスクリーンショットでは確認できません。
- hero 混在するウェイトのフォントを使用した大きな記述的な見出しと、単一のカラードットを備えた、ミニマルなヒーローセクション。
09
文体と禁止事項
- トーン プロフェッショナル、権威的、そしてミニマル。
- 見出し 明確で記述的、タイプフェースの技術的な範囲を強調する。
- CTA シンプルで大文字、色とボーダーの使用により視覚的に区別される。
- 大面积の背景に彩度の高いアクセントカラーを使用しない — スクリーンショットでは、色彩は小さなドットインジケーターにのみ厳格に使用されている。
- ダークモードやカラーバックグラウンドを使用しない — スクリーンショットでは、純白（#FFFFFF）のバックグラウンドが厳格に使用されている。
- すべての要素に重いドロップシャドウを使用しない — スクリーンショットでは、特定の1つの要素にのみ、1つ、繊細なシャドウが使用されている。
- メインUIやナビゲーションにセリフフォントを使用しない — スクリーンショットでは、これらの要素にサンセリフ（humanist-sansとして分類）が使用されている。
- ナビゲーションやリストに中央揃えテキストを使用しない — スクリーンショットでは、すべてのナビゲーションとタイプフェースリストは厳格に左揃えである。
- 1つのコンポーネント内で複数のアクセントカラーを同時に使用しない — スクリーンショットでは、タイプフェースのエントリーごとに1色のみ使用されている。
- 避ける: 複雑なグラデーションや重いドロップシャドウの使用を避ける。
- 避ける: 遊び心が過度な、またはカジュアルすぎる言葉遣いを避ける。
- 避ける: タイプ自体から注意をそらす、ごちゃごちゃしたレイアウトや過度な画像使用を避ける。
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
このサイトは、グローバルなタイプファウンドリーのための、洗練されたミニマルなポートフォリオです。そのデザインDNAは、超クリーンでハイコントラストの黒（#000000）と白（#FFFFFF）のパレットによって定義され、色彩は、タイプフェース名の横にある小さな円形インジケーターとして控えめに使用されます。タイポグラフィは、本文にhumanist-sans、表示要素にgeometric-sansを採用し、見出しにはtightな字間隔と、7pxベースのスペーシングリズムを特徴としています。重要なデザイン制約は以下の通りです：1) カラーバックグラウンドなしの厳格なモノクローム基調を維持する、2) すべてのナビゲーションとテキストを厳格に左揃えにする、3) 色を、プライマリUIバックグラウンドとしてではなく、小さなドットインジケーターによる正確なカテゴリ分けツールとしてのみ使用する。
en · zh-CN · zh-TW · ja · ko