厳選・オープン・無料
Milieu Grotesque
プレミアム書体とデザインファウンダリーのキュレーションプラットフォーム。
typefoundry
01
デザイン DNA
TypographyFoundryDesignFontsCuration
タイポグラフィデザイナーのためのハイエンドギャラリー。
02
カラー
#1A73E8Accent
#1E242CInk
#576579Ink soft
#FFFFFFBG
#F4F4F4BG soft
#313945Muted
rgba(30,36,44,1.0)Line
クリーンな明るいサーフェス上の高コントラストダークテキスト。インタラクティブ要素には強いブルーアクセントを配置。
03
タイポグラフィ
grotesque-sans · humanist-sans
- display
56px · 500 - heading
26px · 400 - body
13px · 400
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
paddingとmarginには4pxの倍数を一貫して使用。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
プライマリインクカラーを使用した1pxの实线ボーダー。
rgba(0, 0, 0, 0.06) 0px 1px 6px 0px · rgba(0, 0, 0, 0.16) 0px 2px 32px 0px
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
全幅のヒーローセクションから、コンテンツカードの構造化されたグリッドレイアウトへと移行。
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
全インタラクティブ要素に対するスムーズなトランジション · 広範なレイアウト変化には0.5秒のデュレーション
インタラクティブ要素上での微細なカラー変化または不透明度の変化。 · 顕著なscale変換なしの即時フィードバック。
08
コンポーネント
- button ピル型のradiusを持つアクセントカラーの実線ボタン、テキストは白。
- card ミニマルな装飾の、画像を多用したカード。フルブリードの写真が頻繁に使用される。
- chip フィルタリングやカテゴリ分類に使用される、小さく丸みのあるタグ。
- input 目立つレンズアイコンと「AI Search」のCTAを持つ検索バー。
- hero ドラマチックな写真背景に、オーバーレイのテキストと高コントラストのタイポグラフィを配置した大型ヒーロー。
09
文体と禁止事項
- トーン プロフェッショナルで、権威があり、クリエイティブに洗練されている。
- 見出し 書体を見せるために、太字、クリーン、しばしばオーバーサイズ。
- CTA 直接的で行動を促すもの。強いカラーコントラストを使用。
- rounded、フレンドリーなアイコンを使用しない — スクリーンショットでは鋭く幾何学的なUI要素が示されている
- すべての箇所にドロップシャドウを適用しない — スクリーンショットでは主にフラットでクリーンなサーフェスが示されている
- マルチカラーパレットを使用しない — スクリーンショットでは規律あるブルーとダークニュートラルのスキームが示されている
- UIにscript或いは装飾フォントを使用しない — スクリーンショットでは厳密に機能的なsans-serifが使用されている
- 低コントラストのグレーテキストを使用しない — スクリーンショットでは可読性のために高コントラストのダークインクが示されている
- テキストの背後にごちゃごちゃした背景を使用しない — スクリーンショットではクリーンな白またはソリッドダークセクションが示されている
- 避ける: 遊び心のある或いは奇抜な言葉遣い
- 避ける: 不必要に複雑な専門用語
- 避ける: ごちゃごちゃしたレイアウト
- 避ける: 不要な装飾要素
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
クリーンでエディトリアルな美学を持つ洗練されたタイポグラフィファウンダリーマーケットプレイス。主なカラーは、白#FFFFFF上のインク#1E242C、ブルーアクセント#1A73E8。タイポグラフィにはgrotesqueおよびhumanist sans-serifカテゴリを使用。重要な禁止事項：奇抜なアイコンを避ける、ドロップシャドウを最小限に、マルチカラーパレットを回避、厳密に機能的なsans-serifを使用、高コントラストテキストを確保、可読性のためにクリーンな背景を維持する。
en · zh-CN · zh-TW · ja · ko