厳選・オープン・無料

Mapbox

開発者、自動車メーカー、イノベーターのための選ばれるロケーションプラットフォーム。

01

デザイン DNA

物理世界にインテリジェンスを重ね合わせたいビルダーのためのパワフルなツールキット。

02

カラー

カラフルなマップデータとブルーアクセントを目立たせるために設計された、ハイコントラストのダークモード。

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

• display64px · 500
• body20px · 400

プライマリ見出しにはジオメトリック sans-serif を使用。 · 本文テキストには legible な humanist sans-serif を採用。 · UI 要素には標準的な sans-serif フォールバックを使用。

04

余白

標準的な 4px グリッドベース。

05

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

要素を厳しさなしに定義するための、繊細な 1px ボーダー（沈んだダークグレー #333943）。

0px 0px 100px 50px rgb(14, 16, 18)

06

レイアウト

SaaS プラットフォームに典型的な、中央揃えでコンテンツを重視したレイアウト。

07

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

ナビゲーションとボタンの smooth な hover トランジション。

繊細な色の変化と不透明度の変更。 · 軽微な transform による即座の応答。

08

コンポーネント

• button ハードル型（border-radius: 100px）、ソリッドなアクセント塗りつぶしまたは繊細なアウトライン付き。
• card ダークパネル（bg: #15171B）、ソフトシャドウと広めの角丸。
• chip 高 border-radius の、小さくアウトライン付きのテキスト要素。
• input 明確なコントラストテキストを持つ、繊細なダークインプット。
• hero デュアルアクションボタン付きの、中央揃えの巨大タイポグラフィ。

09

文体と禁止事項

• トーン プロフェッショナルで、技術的かつ権威がある。
• 見出し 簡潔で、アクション指向かつ大胆。
• CTA 明確で、メリットを伝え、歓迎的。

• 明るい背景を使用しない — スクリーンショットはダークテーマのインターフェースを示しています。
• 装飾的なセリフフォントを使用しない — スクリーンショットはクリーンな sans-serif タイポグラフィを示しています。
• ボタンに鋭い四角い角を使用しない — スクリーンショットはハードル型ボタンを示しています。
• ネオン色や過度に鮮やかな色を使用しない — スクリーンショットは焦点を当てたブルーアクセントを示しています。
• ボーダーに細く繊細なラインを使用しない — スクリーンショットは明確な 1px ボーダーを示しています。
• ヒーローセクションを過密にしない — スクリーンショットは広々としたホワイトスペースと大きなタイポグラフィを示しています。
• 避ける: 文脈のない専門用語
• 避ける: 過度にカジュアルな言葉
• 避ける: 根拠のない誇大広告
• 避ける: ヒーロー内の密集したテキストブロック

10

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

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

11

System Prompt

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