Elastic AI Design System

01 Overview

65+ AI UX patterns. Built for designers shipping AI products at Elastic.

As Elastic's product surface expanded to include agentic workflows, conversational interfaces, and autonomous detection systems, the design team faced a compounding problem: every team was solving the same AI UX challenges independently with no shared language or reusable components.

I led the design and curation of the Elastic AI Design System — a living library of 65+ patterns covering trust and transparency, chat and composer interfaces, agent and tool-use flows, and onboarding. Each entry includes a definition, when to use it, common pitfalls, real-world examples, and an interactive demo.

02 The Problem

Every team was reinventing the same patterns

Elastic's AI surface area expanded rapidly across security, search, and observability. Each product team designed their own approach to trust signals, reasoning transparency, and human-in-the-loop flows. The result was inconsistent experiences, duplicated effort, and no shared baseline for what good looked like in AI product design.

• No shared language across teams
• The same problems solved multiple times in different product areas
• No documentation of why specific approaches failed in practice
• Static documentation that couldn't demonstrate real interaction behaviour

03 My Role

Designer, curator, and author

• Defined the pattern taxonomy and information architecture
• Researched, wrote, and designed 65+ pattern entries across four categories
• Built interactive demos for each pattern
• Established the when-to-use, pitfalls, and examples format used across all entries
• Aligned the system with the Elastic UI component framework and contributed patterns into the broader design system
• Applied the system directly in AutoDEX and Elastic Detections — the pattern library and product work informed each other in both directions

04 The System

Four pattern categories. 65+ entries.

Trust and transparency

How do you show users what an AI did, how confident it is, and where information came from? Patterns include Citations, Confidence Score, Source Browser, Human Review Gates, and Cost Signals.

Chat and composer

Streaming responses, follow-up suggestions, thread management, and turn-taking for conversational AI. Patterns include Chat Artifacts, Thread Branching, Regeneration Carousel, and Composer Shortcuts.

Agent and tool-use

Designed for agentic products where AI takes actions rather than surfaces information. Patterns include Tool Use, Autonomy Budgets, Approval Workflows, Activity Logs, and Undo Windows.

Onboarding and first-run

How do you teach users what an AI can do without overwhelming them? Patterns include Capability Showcases, Progressive Disclosure, Empty State guidance, and Confidence Calibration.

Confidence Score pattern — definition, use case, examples in the wild, and interactive demo

05 Pattern Anatomy

Every pattern follows the same structure

Each entry includes six elements so designers can find what they need without reading everything.

• Definition — what the pattern is and what problem it solves
• When to use it — the specific conditions where this is the right choice
• Pitfalls — the most common ways this pattern goes wrong
• Examples in the wild — how other products use it
• Interactive demo — a live, interactable example in context
• EUI component reference — the specific components that implement it

06 Impact

A shared language for AI design at Elastic

The system is used by product teams across Elastic Security, Search AI, and Observability. Patterns developed for AutoDEX were extracted into the library and adopted across other Elastic AI surfaces. Several patterns have since been contributed into EUI as official components.

The interactive demos were specifically requested by engineering teams as a behaviour reference, reducing the gap between design intent and implementation.