Datadog
An observability platform with a dark, density-optimized interface built around Datadog's purple (#774AA4 / #9C55E8) on a near-black canvas (#1B1B1B) with rich multi-color chart palettes and green/red semantic indicators for system health. The product serves engineers who monitor production infrastructure — the design prioritizes information density, visual scanning speed, and customizable dashboards over aesthetic refinement. The dog mascot (Bits) appears in marketing contexts; the product is serious, functional, and tailored for on-call engineers reading dashboards at 3am. Typography uses Inter or system fonts at small sizes for maximum data density.
Color Tokens
1. Visual Theme & Atmosphere
Datadog is purpose-built for the on-call engineer. The dark canvas isn't a trend choice — it's a practical decision for monitors that need to be readable on dark screens at night without eye strain. Every pixel of the dashboard is information: time-series charts, log streams, trace waterfalls, SLO burn rates. The purple brand color appears on primary navigation and brand moments; the product relies on a rich multi-color chart palette to differentiate metrics. The interface rewards expertise: dense, configurable, and powerful.
2. Color System
- Purple primary: #774AA4 — brand, primary navigation active state
- Lighter purple: #9C55E8 — interactive elements, chart series 1
- Canvas: #1B1B1B — dark enough for eye comfort, light enough to see screen reflections
- Surface layers: #242424 / #2D2D2D — dashboard panels, widget containers
- Chart palette: 5+ colors (purple, blue, green, orange, red) for multi-metric graphs
- Semantic: Green #1ABE71 (healthy), Red #EF4444 (alert), Orange #F5A623 (warning), Blue #2D9BF0 (info)
3. Typography
Inter at 13px body — smaller than most products, reflecting the density requirement of infrastructure dashboards. Every pixel of vertical space is used. Headers are 700 weight. Metric numbers display at larger sizes (24–36px) for at-a-glance reading from across the room. Monospace for log lines, trace IDs, and code.
4. Components & Patterns
- Dashboard grid: Configurable widget canvas, drag-to-resize, many widget types
- Timeseries widget: Line/area chart with multi-metric overlay, interactive crosshair, legend
- Alert list: Status dot + metric name + threshold + current value — scannable at speed
- Log explorer: Three-panel: filter bar / log list / log detail, with attribute facets left
- APM trace waterfall: Nested service spans, duration bar, error highlight in red
- SLO widget: Circular progress + burn rate chart + remaining error budget
5. Spacing & Layout
Dashboard: full-viewport grid, no fixed sidebar in dashboard mode. Nav is a slim left sidebar (48px icons only, expandable). Widget padding: 12px. Log rows: 24px height for density. Everything is configurable.
6. Motion & Interaction
Real-time chart updates stream smoothly. Alert state change animates the status dot. Log lines flow in as they arrive. Dashboard widget resize has smooth animation. Tooltip crosshair follows cursor precisely. Fast, because milliseconds matter in monitoring.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for