厳選・オープン・無料

Turso

AIエージェントの時代のためのデータベース。

01

デザイン DNA

モダンなフィンテックダッシュボードの美学を持つ、精密に設計された開発者向けツール。

02

カラー

重要なCTAにはハイコントラストのネオンアクセントを用いる、ダークモードの基盤。

03

タイポグラフィ

geometric-sans · ui-monospace

• display64px · 800
• body16px · 400

すべてのUIと本文テキストに Inter（ジオメトリック・サンセリフ）を使用します。 · 大型ディスプレイ見出しには、きつくした文字間隔を維持します。 · すべてのUI要素に、クリーンで非常に読みやすいジオメトリック・サンセリフを使用します。

04

余白

明確で息の通ったパディングとギャップを提供する、一貫した4pxベーススケール。

05

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

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

06

レイアウト

センター配置で制約のあるコンテンツブロックを持つ、全幅ダークセクション。

07

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

hover状態での滑らかなカラーおよびbackground-colorのトランジション。 · インタラクティブな要素の微妙なopacityの変化。

150-200msにわたる滑らかなbackground-colorおよびtext-colorのトランジション。 · opacityの軽減やカラーのシフトによる、即座のビジュアルフィードバック。

08

コンポーネント

• button ネオン背景とダークテキストを持つ、ハイコントラストのピルボタン。
• card ダーク背景と柔らかな角丸を持つ、控えめにボーダーの引かれたカード。
• chip 控えめな背景を持つ、小さなピル形状のラベル。
• input 控えめなボーダーとダーク背景を持つ、クリーンな入力フィールド。
• hero 顕著なネオンアクセント要素を持つ、巨大なセンター配置テキスト重視のヒーローセクション。

09

文体と禁止事項

• トーン 権威があり、技術的で、未来志向。
• 見出し 短く、力強く、非常に記述的な技術的ステートメント。
• CTA 直接的で、行動を促すコマンド。ネオンで強調。

• ホワイト背景を使わない — スクリーンショットは深いダーク（#0D1318）の基盤を示しています。
• 装飾的なセリフフォントを使わない — スクリーンショットはクリーンなジオメトリック・サンセリフを示しています。
• 複数のアクセントカラーを使わない — スクリーンショットは、単一の支配的なハイクロマアクセントとしてネオンミントグリーン（#4FF7D1）を示しています。
• 柔らかなドロップシャドウを使わない — スクリーンショットは、盛り上がりに対して控えめな1pxボーダーや背景色の変化を示しています。
• 小さく窮屈なスペーシングを使わない — スクリーンショットはコンテンツブロック周りに余裕のあるパディング（例：40px、128px）を示しています。
• すべての見出しを小文字にしない — スクリーンショットは技術的ステートメントに標準のタイトルケースまたはセンテンスケースを示しています。
• 避ける: 非公式またはカジュアルな言葉遣いを避ける。
• 避ける: 技術的実質のない一般的なマーケティングフレーズを避ける。
• 避ける: 過度に複雑または華やかな文を避ける。

10

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

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

11

System Prompt

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