PagerDuty

PagerDuty P 마크 + 상태 카운터 + 즉시 조치형 인시던트 테이블

서양개발 도구엔터프라이즈차가운modern-minimal고딕compactsoftflat라이트공식한글 지원출시 2009개정 2025

갤러리에서 열기 — 적용 예시 · 가이드 다운로드

Brand DNA

브랜드 DNA

브랜드명: PagerDuty
한 줄 정체성: 인시던트 관리·온콜 호출 플랫폼 — 알림→트리아지→레졸루션 자동화
공식 디자인 철학: 명확성과 유용성(Clarity and utility) — 중요한 신호를 즉시 식별하고 다음 조치로 연결
시그니처 요소 1개: 정밀한 그린 P 마크 + PagerDuty Green(#048A24) + Triggered(빨강)·Acknowledged(오렌지)·No open incidents(블루) 상태 카운터와 조밀한 인시던트 테이블

Tone & Mood

톤 & 무드

핵심 키워드 3개: 인시던트, 즉응, 절차
무드 설명: 라이트 전용 웹 앱 위에 상태 요약, 필터, 데이터 테이블을 촘촘히 배치한다. 색은 브랜드 그린 액션과 Triggered·Acknowledged 상태 신호에 집중하고 본문은 단정한 뉴트럴로 유지한다.
비주얼 스타일: 모던 미니멀
밀도(Density): Compact — 한 화면에서 많은 인시던트의 상태·긴급도·담당자를 비교
모서리 성향: Soft (4~6px)
평면성: Flat — 1px 보더, 상태 점, 얕은 표면 위계

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - 공식 PagerDuty Green을 중심으로 한 제품 UI 스케일 */
  --color-primary-50:  #E8F5EC;
  --color-primary-100: #C8E8D0;
  --color-primary-200: #9BD5AA;
  --color-primary-300: #68BF7F;
  --color-primary-400: #35A654;
  --color-primary-500: #048A24;   /* 공식 PagerDuty Green */
  --color-primary-600: #03751F;
  --color-primary-700: #005A2F;   /* 공식 PagerDuty Dark Green */
  --color-primary-800: #01451F;
  --color-primary-900: #003217;

  /* Incident status / urgency */
  --color-status-triggered: #DA2D27;
  --color-status-acknowledged: #E58B00;
  --color-status-empty: #2D6FBF;
  --color-prio-p1: #DA2D27;
  --color-prio-p2: #B96A00;
  --color-prio-p3: #2D6FBF;
  --color-prio-p4: #048A24;
  --color-prio-p5: #5F6873;

  /* Neutral */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F5F7FA;
  --color-neutral-100:  #ECEFF4;
  --color-neutral-200:  #DDE2E8;
  --color-neutral-300:  #B7BFCA;
  --color-neutral-500:  #8590A2;
  --color-neutral-700:  #5F6873;
  --color-neutral-800:  #2D343C;
  --color-neutral-900:  #161B22;
  --color-neutral-1000: #0D1117;

  /* Semantic (alias to priority) */
  --color-success-bg: #E8F5EC;
  --color-success-fg: #005A2F;
  --color-warning-bg: #FFF1D4;
  --color-warning-fg: #7F5500;
  --color-error-bg:   #FFE0DC;
  --color-error-fg:   #9F1F1A;
  --color-info-bg:    #E0EBF7;
  --color-info-fg:    #2D6FBF;

  /* Surface */
  --bg-base:     #F5F7FA;
  --bg-subtle:   #ECEFF4;
  --bg-elevated: #FFFFFF;
  --bg-overlay:  rgba(22,27,34,0.50);

  /* Text */
  --text-primary:    #161B22;
  --text-secondary:  #2D343C;
  --text-tertiary:   #5F6873;
  --text-on-primary: #FFFFFF;
  --text-link:       #03751F;
  --text-disabled:   #B7BFCA;

  /* Border */
  --border-default: #DDE2E8;
  --border-subtle:  #ECEFF4;
  --border-strong:  #B7BFCA;
  --border-focus:   #048A24;
}

Typography

타이포그래피

폰트 페어링:
- 영문: Plain (공식 브랜드, 라이선스 폰트) / Arial / Helvetica Neue
- 코드: JetBrains Mono / SF Mono
- 한글: Pretendard / Noto Sans KR
위계:
- Display: 32px / 700 / 1.2
- H1: 24px / 700 / 1.25
- H2: 19px / 700 / 1.3
- H3: 16px / 700 / 1.35
- Body Large: 15px / 400 / 1.55
- Body: 13px / 400 / 1.5
- Body Small: 12px / 500 / 1.4
- Code: 12px / 400 / 1.55 mono
- Caption: 11px / 700 / 1.3 (uppercase + tracking)

Spacing

스페이싱

Base unit: 4px
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; ``

Border Radius

--radius-none: 0;
--radius-sm: 2px;
--radius-md: 4px;     /* 카드 시그니처 */
--radius-lg: 6px;
--radius-xl: 10px;
--radius-full: 9999px;

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(22,27,34,0.06);
--shadow-md: 0 4px 12px rgba(22,27,34,0.08);
--shadow-lg: 0 12px 32px rgba(22,27,34,0.14);

Iconography

스타일: Outline (2px) — 자체 + Phosphor
Stroke 굵기: 2px
모서리 처리: Round
추천 라이브러리: Phosphor / Lucide

Component Guide

컴포넌트 가이드

Button

.btn { font: 700 13px/1 Plain, Arial, sans-serif; border-radius: 4px; padding: 9px 18px; border: 1px solid transparent; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--color-primary-600); }
.btn-primary:active { background: var(--color-primary-700); }
.btn-secondary { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-strong); }
.btn-secondary:hover { border-color: var(--text-tertiary); background: var(--bg-subtle); }
.btn:disabled, .btn.is-loading { opacity: 0.45; cursor: not-allowed; }
.btn-ack { background: var(--color-warning-fg); color: #fff; }
.btn-resolve { background: var(--color-primary-500); color: #fff; }
.btn-escalate { background: var(--color-prio-p1); color: #fff; }

Input

.input { background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 4px; padding: 8px 12px; font: 400 13px/1.4 inherit; color: var(--text-primary); }
.input:focus { border-color: var(--color-primary-500); outline: 2px solid rgba(4,138,36,0.18); }
.input[aria-invalid="true"] { border-color: var(--color-error-fg); outline-color: rgba(218,45,39,0.14); }
.input:disabled { background: var(--bg-subtle); color: var(--text-disabled); cursor: not-allowed; }
.search { background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 4px; padding: 7px 10px; font: 500 13px/1 inherit; color: var(--text-primary); }

Card / Incident Table

.summary-card { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 16px; }
.summary-card .label { font: 700 11px/1.3 inherit; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.summary-card .value { margin-top: 6px; font: 700 28px/1 inherit; color: var(--text-primary); }
.incident-table { overflow: hidden; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.incident-row { min-height: 58px; padding: 10px 14px; display: grid; grid-template-columns: 18px 92px minmax(220px,1fr) 94px 110px 116px; gap: 12px; align-items: center; border-top: 1px solid var(--border-subtle); }
.incident-row:hover { background: var(--color-neutral-50); }
.incident-row .title { font: 700 13px/1.35 inherit; color: var(--text-link); }
.incident-row .meta { font: 500 11px/1.4 inherit; color: var(--text-tertiary); margin-top: 2px; }
.status-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-status-triggered); box-shadow: 0 0 0 3px var(--color-error-bg); }
.status-dot.ack { background: var(--color-status-acknowledged); box-shadow: 0 0 0 3px var(--color-warning-bg); }
.timeline { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 4px; padding: 10px 14px; }
.timeline .row { display: grid; grid-template-columns: 70px 1fr; gap: 12px; padding: 6px 0; font: 500 12px/1.4 inherit; border-bottom: 1px dashed var(--border-default); }
.timeline .row:last-child { border-bottom: 0; }
.timeline .row .t { color: var(--text-tertiary); font: 600 11px/1.4 'JetBrains Mono', monospace; }

Badge / Tag

.badge-prio-p1 { background: var(--color-error-bg); color: var(--color-error-fg); border-radius: 3px; padding: 2px 8px; font: 700 11px/1.3 inherit; text-transform: uppercase; letter-spacing: 0.04em; }
.badge-prio-p2 { background: var(--color-warning-bg); color: var(--color-warning-fg); border-radius: 3px; padding: 2px 8px; font: 700 11px/1.3 inherit; text-transform: uppercase; letter-spacing: 0.04em; }
.badge-prio-p3 { background: var(--color-info-bg); color: var(--color-info-fg); border-radius: 3px; padding: 2px 8px; font: 700 11px/1.3 inherit; text-transform: uppercase; letter-spacing: 0.04em; }
.badge-prio-p4 { background: var(--color-success-bg); color: var(--color-success-fg); border-radius: 3px; padding: 2px 8px; font: 700 11px/1.3 inherit; text-transform: uppercase; letter-spacing: 0.04em; }
.badge-status-triggered { background: rgba(218,45,39,0.10); color: var(--color-prio-p1); border-radius: 3px; padding: 2px 8px; font: 700 11px/1.3 inherit; }
.badge-status-ack       { background: rgba(229,139,0,0.12); color: #8A5100; border-radius: 3px; padding: 2px 8px; font: 700 11px/1.3 inherit; }
.badge-status-resolved  { background: rgba(4,138,36,0.10); color: var(--color-primary-700); border-radius: 3px; padding: 2px 8px; font: 700 11px/1.3 inherit; }
.tag-service { background: var(--bg-subtle); color: var(--text-secondary); border: 1px solid var(--border-default); border-radius: 3px; padding: 1px 8px; font: 600 11px/1.3 'JetBrains Mono', monospace; }

Navigation (Top)

.topbar { min-height: 48px; background: var(--bg-elevated); color: var(--text-primary); padding: 0 18px; border-bottom: 1px solid var(--border-default); display: flex; align-items: center; gap: 18px; }
.topbar .brand-mark { width: 25px; height: 25px; color: var(--color-primary-500); }
.topbar .item { align-self: stretch; display: flex; align-items: center; font: 700 13px/1 inherit; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; }
.topbar .item:hover, .topbar .item.active { color: var(--text-primary); border-bottom-color: var(--color-primary-500); }

Motion

--duration-fast: 100ms;
--duration-base: 200ms;
--duration-slow: 320ms;
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);

Anti-patterns

1. 웹 앱에 근거 없는 다크 모드 추가 금지 — 공식 웹 제품은 라이트 테마만 제공 2. "PD" 글자를 초록 사각형에 넣어 공식 로고처럼 사용 금지 — 정밀한 P 마크 사용 3. Triggered·Acknowledged·Resolved를 같은 색으로 표현 금지 — 상태 색 구분이 즉시 대응의 핵심 4. 인시던트 행을 12px 이상의 둥근 카드 묶음으로 표현 금지 — 조밀한 표와 4px Soft 위계 유지 5. 본문에 명조/세리프 금지 — Plain 계열의 명료한 그로테스크 산세리프 톤 유지

PagerDuty

Brand DNA

브랜드 DNA

Tone & Mood

톤 & 무드

Color System

컬러 시스템 (CSS 변수)

Typography

타이포그래피

Spacing

스페이싱

Border Radius

Border Radius

Shadow / Elevation

Shadow / Elevation

Iconography

Iconography

Component Guide

컴포넌트 가이드

Motion

Motion

Anti-patterns

Anti-patterns

Sources

출처