Elastic UI

# Elastic UI — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Elastic. "Elastic UI" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Elastic UI
**Owner:** Elastic
**Official documentation:** https://eui.elastic.co/
**Visual character:** Observability-dashboard fluency: Inter over layered blue-grays, Elastic teal signals, and charts treated as first-class citizens.

---

## Summary

Framework for creating accessible, composable, and beautiful user interfaces.

_Confidence: high. Values are drawn from well-documented public token references._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Primary Blue | `#0077cc` | `--eui-color-primary` | Primary actions and links |
| Text | `#343741` | `--eui-color-text` | Primary text |
| Subdued Text | `#646a77` | `--eui-color-subdued-text` | Secondary text |
| Empty Shade | `#ffffff` | `--eui-color-empty-shade` | Surfaces |
| Lightest Shade | `#f1f4fa` | `--eui-color-lightest-shade` | Subtle background |
| Light Shade Border | `#d3dae6` | `--eui-color-light-shade` | Borders |
| Danger | `#bd271e` | `--eui-color-danger` | Errors |
| Success | `#00bfb3` | `--eui-color-success` | Success (Elastic teal) |
| Warning | `#fec514` | `--eui-color-warning` | Warnings |
| Accent Pink | `#f04e98` | `--eui-color-accent` | Vis accent |

## Typography

- **Body:** Inter — weights 400, 500, 600, 700 — `Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif`
- **Mono:** Roboto Mono — weights 400 — `'Roboto Mono', Menlo, Courier, monospace`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| title-l | `27px` | `36px` |
| title-m | `22px` | `30px` |
| title-s | `17px` | `24px` |
| body (s) | `14px` | `21px` |
| body-xs | `12px` | `18px` |

## Spacing

Base unit: `16px (euiSize)`

Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `32px` · `40px`

## Corner radius

| Name | Value |
| --- | --- |
| small | `4px` |
| default | `6px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| euiShadowMedium | `0 0.9px 4px -1px rgba(0,0,0,0.08), 0 2.6px 8px -1px rgba(0,0,0,0.06), 0 5.7px 12px -1px rgba(0,0,0,0.05), 0 15px 15px -1px rgba(0,0,0,0.04)` |

## Motion

| Name | Value |
| --- | --- |
| fast | `150ms` |
| normal | `250ms cubic-bezier(0.694, 0.0482, 0.335, 1)` |

## Quick start (CSS)

```css
/* Elastic UI — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://eui.elastic.co/ */

:root {
  /* Color */
  --eui-color-primary: #0077cc; /* Primary actions and links */
  --eui-color-text: #343741; /* Primary text */
  --eui-color-subdued-text: #646a77; /* Secondary text */
  --eui-color-empty-shade: #ffffff; /* Surfaces */
  --eui-color-lightest-shade: #f1f4fa; /* Subtle background */
  --eui-color-light-shade: #d3dae6; /* Borders */
  --eui-color-danger: #bd271e; /* Errors */
  --eui-color-success: #00bfb3; /* Success (Elastic teal) */
  --eui-color-warning: #fec514; /* Warnings */
  --eui-color-accent: #f04e98; /* Vis accent */

  /* Typography */
  --font-body: Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Roboto Mono', Menlo, Courier, monospace;

  /* Type scale */
  --text-title-l: 27px /* line-height 36px */;
  --text-title-m: 22px /* line-height 30px */;
  --text-title-s: 17px /* line-height 24px */;
  --text-body-s-: 14px /* line-height 21px */;
  --text-body-xs: 12px /* line-height 18px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;

  /* Radius */
  --radius-small: 4px;
  --radius-default: 6px;

  /* Elevation */
  --shadow-euishadowmedium: 0 0.9px 4px -1px rgba(0,0,0,0.08), 0 2.6px 8px -1px rgba(0,0,0,0.06), 0 5.7px 12px -1px rgba(0,0,0,0.05), 0 15px 15px -1px rgba(0,0,0,0.04);

  /* Motion */
  --motion-fast: 150ms;
  --motion-normal: 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
}
```

## Engineering profile

- **Ships for:** React
- **Token pipeline:** Custom
- **Source model:** Open source

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Elastic UI by Elastic — Framework for creating accessible, composable, and beautiful user interfaces. Character: Observability-dashboard fluency: Inter over layered blue-grays, Elastic teal signals, and charts treated as first-class citizens. Use a primary colour near #0077cc, the typeface "Inter" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 16px (euiSize) base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Elastic UI documentation](https://eui.elastic.co/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/elastic-ui) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._