Elastic UI

Difficulty:
Design System
Elastic UI Effect Preview

Effect Preview

Design Tokens

Key tokens derived from official brand references and this style's prompt. Copy them or pair with the DESIGN.md below.

Colors

  • primaryCurated

    Primary actions & highlights

  • on-primaryDerived

    Text on primary

  • secondaryDerived

    Chips, badges & soft emphasis

  • on-secondaryDerived

    Text on secondary

  • neutralCurated

    Page canvas

  • on-neutralDerived

    Text on canvas

  • surfaceDerived

    Cards, panels & elevated containers

  • on-surfaceDerived

    Text on surface

  • borderDerived

    Borders & dividers

Radius & Shapes

Prompt
sm · 4px
md · 8px
lg · 12px
full

Spacing

Derived
  • sm8px
  • md12px
  • lg24px

Elevation

Derived

Depth is expressed through hairline borders and tonal layering.

Typography

Prompt
  • Ag

    Headings 32px · bold

    Inter

  • Ag

    Body 16px · regular

    Inter

  • Ag

    Labels 13px · medium

    Inter

Elastic UI (EUI) is built for Kibana and the Elasticsearch ecosystem: #0077CC blue carries primary actions, a #F5F7FA canvas with #343741 ink keeps the information layer quiet, and graded radii from 4px to 12px map inline elements, controls, and panels. Dense tables, filters, and stat cards keep massive datasets readable and controllable — made for log analytics and observability products.

Elastic UIDesign System

Prompt Template

Base Template
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.

Variant Prompts

📱 Mobile
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.
📊 Dashboard
Design a dashboard with Elastic UI design language. Use Elastic UI color identity with #0077CC accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Elastic UI visual identity. Use Elastic UI color identity with #0077CC accents. Compelling, conversion-focused.

Usage Examples

EUI Data Table Admin

Dashboard
Build a data table admin with Elastic UI style: #F5F7FA canvas, dense tables, filter bar, stat cards, and #0077CC primary actions.

EUI Log Analytics Console

Web
Design a log analytics console with EUI aesthetics: query bar, facet filters, dense result rows, and clear focus rings in #0077CC.

✅ Best For

  • Log and observability platforms
  • Data-dense back offices
  • Search and analytics products

❌ Avoid For

  • Emotive consumer products
  • Lightweight content sites

DESIGN.md File

A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.

Download