厳選・オープン・無料

Cockroach Labs

クラウド非依存のPostgreSQL互換データベースプラットフォーム。現代のミッションクリティカルアプリケーション向け。

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

オリジナル: https://www.cockroachlabs.com

📦 パックの中身を見る →

01

デザイン DNA

データベースクラウドネイティブ分散エンタープライズ信頼性

ビジネス上重要なアプリケーションの基盤となる記録システムとしてデータベースを位置づける現代的なインフラ企業。

02

カラー

#6933FFAccent
#000000Ink
#333333Ink soft
#FFFFFFBG
#FCFCFDBG soft
rgba(234, 236, 240, 1)Line

モノクロームをベースに、プライマリアクションを強調するために鮮やかな紫のアクセントを使用した、高コントラストでクリーンなインターフェース。

03

タイポグラフィ

humanist-sans

フレンドリーかつプロフェッショナルな技術的な印象を出すため、ヒューマニストサンセリフ(Poppins/Open Sans)を使用します。 · 大きな表示タイプには、 tightな文字间距を維持し、ビジュアルの一体感を生み出します。 · 本文には、技術的な可読性を確保するために、十分な行間(1.5-1.7)を確保します。

04

余白

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

レイアウトのアライメントに一貫した24pxのガターを持った、標準的な4pxグリッドベースのスペーシング。

05

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

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

1px solid #EAECF0

0px 2px 4px 0px rgba(0, 0, 0, 0.075) · 0px 0px 5px 0px rgb(128, 128, 128)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

センタリングされたコンテンツコンテナと交互に配置されるフル幅ヒーローセクション。

07

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

200msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

ホバー時の滑らかな色と背景のトランジション(0.2秒)。 · インタラクティブ要素や矢印の右方向への移動。

リンクやボタンの微細な色の変化や背景のフィル。 · 標準カーソルポインタでの即座のレスポンス。

08

コンポーネント

09

文体と禁止事項

10

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

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

11

System Prompt

Cockroach Labsは、クラウドネイティブデータベースに特化した開発者向けSaaSプラットフォームです。そのデザインはクリーンで権威があり、ヒューマニストサンセリフタイプシステム(Poppins/Open Sans)とモノクロームパレット(黒/白/グレー)を採用し、鮮やかな紫のアクセント(#6933FF)で点睛を加えています。レイアウトは、大胆なタイポグラフィと十分な余白を中心に構成され、信頼性とスケールを伝えます。重要なデザインルール:装飾的なセリフ、彩度の低いパレット、複雑で重いシャドウを避け、すべてのプライマリユーザーインタラクションに際立った紫のアクセントを維持します。技術的な意思決定者を対象とし、プレミアムで信頼できる印象を提供します。

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

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

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

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