厳選・オープン・無料

Xata

即時Postgresブランチングのためのモダンな開発者ツール

01

デザイン DNA

データベースワークフローのための精密なインストゥルメント

02

カラー

モノクロマチックな精度と最小限のアクセントによる、高コントラストダークモード

03

タイポグラフィ

geometric-sans · monospace

• display48px · 500

見出しにはタイトなトッキングのジオメトリック・サンズを使用 · 本文およびUIテキストには技術的な精度のためにモノスペースを使用 · 補足情報には控えめな色調のテキストを使用

04

余白

明瞭さのための十分な余白を備えた8pxベースグリッド

05

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

1px solid rgba(255, 255, 255, 0.07)

0px 1px 0px 0px rgba(255, 255, 255, 0.25) inset · 0px 4px 6px -1px rgba(0, 0, 0, 0.2) · 0px 2px 4px -2px rgba(0, 0, 0, 0.2) · 0px 0px 2.56702px 0px rgba(52, 211, 153, 0.192)

06

レイアウト

クリーンなグリッドを持つ固定幅の中央揃えレイアウト

07

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

滑らかな不透明度のトランジション · hover時のトランスフォーム効果 · バックドロップフィルターのトランジション

控えめな明度変化とボックスシャドウ · 少し縮小

08

コンポーネント

• button 白いテキストを持つ紫色の背景、やや角丸
• card 薄いボーダーと控えめなシャドウを持つ、ダークで控えめな背景
• chip ステータスインジケーター用の控えめなテキストを持つアウトラインスタイル
• input 控えめなボーダーを持つダーク背景
• hero ダーク背景に散りばめられたUI要素を備えた、大きなモノスペースの見出し

09

文体と禁止事項

• トーン 技術的で正確、プロフェッショナル
• 見出し 機能性についての直接的で大胆な記述
• CTA モノスペースフォントを用いた明確なアクション動詞

• セリフフォントを使用しない — スクリーンショットではモノスペースとジオメトリック・サンズが使用されている
• 明るいプライマリカラーを使用しない — スクリーンショットではボタンにのみ控えめな紫色のアクセントが使用されている
• 角丸カードを使用しない — スクリーンショットでは小さなradiusを持つ長方形カードが使用されている
• 雑然とした背景を使用しない — スクリーンショットでは控えめなパターンを持つダークな単色背景が使用されている
• 大きなパディングを使用しない — スクリーンショットでは密度のためのコンパクトな余白が使用されている
• イタリックテキストを使用しない — スクリーンショットではすべてのタイポグラフィが立位（直立）である
• 避ける: マーケティング用語
• 避ける: 過度の感嘆符
• 避ける: 過度にカジュアルな言葉遣い

10

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

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

11

System Prompt

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