厳選・オープン・無料

Frere-Jones Type

エディトリアルなデザインとモノクロームの静謐さで、オリジナル書体を紹介するプレミアムの独立系書体工房。

01

デザイン DNA

文字形態の明瞭さと美しさを優先する、洗練された旧来の職人技工房。

02

カラー

見本用の1色のダスティ・ブルー・アクセントを持つ、高コントラストのモノクローム・パレット。

03

タイポグラフィ

transitional-serif · humanist-sans · monospaced

• display86px · 700
• h156px · 700
• body16px · 400
• caption12px · 400

大きな表示用タイプにはトランジショナル・セリフ体を使用し、フォントのディテールを披露する · すべての機能的なUIと本文にはヒューマニスト・サンセリフ体を使用する

04

余白

厳格な4pxのベースライン・グリッドを持つ、ゆとりのある余白。

05

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

ボーダーとボタンには、控えめなセパレーターとして1px solid black。

06

レイアウト

ヒーロー、概要、ブログ、カスタムワークの区切れたセクションを持つ、クリーンなグリッド。

07

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

ヒーローカルーセル内の書体見本間の、微妙なクロスフェード

テキストリンクやボタンに、微妙な色の変化やアンダーラインが現れる。 · 次の状態またはページへの即時遷移。

08

コンポーネント

• button 下線のあるシンプルなテキスト、または黒背景に白テキスト。角丸なし。
• card カスタムワーク用の、フルワイドのセクションまたは大胆なグリッドブロック。通常は黒背景に白テキスト。
• chip 「Releases」のような、シンプルな下線付きテキスト・タグ。
• input ミニマルで、ボーダーなしの検索バー。
• hero フォントを披露するための、黒または青の大胆な、フルブリードの書体見本。

09

文体と禁止事項

• トーン 権威があり、洗練され、控えめ。
• 見出し 短く、直接的で、しばしば書体名そのもの。
• CTA 'More About Us' や 'Read Post →' のような静かなテキストリンク。大きなボタンは使用しない。

• ボタンやカードに角丸を使用しない — スクリーンショットにはシャープな90度の角が示されている。
• UI要素にドロップシャドウを使用しない — スクリーンショットには完全にフラットな表面が示されている。
• 広範でカラフルなパレットを使用しない — スクリーンショットには厳格な黒、白、単一のアクセント色のパレットが示されている。
• 装飾的なサンセリフ体を大きな表示用に使用しない — スクリーンショットには見本用の太字トランジショナル・セリフ体が示されている。
• 太く、分厚いボーダーを使用しない — スクリーンショットには非常に細い1pxのボーダー、あるいはボーダーそのものが示されていない。
• アイコンでインターフェースを雑然とさせない — スクリーンショットはテキストとタイポグラフィにほぼ完全に依存している。
• 避ける: 過度に表現力豊かまたは装飾的な要素を避ける
• 避ける: 明るい、ネオンの、または調和のとれない色を避ける
• 避ける: 主要なUI要素に角丸を避ける

10

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

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

11

System Prompt

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