Grafana

오렌지 횃불 로고 + 다크 대시보드 + 시계열 라인 차트의 관측성 표준

서양개발 도구인프라따뜻한modern-minimal고딕compactsoftsubtle다크라이트공식한글 지원출시 2014개정 2025

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

Brand DNA

브랜드 DNA

브랜드명: Grafana Labs
한 줄 정체성: 오픈소스 관측성 대시보드 — Prometheus·Loki·Tempo 등 다중 데이터 소스 통합
공식 디자인 철학: Saga Design System — 데이터 가시성 우선, 다크 우선 시계열 톤
시그니처 요소 1개: 오렌지 횃불 로고 + Grafana Orange(#F46800) 강조 + 짙은 차콜(#111217) 다크 캔버스 + 시계열 라인 차트 다색 팔레트(오렌지/그린/블루). Datadog 보라·Kibana 라이트와 정반대

Tone & Mood

톤 & 무드

핵심 키워드 3개: 관측성, 다크대시, 시계열
무드 설명: 기본값은 다크 모드이며 공식 라이트 테마도 지원한다. 패널은 낮은 대비의 1px 보더로 구획하고, 차트 색은 시리즈별로 분리(A=오렌지, B=블루, C=그린)한다. 모서리는 3~4px Soft.
비주얼 스타일: 모던 미니멀
밀도(Density): Compact — 한 화면 다중 패널
모서리 성향: Soft (3~4px)
평면성: Subtle — 1px 보더 + 미세 그림자

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Grafana Orange */
  --color-primary-50:  #FFEEDB;
  --color-primary-100: #FFCC93;
  --color-primary-200: #FFAB55;
  --color-primary-300: #FF8B1E;
  --color-primary-400: #FA7818;
  --color-primary-500: #F46800;   /* Grafana Orange */
  --color-primary-600: #C95400;
  --color-primary-700: #9A4000;
  --color-primary-800: #6C2C00;
  --color-primary-900: #421A00;

  /* Series colors (시각화 팔레트) */
  --series-1: #F46800;   /* Orange */
  --series-2: #5794F2;   /* Blue */
  --series-3: #73BF69;   /* Green */
  --series-4: #F2CC0C;   /* Yellow */
  --series-5: #B877D9;   /* Purple */
  --series-6: #FF780A;
  --series-7: #37872D;
  --series-8: #C4162A;

  /* Neutral - Grafana dark grays */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F4F5F5;
  --color-neutral-100:  #DEE0E2;
  --color-neutral-200:  #CCCCDC;
  --color-neutral-300:  #8E9097;
  --color-neutral-500:  #5A5C63;
  --color-neutral-700:  #44464D;
  --color-neutral-800:  #2C3137;
  --color-neutral-900:  #181B1F;
  --color-neutral-1000: #111217;

  /* Semantic */
  --color-success-bg: #1E3322;
  --color-success-fg: #73BF69;
  --color-warning-bg: #3D2D0A;
  --color-warning-fg: #FF9830;
  --color-error-bg:   #3D1A1F;
  --color-error-fg:   #F2495C;
  --color-info-bg:    #1E2A40;
  --color-info-fg:    #5794F2;

  /* Surface */
  --bg-base:     #111217;   /* page */
  --bg-subtle:   #0E0F12;
  --bg-elevated: #181B1F;   /* panel */
  --bg-overlay:  rgba(0,0,0,0.55);

  /* Text */
  --text-primary:    #FFFFFF;
  --text-secondary:  #CCCCDC;
  --text-tertiary:   #8E9097;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #5A5C63;

  /* Border */
  --border-default: #2C3137;
  --border-subtle:  #181B1F;
  --border-strong:  #44464D;
  --border-focus:   #F46800;
}

[data-theme="light"] {
  /* Semantic */
  --color-success-bg: #E5F3E8;
  --color-success-fg: #3C7A33;
  --color-warning-bg: #FCF0DC;
  --color-warning-fg: #B5670B;
  --color-error-bg:   #FBE4E7;
  --color-error-fg:   #C4162A;
  --color-info-bg:    #E3ECFB;
  --color-info-fg:    #3360B5;

  /* Surface */
  --bg-base:     #F4F5F5;
  --bg-subtle:   #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-overlay:  rgba(36,41,46,0.40);

  /* Text */
  --text-primary:    #181B1F;
  --text-secondary:  #44464D;
  --text-tertiary:   #6E7077;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #B0B3BA;

  /* Border */
  --border-default:  #DEE0E2;
  --border-subtle:   #ECEDEE;
  --border-strong:   #CCCCDC;
  --border-focus:    #F46800;
}

Typography

타이포그래피

폰트 페어링:
- 영문: Inter / Roboto / system-ui
- 코드/쿼리: Roboto Mono / SF Mono / Consolas
- 한글: Pretendard / Noto Sans KR
위계:
- Display: 28px / 700 / 1.2
- H1: 22px / 600 / 1.25
- H2: 18px / 600 / 1.3
- H3: 15px / 600 / 1.35
- Body Large: 14px / 400 / 1.5
- Body: 13px / 400 / 1.5
- Body Small: 12px / 400 / 1.4
- KPI Number: 28px / 700 / 1
- Code: 12px / 400 / 1.55 mono
- Caption: 10px / 600 / 1.3 (uppercase + tracking)

Spacing

스페이싱

Base unit: 4px
토큰: ``css --space-xs: 4px; --space-sm: 6px; --space-md: 10px; --space-lg: 14px; --space-xl: 20px; --space-2xl: 32px; --space-3xl: 48px; ``

Border Radius

--radius-none: 0;
--radius-sm: 2px;
--radius-md: 3px;
--radius-lg: 4px;     /* 패널 시그니처 */
--radius-xl: 8px;
--radius-full: 9999px;

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
--shadow-md: 0 4px 12px rgba(0,0,0,0.55);
--shadow-lg: 0 12px 32px rgba(0,0,0,0.65);

Iconography

스타일: Saga / IconStrips — Outline 1.5px
Stroke 굵기: 1.5~2px
모서리 처리: Round
추천 라이브러리: Phosphor / 자체

Component Guide

컴포넌트 가이드

Button

.btn { font: 600 13px/1 Inter, sans-serif; border-radius: 3px; padding: 7px 14px; border: 0; cursor: pointer; }
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--color-primary-600); }
.btn-secondary { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-strong); }
.btn-secondary:hover { background: var(--color-neutral-700); }
.btn-destructive { background: var(--color-error-fg); color: #fff; }
.btn-run { background: var(--color-primary-500); color: #fff; padding: 6px 12px; font: 700 12px/1 inherit; }

Input (Query bar)

.input { background: var(--bg-base); border: 1px solid var(--border-strong); border-radius: 3px; padding: 7px 10px; font: 500 13px/1.4 'Roboto Mono', monospace; color: var(--text-primary); }
.input:focus { border-color: var(--color-primary-500); outline: 0; }
.query-row { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 4px; padding: 10px 12px; display: flex; gap: 8px; align-items: center; }
.query-row .ds { background: rgba(244,104,0,0.15); color: var(--color-primary-500); padding: 3px 8px; border-radius: 3px; font: 700 11px/1.3 inherit; }

Card (Panel)

.panel { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 4px; padding: 8px 10px 10px; }
.panel .head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.panel h3 { margin: 0; font: 600 13px/1.3 inherit; color: var(--text-primary); }
.panel .meta { font: 500 10px/1 inherit; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; margin-left: auto; }
.stat .num { font: 700 28px/1 inherit; color: var(--text-primary); margin: 4px 0; }
.stat.warn .num { color: var(--color-warning-fg); }
.stat.err  .num { color: var(--color-error-fg); }
.legend { display: flex; gap: 12px; font: 500 11px/1 inherit; color: var(--text-tertiary); margin-top: 6px; flex-wrap: wrap; }
.legend .item { display: inline-flex; align-items: center; gap: 5px; }
.legend .swatch { width: 8px; height: 8px; border-radius: 1px; }

Badge / Tag

.badge-state-up    { background: var(--color-success-bg); color: var(--color-success-fg); border-radius: 3px; padding: 2px 7px; font: 700 11px/1.3 inherit; text-transform: uppercase; letter-spacing: 0.05em; }
.badge-state-down  { background: var(--color-error-bg); color: var(--color-error-fg); border-radius: 3px; padding: 2px 7px; font: 700 11px/1.3 inherit; text-transform: uppercase; letter-spacing: 0.05em; }
.tag-ds-prom { background: rgba(244,104,0,0.15); color: var(--color-primary-500); border-radius: 3px; padding: 1px 6px; font: 700 11px/1.3 inherit; }
.tag-ds-loki { background: rgba(115,191,105,0.15); color: var(--series-3); border-radius: 3px; padding: 1px 6px; font: 700 11px/1.3 inherit; }
.tag-ds-tempo{ background: rgba(184,119,217,0.15); color: var(--series-5); border-radius: 3px; padding: 1px 6px; font: 700 11px/1.3 inherit; }

Navigation (Sidebar)

.sidebar { background: var(--color-neutral-1000); border-right: 1px solid var(--border-default); width: 56px; display: flex; flex-direction: column; align-items: center; padding-top: 8px; gap: 6px; }
.sidebar .logo { width: 36px; height: 36px; background: var(--color-primary-500); border-radius: 9999px; display: grid; place-items: center; color: #fff; font: 900 18px/1 inherit; }
.sidebar .item { width: 40px; height: 40px; display: grid; place-items: center; color: var(--text-tertiary); font-size: 18px; cursor: pointer; border-radius: 3px; }
.sidebar .item:hover { background: var(--bg-elevated); color: var(--text-primary); }
.sidebar .item.active { color: var(--color-primary-500); background: var(--bg-elevated); }

Motion

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

Anti-patterns

1. 다크 기본 정체성을 지우고 라이트만 제시하기 금지 — 공식 라이트 테마는 지원하되 기본값은 다크 2. 시계열 라인을 단색으로 그리기 금지 — 시리즈별 색 분리 (A=오렌지, B=블루...) 3. 패널 모서리 8px 이상 금지 — 3~4px Soft 4. 본문 강조를 빨강으로 사용 금지 — 빨강은 오류·임계치에만, 강조는 오렌지 5. 오렌지 외 다른 브랜드 컬러 추가 금지 — Grafana Orange 단일 강조

Grafana

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

출처