厳選・オープン・無料

Typotheque

クリーンで画像を活用したインターフェースで、グローバルフォントシステムとエディトリアルプロジェクトを実演するプレミアムタイプファウンドリー。

01

デザイン DNA

タイポグラフィの技術と言語の多様性を展示するデジタル展示会

02

カラー

鮮やかで彩度の高いアクセントブロックで彩られた、高コントラストの黒と白を基盤とする構成

03

タイポグラフィ

humanist-sans · monospace

• display40px · 700
• headline20px · 400
• body16px · 400

本文テキストは標準の16pxをベースサイズとし、行間は1.0 · 見出しは太字の40pxと、ゆったりとした行間1.1を使用 · UIラベルと補助テキストは、やや小さな13pxサイズを使用 · スモールキャップやラベルには文字間隔をやや広めに設定

04

余白

主要セクション周囲に十分な余白を設け、標準コンテンツブロックには一貫した20pxのpadding

05

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

主に構造的な区切りとして使用される、繊細なグレーの1px薄いボーダー

06

レイアウト

フォントコレクションを閲覧するためのマルチカラングリッド。上部にフルワイドヒーロー画像、下部に大きく鮮やかなカードブロック

07

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

インタラクティブ要素上の滑らかな背景色遷移（0.25秒） · hover時の微細な透明度とtransformの変化（0.2秒）

背景色の遷移と微細な透明度の調整 · 即座のビジュアル応答、またはリンク先セクションへの滑らかな遷移

08

コンポーネント

• button 9999pxのボーダー radiusを持つピル型で、ソリッドと透明な両スタイルを提供
• card 角丸（24px radius）と大胆で彩度の高い背景色を持つ大きな長方形ブロック
• chip データビジュアライゼーショングリッド内で使用される、縦長のテキストラベル
• input シンプルな虫眼鏡アイコンで表現されたミニマルな検索インターフェース
• hero テキストの可読性のために下部に微細な暗いグラデーションオーバーレイをかけた、フルワイドの高解像度写真風景

09

文体と禁止事項

• トーン 権威があり、教育的、かつグローバルなインクルーシビティに深く焦点を当てている
• 見出し 直接的で記述的、かつ非常に読みやすい（例：「グローバルフォント」「全フォント」）
• CTA 微細で行動を促すもので、しばしば矢印アイコンを伴う（例：「詳しく →」）

• 汎用的なサンセリフフォントを使用しない — スクリーンショットには特定の文字を持つ特徴的なヒューマンサンスが示されています
• 厳密な8pxグリッドを使用しない — スクリーンショットには10、20、30、80pxなどの値を使用したフレキシブルな間隔が示されています
• ボタンを長方形にしない — スクリーンショットには一貫して9999px radiusのピル型ボタンが示されています
• 大きなドロップシャドウを使用しない — スクリーンショットにはシャドウの奥行きのない完全にフラットな表面が示されています
• 小さく密集したテキストを使用しない — スクリーンショットには十分な行間（1.0から1.3）と明確なフォントサイズが示されています
• 単一の背景色のみに依存しない — スクリーンショットには純粋な白、純粋な黒、および鮮やかで彩度の高いブロックの混ざり合いが示されています
• 避ける: 過度に攻撃的なマーケティング用語や誇張表現
• 避ける: 雑然として視覚的に騒々しいUI要素
• 避ける: 異なるセクション間での不一致なタイポグラフィ

10

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

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

11

System Prompt

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