PagerDuty DESIGN.md

Incident management design with bold green identity, on-call surfaces, alert-severity hierarchy, and operations-first clarity.

1. Visual Theme & Atmosphere

PagerDuty should feel urgent yet controlled, reliable, and operations-focused. The design language communicates incident response, on-call scheduling, alert routing, and service health — making high-stakes operations feel manageable.

• Mood: reliable, urgent, controlled, operational
• Density: high, with incident timelines, alert tables, on-call calendars, and service dependency maps
• Character: bold green brand, near-black ops surfaces, severity-coded alert rows, clear escalation hierarchy

2. Color Palette & Roles

The P1–P4 severity color scale is the most critical design element in the entire product. It must never be reused for other purposes and must remain consistent across all views.

3. Typography Rules

css--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

4. Component Stylings

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

.incident-row {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #E1E4E8;
  border-left: 3px solid transparent;
}

.incident-row[data-severity="critical"] { border-left-color: #E8000E; }
.incident-row[data-severity="high"]     { border-left-color: #FF6B00; }
.incident-row[data-severity="medium"]   { border-left-color: #F5A800; }
.incident-row[data-severity="low"]      { border-left-color: #3D70D6; }

.severity-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;
}

.service-node {
  border: 1.5px solid #E1E4E8;
  border-radius: 8px;
  padding: 10px 14px;
  background: #FFFFFF;
  font: 600 13px/1.3 Inter, sans-serif;
}

5. Layout Principles

Active incidents must be above the fold at all times. Left-border color coding on incident rows provides instant severity scanning. On-call schedule shows who is responsible right now — make it unmissable.

6. Depth & Elevation

css.shadow-card   { box-shadow: 0 1px 3px rgba(31, 41, 55, 0.08); }
.shadow-panel  { box-shadow: 0 6px 20px rgba(6, 172, 56, 0.10); }
.shadow-modal  { box-shadow: 0 20px 50px rgba(31, 41, 55, 0.18); }

Incident list rows are flat. Modals for acknowledging and resolving incidents carry stronger shadow to signal action required.

7. Do's and Don'ts

Do always surface active incident count in the navigation. Do use left-border color as the primary severity signal on list rows. Do make "Acknowledge" and "Resolve" the most accessible actions. Do not reuse P1–P4 severity colors for any other purpose. Do not bury the on-call schedule — it is a primary navigation destination.

8. Responsive Behavior

Mobile is critical — engineers must be able to acknowledge and resolve incidents from their phone at 3am.

9. Agent Prompt Guide

Design like PagerDuty: bold green CTAs, severity-coded left-border incident rows, P1–P4 color scale strictly maintained, dark ops header, on-call schedule prominence, and acknowledge/resolve action clarity.