厳選・オープン・無料

Variable Fonts

可変フォントとブランドケーススタディに特化した、クリーンでタイポグラフィ中心のリソースハブ。

01

デザイン DNA

洗練されたデザインライブラリとリソースハブ

02

カラー

1つの機能的な青アクセントを用いた、クリーンでハイコントラストのニュートラルキャンバス

03

タイポグラフィ

grotesque-sans · monospace

• display56px · 500
• h224px · 500
• body16px · 400

UIの描画を一貫させるため、標準的なシステムフォールバックスタック（Helvetica, Arial）を使用 · 明確なタイポグラフィ階層のために、モジュラースケールを維持 · 最適な可読性のために、本文テキストのウェイトを400に維持

04

余白

一貫した24pxのガターを持つ、標準的な4pxグリッドシステム

05

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

1px solid #E7EAEA

0px 1px 6px rgba(0, 0, 0, 0.06) · 0px 11px 15px rgba(0, 0, 0, 0.05)

06

レイアウト

モバイルでスタックする、レスポンシブな3カラムカードグリッド

07

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

カードhover時の、繊細な陰影とトランスフォームのトランジション · コンテンツ読み込み時の、滑らかなフェードイン

インタラクティブカードの陰影の深みを増し、わずかにスケールを変化させる · 状態の変化による、即座のビジュアルフィードバック

08

コンポーネント

• button 白テキストとわずかな角丸を持つ、機能的な青アクセントボタン
• card 画像を多用し、16pxの角丸と繊細なhover陰影を持つカード
• chip ドットで区切られた、シンプルなテキストベースのカテゴリチップ
• input 最小限の検索入力フィールド
• hero 大きく、左揃えのタイポグラフィヘーローセクション

09

文体と禁止事項

• トーン プロフェッショナルで、権威があり、教育的
• 見出し 大胆で、直接的、主題に焦点を当てたもの
• CTA 明確で行動を促すもの（例：「営業に相談」）

• 過度に装飾的なセリフフォントを使用しない — スクリーンショットにはクリーンなグロテスク・サンズシステムが示されている
• 重いドロップシャドウを追加しない — スクリーンショットには非常に繊細なボックスシャドウのみが示されている
• すべてのテキストを中央揃えにしない — スクリーンショットには左揃えの見出しと本文が示されている
• 複数のアクセントカラーを使用しない — スクリーンショットには1つの機能的な青が示されている
• 長いテキストに Tight な行間を使用しない — スクリーンショットには快適な1.5の行間が示されている
• すべての要素に角丸を使用しない — スクリーンショットにはシャープなカードと角丸のカードが混在している
• 避ける: 過度にカジュアルな言葉やスラングを避ける
• 避ける: タイポグラフィから注意をそらす雑然としたレイアウトを避ける
• 避ける: 読む妨げる不要なアニメーションを避ける

10

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

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

11

System Prompt

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