厳選・オープン・無料

PlanetScale

開発者のための、モノスペースを重視した高性能データベースインフラプラットフォーム。

01

デザイン DNA

データベース向けの信頼性の高いコマンドラインユーティリティのような、開発者ツール。

02

カラー

オレンジのアクセントとモノスペースタイポグラフィを持つ、高コントラストのユーティリティパレット。

03

タイポグラフィ

geometric-sans · monospace

• display24px · 600

すべての本文テキストとナビゲーションにモノスペースフォントを使用。 · テキスト内の強調にボールドウェイトを使用。 · リンクはブルーで着色。

04

余白

モジュラーなスペーシングのための、一定の24pxギャップ。

05

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

構造要素とグリッドに1px solid #414141を使用。

06

レイアウト

固定幅コンテナを持つ単一カラムコンテンツレイアウト。

07

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

標準的な状態遷移（hover、focus、active）。

インタラクティブ要素のカラートランジション。 · 標準的なボタンとリンクの動作。

08

コンポーネント

• button ソリッドな背景色を持つ、ピル-shaped。
• card ロゴ表示のための、グリッドベースのカード。
• chip なし
• input なし
• hero Supporting paragraph とロゴグリッドを持つ、大胆な見出し。

09

文体と禁止事項

• トーン 自信に満ち、技術的で、率直。
• 見出し boldで宣言的。
• CTA シンプルでアクション指向（例：「お問い合わせ」）。

• セリフフォントを使用しない — スクリーンショットにはモノスペースとサンセリフが表示される。
• 柔らかく丸みのある角を使用しない — スクリーンショットにはピル-shapedボタンと鋭いグリッドラインが表示される。
• 微細なシャドウを使用しない — スクリーンショットにはフラットでボーダーベースの表面が表示される。
• 彩度が低く、コントラストの低いパレットを使用しない — スクリーンショットには大胆なアクセントを持つ高コントラストの白黒が表示される。
• 筆記体または装飾的なスクリプトを使用しない — スクリーンショットには厳密に機能的なタイポグラフィが表示される。
• 複雑なマルチカラーグラデーションを使用しない — スクリーンショットにはソリッドな背景色が表示される。
• 避ける: コンテキストのない専門用語の多用。
• 避ける: 過度にカジュアルまたは遊び心のある言葉。
• 避ける: 視覚的な雑踏または不必要な装飾要素。

10

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

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

11

System Prompt

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