# Elastic UI (Elastic UI)

> Elastic's interface system is made for searching, filtering and diagnosing large data sets without losing operational density.

- IndexStyle No.561 — https://indexstyle.org/styles/elastic-ui
- Kind: Style · Family: Platform Screen Languages · Era: 2017–
- Mood: Technique, Trust, Exhilaration
- What this family collects: Design languages written down for a platform and published, from the vendors that shipped an operating system to the governments that had no reason to hide rules paid for with public money, every one of them recognisable at a glance.

## Defining characteristics

- Fixed header and left navigation
- Persistent query, filter and time controls
- Tables and time-series charts in shared panels
- Bright series colors limited to data

## Best used for

- Log and security investigation screens
- Products that combine query, table, visualization and detail

## Composition recipe

- Typography & lettering: Separate monospaced values from explanatory sans text and never rely on color alone.
- Layout & structure: Give navigation, query, visualization and detail stable regions; keep time and filters visible.
- Material & texture: Layer neutral surfaces, reserve blue for interaction and bright hues for data series.

## Colour

Read off the reference works below, so a direction rather than a fixed palette.

- Ground: #F5F7FA
- The colour it is remembered by: #00BFB3
- Text and outlines: #343741

## What to avoid

More charts do not create more insight. Remove any panel or series that does not answer the current question.

## Application checklist

Work through this before calling a piece an application of this style.

- [ ] Visible in the piece: Fixed header and left navigation
- [ ] Visible in the piece: Persistent query, filter and time controls
- [ ] Visible in the piece: Tables and time-series charts in shared panels
- [ ] Visible in the piece: Bright series colors limited to data
- [ ] The layout follows: Give navigation, query, visualization and detail stable regions; keep time and filters visible.
- [ ] The lettering follows: Separate monospaced values from explanatory sans text and never rely on color alone.
- [ ] The material and surface follow: Layer neutral surfaces, reserve blue for interaction and bright hues for data series.
- [ ] The colour relation holds: #F5F7FA as ground, #00BFB3 carrying the style, #343741 for text and outlines
- [ ] At least one reference work below has been studied directly
- [ ] The caution above ("What to avoid") has been addressed

## Related styles

- **Carbon Design System (Carbon Design System)** — IBM's system for data-heavy enterprise products, combining a strict grid, IBM Plex type and compact components so complex work remains legible. → https://indexstyle.org/styles/carbon-design-system
- **Solarized (ソラライズド)** — Solarized is a sixteen colour scheme for terminal and GUI applications published by Ethan Schoonover with every value in the open, eight monotones and eight accents. The monotones hold symmetric CIELAB lightness differences, so moving between the light and the dark background keeps the same perceived contrast. It lowers brightness contrast on purpose and lets hue relations, not brightness, separate one token from the next. → https://indexstyle.org/styles/solarized

## Compose it with something else

The dictionary can put this entry in a structural role and another in an accent role, and report where the two fight: https://indexstyle.org/compose?ids=elastic-ui+carbon-design-system

## Further study

- EUI page templates
- Elastic Charts
- Amsterdam and Borealis themes

## Reference works

- Elastic UI Framework — https://eui.elastic.co/

## Source of record

- Elastic UI Framework — https://eui.elastic.co/

## Machine surfaces

- JSON: https://indexstyle.org/api/styles/elastic-ui
- Image-generation prompt (legally clean): https://indexstyle.org/styles/elastic-ui/prompt.txt
- MCP: https://indexstyle.org/mcp (tools: search_styles, get_style, compare_styles, compose_styles, find_related_styles; prompts: image-prompt, apply-style)