厳選・オープン・無料

Foundry Basement Studio

デザイナーのための、表現力豊かでブルータリストなタイポファウンドリーカタログ

01

デザイン DNA

重厚なタイポグラフィを生み出す、地下工房のような存在

02

カラー

最大限のコントラスト：真っ暗な背景、白いテキスト、そして鮮烈なオレンジアクセントの一点

03

タイポグラフィ

grotesque-sans · monospace

• display198px · 700
• heading120px · 700
• body16px · 400
• caption14px · 400
• micro12px · 400

すべてのテキストは大文字 · UIテキストにはモノスペースフォントを使用 · スペシメン用には誇張された幅広のディスプレイフォント

04

余白

UI要素ではパディングを詰め、レイアウトでは広い間隔を取る、厳密な垂直リズム

05

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

1pxのソリッドボーダー。しばしば控えめなグレーまたは白色を使用

06

レイアウト

デスクトップでは常設サイドバー、モバイルではトップナビゲーション

07

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

背景色およびボーダー色の微妙な遷移 · 状態変化のための不透明度フェード

背景色とボーダー色が150msのease-in-outで変化 · 不透明度が下がるアクティブ状態

08

コンポーネント

• button モノスペースの大文字テキストを用い、アクセントカラーを使うボーダーボタン
• card タイポグラフィスペシメンを収める、控えめなボーダーのある暗いパネル
• chip マイクロタイポグラフィを用いた、ボーダーのある矩形タグ
• input 最小限、おそらくカスタムUI要素のために非表示
• hero 背景パターン付きの、全幅で表現力豊かなタイポグラフィ表示

09

文体と禁止事項

• トーン 自信に満ち、大胆で、少し挑発的
• 見出し 大文字、表現力豊かなグロテスクフォント
• CTA 「BUY NOW」や「EXPLORE」のような、直接的な大文字の命令形

• 小文字テキストを使用しない — スクリーンショットではすべて大文字
• 柔らかいパステルカラーを使用しない — スクリーンショットではハイコントラストの黒、白、オレンジ
• UIテキストにサンセリフを使用しない — スクリーンショットではナビゲーションとラベルにモノスペースのみ
• 細く繊細なフォントを使用しない — スクリーンショットでは重厚で幅広のグロテスクフォント
• 複雑なシャドウを使用しない — スクリーンショットではフラットなボーダーで深みを表現
• 明るい背景を使用しない — スクリーンショットでは深い黒またはダークグレーの背景
• 避ける: 微妙なグラデーション
• 避ける: サンセリフ本文
• 避ける: 明るいテーマ

10

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

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

11

System Prompt

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