## Badges & Pills

### Status Badges

Built-in (Current)

built-in

Running

Running

Latest

Latest

New

new

Passed

PASSED

Failed

FAILED

Pending

PENDING

Outdated

v1.0

### Event Type Badges

ERROR

ERROR

TOOL

TOOL

TEXT

TEXT

RUN

RUN

ACTIVITY

ACTIVITY

### Span Category Pills

LLM

LLM

Agent

Agent

Tool Calls

Tool Calls

Error(s)

Error(s)

## Alert Banners

⚠️
Warning Banner
This is a warning message
❌
Error Banner
This is an error message
✓
Success Banner
This is a success message
ℹ️
Info Banner
This is an info message

## Metric Cards

Accuracy
95.2%
Latency
1.2s
Duration
4m 47s
Error Rate
2.1%

## Buttons

### Primary Actions

### Destructive Actions

## Status Indicators

Online
Offline
✓ Success
✗ Error

## Typography

# Heading 1

text-4xl font-bold

## Heading 2

text-2xl font-bold

### Heading 3

text-lg font-semibold

Body text - Regular paragraph text that appears throughout the application.

text-base

Secondary text - Used for descriptions and helper text.

text-sm text-slate-600 dark:text-slate-400

Tertiary text - Used for labels and metadata.

text-xs text-slate-500

`const example = "code";`

Source Code Pro - Monospace font

## Color Palette

### Primary Colors

Blue 600

#2563eb

OpenSearch Blue

#005EB8

### Semantic Colors

Success

green-500

Error

red-500

Warning

yellow-500

Caution

amber-500

Info

purple-500