디자인 시스템 갤러리 Microsoft Azure

Microsoft Azure

Fluent 2 코발트 + 좌측 사이드바 + sharp 사각 카드의 엔터프라이즈 클라우드

서양인프라개발 도구엔터프라이즈차가운modern-minimal고딕compactsharpflat라이트다크공식한글 지원출시 2010개정 2024

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

Brand DNA

브랜드 DNA

  • 브랜드명: Microsoft Azure
  • 한 줄 정체성: 2010년 시작한 Microsoft의 엔터프라이즈 클라우드 — Windows·Office와 깊게 통합
  • 공식 디자인 철학: Fluent 2 Design System — "Calm, Optimistic, Inclusive"
  • 시그니처 요소 1개: Azure 코발트(#0078D4) + Fluent 2 sharp 사각 카드 + 좌측 카테고리 사이드바. AWS의 짙은 네이비·GCP의 흰 콘솔 사이의 회색-블루 톤

Tone & Mood

톤 & 무드

  • 핵심 키워드 3개: 엔터프라이즈, 정렬, 신뢰
  • 무드 설명: 옅은 회색 캔버스(#F5F5F5) + 흰 카드 + 코발트 헤더 + 사이드바. Fluent 2 sharp 모서리, 1px 보더, 좌측 보더 라인으로 활성 표시.
  • 비주얼 스타일: 모던 미니멀 (Fluent 2)
  • 밀도(Density): Compact — 엔터프라이즈 정보량 우선
  • 모서리 성향: Sharp (0~4px)
  • 평면성: Flat — 1px 보더만

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Azure Cobalt (Fluent Communication Blue) */
  --color-primary-50:  #F3F9FD;
  --color-primary-100: #DEECF9;
  --color-primary-200: #C7E0F4;
  --color-primary-300: #A1CFEC;
  --color-primary-400: #5DB1DC;
  --color-primary-500: #0078D4;   /* Azure Cobalt */
  --color-primary-600: #106EBE;
  --color-primary-700: #005A9E;
  --color-primary-800: #004578;
  --color-primary-900: #002D52;

  /* Service category colors */
  --service-compute:  #0078D4;
  --service-storage:  #00BCF2;
  --service-database: #773ADC;
  --service-ml:       #0098E9;
  --service-network:  #36C2A9;

  /* Neutral - Fluent 2 grays */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #FAFAFA;
  --color-neutral-100:  #F5F5F5;       /* page bg */
  --color-neutral-200:  #EDEBE9;
  --color-neutral-300:  #E1E1E1;       /* border default */
  --color-neutral-500:  #A19F9D;
  --color-neutral-700:  #605E5C;       /* text secondary */
  --color-neutral-800:  #3B3A39;
  --color-neutral-900:  #242424;       /* text primary */
  --color-neutral-1000: #000000;

  /* Semantic - Azure 상태 */
  --color-success-bg: #DFF6DD;
  --color-success-fg: #107C10;       /* Running */
  --color-warning-bg: #FFF4CE;
  --color-warning-fg: #797775;       /* Updating */
  --color-error-bg:   #FDE7E9;
  --color-error-fg:   #A4262C;       /* Failed */
  --color-info-bg:    #EFF6FC;
  --color-info-fg:    #0078D4;

  /* Surface */
  --bg-base:     #F5F5F5;
  --bg-subtle:   #FAFAFA;
  --bg-elevated: #FFFFFF;
  --bg-header:   #0078D4;
  --bg-sidebar:  #FAFAFA;
  --bg-overlay:  rgba(36,36,36,0.45);

  /* Text */
  --text-primary:    #242424;
  --text-secondary:  #3B3A39;
  --text-tertiary:   #605E5C;
  --text-link:       #0078D4;
  --text-link-hover: #004578;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #A19F9D;

  /* Border */
  --border-default: #E1E1E1;
  --border-subtle:  #EDEBE9;
  --border-strong:  #A19F9D;
  --border-focus:   #0078D4;
}

[data-theme="dark"] {
  --bg-base: #1F1F1F;
  --bg-subtle: #292929;
  --bg-elevated: #2E2E2E;
  --bg-sidebar: #292929;
  --text-primary: #FFFFFF;
  --text-secondary: #D2D0CE;
  --border-default: #484644;
}

Typography

타이포그래피

  • 폰트 페어링:
    • 영문: Segoe UI Variable (Windows) → Segoe UI 폴백
    • 한글: Segoe UI Korean / Malgun Gothic 폴백
    • 코드: Cascadia Code / Cascadia Mono / Consolas 폴백
  • 위계 (Fluent 2 Type Ramp):
    • Display: 32px / 600 / 1.25 / -0.015em
    • H1: 24px / 600 / 1.3 / -0.01em
    • H2: 20px / 600 / 1.35 / -0.005em
    • H3: 16px / 600 / 1.4 / 0
    • Body Large: 14px / 400 / 1.5 / 0
    • Body: 13px / 400 / 1.5 / 0
    • Body Strong: 13px / 600 / 1.5 / 0
    • Body Small: 12px / 400 / 1.45 / 0
    • Caption: 11px / 600 / 1.4 / 0.02em UPPERCASE
    • Code: 13px / 400 / 1.5 'Cascadia Code', monospace

Spacing

스페이싱

  • Base unit: 4px (Fluent 2)
  • 토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 20px; --space-2xl: 28px; --space-3xl: 40px; ``
  • Container: max-width 1440px (포털), 좌우 패딩 16px

Border Radius

Border Radius

--radius-none: 0;       /* 카드, 테이블 */
--radius-sm: 2px;       /* Fluent 2 Small */
--radius-md: 4px;       /* 버튼 */
--radius-lg: 8px;
--radius-full: 9999px;

Shadow / Elevation

Shadow / Elevation (Fluent 2 Depth)

--shadow-none: none;
--shadow-2: 0 1px 2px rgba(0,0,0,0.07), 0 0 2px rgba(0,0,0,0.05);
--shadow-4: 0 2px 4px rgba(0,0,0,0.10), 0 0 2px rgba(0,0,0,0.05);
--shadow-8: 0 4px 8px rgba(0,0,0,0.12), 0 0 2px rgba(0,0,0,0.05);
--shadow-16: 0 8px 16px rgba(0,0,0,0.14), 0 0 2px rgba(0,0,0,0.05);
--shadow-28: 0 14px 28px rgba(0,0,0,0.20);

Iconography

Iconography

  • 스타일: Fluent UI Icons (Regular + Filled)
  • Stroke 굵기: 1.5px equivalent
  • 모서리 처리: Square 베이스
  • 추천 라이브러리: Fluent UI Icons / Azure Service Icons

Component Guide

컴포넌트 가이드

Button

.btn { font: 600 13px/1 'Segoe UI Variable', 'Segoe UI', sans-serif; letter-spacing: -0.005em;
       border-radius: 2px; padding: 7px 14px; border: 1px solid transparent;
       display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn-primary { background: var(--color-primary-500); color: #fff; }
.btn-primary:hover { background: var(--color-primary-600); }
.btn-primary:active { background: var(--color-primary-700); }
.btn-secondary { background: #fff; color: var(--text-primary); border-color: var(--border-default); }
.btn-secondary:hover { background: var(--bg-subtle); }
.btn-subtle { background: transparent; color: var(--text-primary); }
.btn-subtle:hover { background: var(--bg-subtle); }
.btn-danger { background: var(--color-error-fg); color: #fff; }

Input

.input { background: #fff; border: 1px solid var(--border-default); border-bottom-width: 2px; border-bottom-color: var(--text-tertiary); border-radius: 2px; padding: 6px 10px; font: 400 13px/1.4 inherit; color: var(--text-primary); }
.input:focus { outline: 0; border-bottom-color: var(--color-primary-500); }
.input-code { font: 400 13px/1.4 'Cascadia Mono', monospace; }

Card / Table Row

.card { background: #fff; border: 1px solid var(--border-default); padding: 12px 14px; box-shadow: var(--shadow-2); border-radius: 0; }
.table { background: #fff; border: 1px solid var(--border-default); }
.table .head { display: grid; grid-template-columns: 1fr 100px 120px 100px 80px; background: var(--bg-subtle); border-bottom: 1px solid var(--border-default); padding: 8px 12px; gap: 10px; font: 600 11px/1.4 inherit; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.table .row { display: grid; grid-template-columns: 1fr 100px 120px 100px 80px; padding: 9px 12px; gap: 10px; border-bottom: 1px solid var(--border-subtle); font: 400 13px/1.4 inherit; align-items: center; }
.table .row:last-child { border-bottom: 0; }
.table .row:hover { background: var(--color-primary-50); }
.table .row .name { color: var(--text-link); font-weight: 600; cursor: pointer; }
.table .row .name:hover { text-decoration: underline; }
.table .row .meta { font: 400 11px/1.3 inherit; color: var(--text-tertiary); margin-top: 1px; }
.table .row .mono { font: 400 12px/1.4 'Cascadia Mono', monospace; color: var(--text-primary); }

Badge / Tag (Status)

.status { padding: 1px 8px; border-radius: 0; font: 600 11px/1.4 inherit; display: inline-flex; align-items: center; gap: 4px; }
.status::before { content: '●'; font-size: 9px; }
.status-running { color: var(--color-success-fg); }
.status-stopped { color: var(--text-tertiary); }
.status-failed  { color: var(--color-error-fg); }
.tag { padding: 2px 8px; border-radius: 2px; font: 600 11px/1.4 inherit; }
.tag-resource { background: var(--color-info-bg); color: var(--color-info-fg); }
.tag-preview  { background: var(--color-warning-bg); color: #8A6900; }

Navigation (Top + Sidebar Blade)

.navbar { background: var(--bg-header); color: #fff; padding: 0 14px; display: flex; align-items: center; gap: 12px; height: 40px; }
.navbar .logo { font: 600 14px/1 'Segoe UI Variable', sans-serif; letter-spacing: -0.005em; }
.navbar .search { flex: 1; max-width: 480px; background: rgba(255,255,255,0.15); border-radius: 2px; padding: 6px 10px; font: 400 12px/1.4 inherit; color: var(--text-on-primary); }
.navbar .right { margin-left: auto; display: flex; align-items: center; gap: 12px; font: 400 12px/1.4 inherit; color: #fff; }
.sidebar { background: var(--bg-sidebar); border-right: 1px solid var(--border-default); padding: 8px 0; width: 200px; }
.sidebar .head { padding: 6px 14px; font: 600 11px/1.4 inherit; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.sidebar .item { padding: 7px 14px; font: 500 12px/1.4 inherit; color: var(--text-primary); cursor: pointer; display: flex; align-items: center; gap: 8px; border-left: 2px solid transparent; }
.sidebar .item:hover { background: var(--bg-base); }
.sidebar .item.active { background: var(--color-primary-50); color: var(--color-primary-700); border-left-color: var(--color-primary-500); padding-left: 12px; }

Motion

Motion

--duration-fast: 100ms;
--duration-base: 200ms;
--duration-slow: 350ms;
--ease-out: cubic-bezier(0.33, 0, 0.67, 1);          /* Fluent standard */
--ease-decelerate: cubic-bezier(0.10, 0.90, 0.20, 1.00);
--ease-accelerate: cubic-bezier(0.70, 0, 1, 0.50);

Anti-patterns

Anti-patterns

1. Material round 카드 사용 금지 — Fluent 2 sharp 사각(0~2px)이 Azure 표준 2. Azure 코발트를 본문 텍스트에 사용 금지 — 링크/CTA만 3. 사이드바 활성 표시를 풀-배경 칠로 만들지 말 것 — 좌측 2px 보더 라인 + 옅은 배경 4. 본문 카드를 8px 이상 라운드 금지 — Fluent 2에서 어울리지 않음 5. 가격·메트릭에 색상 강조 금지 — 검정 본문 + tabular-nums

Sources

출처

  1. https://portal.azure.com/
  2. https://learn.microsoft.com/azure/