厳選・オープン・無料

PlanetScale

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

devtoolsdatabase
PlanetScale のスクリーンショット
↓ デザインシステムをダウンロード (7 MB)OpenDesign で開く

オリジナル: https://planetscale.com

📦 パックの中身を見る →

01

デザイン DNA

高速性信頼性インフラパフォーマンス開発者優先

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

02

カラー

#F35815Accent
#414141Ink
#FAFAFABG
#737373Muted
rgba(65, 65, 65, 1)Line

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

03

タイポグラフィ

geometric-sans · monospace

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

04

余白

4px
8px
16px
24px
32px
48px
64px
96px

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

05

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

sm · 4px
md · 8px
lg · 12px
pill · 9999px

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

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

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

07

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

150msmicro
150mssmall
150msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

標準的な状態遷移(hover、focus、active)。

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

08

コンポーネント

09

文体と禁止事項

10

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

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

11

System Prompt

これは、データベースインフラプラットフォームであるPlanetScale向けの、開発者ツールSaaSサイトです。モノスペースタイポグラフィ(ui-monospace)が支配的なデザインで、技術的でコマンドライン風の美学を特徴としています。主要な16進数カラーには、プライマリインクの#414141、背景の#FAFAFA、リンクの#0B6EC5、CTAアクセントの#F35815が含まれます。レイアウトはクリーンでグリッドベースで、フォントのウェイトとサイズによる明確な階層構造が確立されています。重要な禁止事項:セリフフォントの使用回避、柔らかく丸みのある角の回避、低コントラストのカラーパレットの回避。このサイトは、技術的なオーディエンス向けに明瞭さと可読性を優先しています。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック(エージェント用) ↗

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