New Relic DESIGN.md

Observability platform design with bold teal identity, full-stack telemetry surfaces, query-builder clarity, and site-reliability UX.

1. Visual Theme & Atmosphere

New Relic should feel comprehensive, intelligent, and reliable. The design language communicates APM, infrastructure monitoring, distributed tracing, logs, errors, and the unified observability data platform.

• Mood: comprehensive, reliable, intelligent, technical
• Density: high, with metrics charts, distributed trace waterfalls, log streams, and alert policies
• Character: bold teal brand, dark observability surfaces, multi-signal chart colors, NRQL query panels

2. Color Palette & Roles

The four-tier alert severity scale (critical/high/medium/low) must be applied consistently and never repurposed for non-alert UI states.

3. Typography Rules

css--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", "Roboto Mono", Menlo, monospace;

4. Component Stylings

css.button-primary {
  min-height: 38px;
  padding: 0 16px;
  border: none;
  border-radius: 4px;
  background: #00AC69;
  color: #FFFFFF;
  font: 600 14px/1 Inter, sans-serif;
}

.entity-card {
  border: 1px solid #DDE0E7;
  border-radius: 8px;
  background: #FFFFFF;
  padding: 16px 20px;
}

.nrql-editor {
  border-radius: 8px;
  background: #0E1520;
  color: #C5D0E6;
  padding: 14px 18px;
  font: 400 13px/1.7 "JetBrains Mono", monospace;
  border: 1px solid #1E2A40;
}

.alert-badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 3px;
  font: 700 11px/1.4 Inter, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.trace-span {
  height: 20px;
  border-radius: 3px;
  background: #00AC69;
  opacity: 0.85;
}

5. Layout Principles

Entity Explorer as the top-level navigation surface. Golden signals (latency, traffic, errors, saturation) always visible for any selected service. Distributed trace waterfall spans the full canvas width.

6. Depth & Elevation

css.shadow-card    { box-shadow: 0 1px 4px rgba(29, 36, 51, 0.07); }
.shadow-panel   { box-shadow: 0 6px 20px rgba(0, 172, 105, 0.10); }
.shadow-modal   { box-shadow: 0 20px 50px rgba(29, 36, 51, 0.18); }

Chart canvases use dark surfaces with no shadow — the data provides the visual interest.

7. Do's and Don'ts

Do always show the four golden signals for every service entity. Do use mono font for all NRQL queries and log lines. Do surface critical alerts immediately in the navigation. Do not use teal for alert or error states. Do not mix the severity color scale with chart series colors.

8. Responsive Behavior

Observability is desktop-primary. Mobile is for on-call alert response only.

9. Agent Prompt Guide

Design like New Relic: bold teal CTAs, four-tier severity scale, dark chart canvases, NRQL query panels in mono font, distributed trace waterfall, golden-signal entity cards, and full-stack observability hierarchy.