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 日誌分析主控台
Web 端Design 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 程式設計工具使用。