Elastic UI（EUI）は Kibana と Elasticsearch のエコシステムのために生まれました。青 #0077CC が主要操作を担い、ライトグレー #F5F7FA のキャンバスと #343741 のインク色テキストが静かな情報層を構成し、4px から 12px までの段階的な角丸がインライン、コントロール、パネルの階層に対応します。密集したテーブル、フィルター、統計カードが大量のデータを読み取り可能かつ制御可能にします。ログ分析と可観測性（オブザーバビリティ）プロダクトに適しています。
Elastic UIデザインシステム
プロンプトテンプレート
基本テンプレート
Design an Elastic UI (EUI)-inspired data interface. - #0077CC blue for primary actions and focus rings; - #F5F7FA canvas with #343741 ink and #D3DAE6 hairlines; - 8px radii for controls and 12px for panels; - Dense data tables, filter bars, and stat cards; - Kibana-style analytics and observability layouts. Colors: #0077CC, #F5F7FA, #D3DAE6, #343741 with #0077CC accent. Typography: Inter.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Elastic UI aesthetics. Use Elastic UI color identity with #0077CC accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Elastic UI style. Use Elastic UI color identity with #0077CC accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Elastic UI design language. Use Elastic UI color identity with #0077CC accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Elastic UI visual identity. Use Elastic UI color identity with #0077CC accents. Compelling, conversion-focused.
使用例
EUI データテーブルの管理画面
ダッシュボードBuild a data table admin with Elastic UI style: #F5F7FA canvas, dense tables, filter bar, stat cards, and #0077CC primary actions.
EUI ログ分析コンソール
WebDesign a log analytics console with EUI aesthetics: query bar, facet filters, dense result rows, and clear focus rings in #0077CC.
✅ 適した用途
- ログと可観測性プラットフォーム
- データ密度の高い管理画面
- 検索・分析プロダクト
❌ 適さない用途
- 感情に訴えるコンシューマー製品
- 軽量なコンテンツサイト
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。