Microsoft Outlook

Outlook 블루 + 봉투+O 로고 + 3분할 리딩 패널의 비즈니스 메일

서양생산성엔터프라이즈차가운modern-minimal고딕compactsoftflat라이트다크공식한글 지원출시 1997개정 2025

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

Brand DNA

브랜드 DNA

브랜드명: Microsoft Outlook
한 줄 정체성: MS 365 메일·캘린더·연락처 통합 클라이언트 — 비즈니스 메일 사실상 표준
공식 디자인 철학: Fluent 2 — Outlook Blue 헤더 + 단정한 메일 리스트
시그니처 요소 1개: 봉투(▽) + 흰 O 모노그램 로고 + Outlook Blue(#0078D4) 헤더 + 3분할(폴더 / 리스트 / 리딩) 레이아웃. Teams 보라·OneNote 보라와 차별

Tone & Mood

톤 & 무드

핵심 키워드 3개: 메일, 일정, 단정
무드 설명: 라이트 베이지 그레이 베이스(#FAF9F8) + Outlook Blue 헤더. 카드보다 표 형태에 가까운 메일 리스트, 1px 보더 + 활성 메일 좌측 3px 블루 막대.
비주얼 스타일: 모던 미니멀
밀도(Density): Compact — 메일 리스트 한 줄 60~70px
모서리 성향: Soft (3~4px)
평면성: Flat

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Outlook Blue */
  --color-primary-50:  #DEECF9;
  --color-primary-100: #B7DAF1;
  --color-primary-200: #8AC4E8;
  --color-primary-300: #5BAEE0;
  --color-primary-400: #2E9DE0;
  --color-primary-500: #0078D4;   /* Outlook Blue */
  --color-primary-600: #106EBE;
  --color-primary-700: #005A9E;
  --color-primary-800: #004578;
  --color-primary-900: #002E50;

  /* Neutral - Fluent warm gray */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #FAF9F8;     /* page bg */
  --color-neutral-100:  #F3F2F1;
  --color-neutral-200:  #EDEBE9;
  --color-neutral-300:  #D2D0CE;
  --color-neutral-500:  #A19F9D;
  --color-neutral-700:  #605E5C;
  --color-neutral-800:  #323130;
  --color-neutral-900:  #201F1E;
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #DFF6DD;
  --color-success-fg: #107C10;
  --color-warning-bg: #FFF4CE;
  --color-warning-fg: #797673;
  --color-error-bg:   #FDE7E9;
  --color-error-fg:   #A4262C;
  --color-info-bg:    #DEECF9;
  --color-info-fg:    #0078D4;

  /* Category colors (Outlook 카테고리 색) */
  --cat-red:    #E81123;
  --cat-orange: #F7630C;
  --cat-yellow: #FFB900;
  --cat-green:  #107C10;
  --cat-blue:   #0078D4;
  --cat-purple: #5C2D91;

  /* Surface */
  --bg-base:     #FAF9F8;
  --bg-subtle:   #F3F2F1;
  --bg-elevated: #FFFFFF;
  --bg-overlay:  rgba(0,0,0,0.40);

  /* Text */
  --text-primary:    #201F1E;
  --text-secondary:  #323130;
  --text-tertiary:   #605E5C;
  --text-on-primary: #FFFFFF;
  --text-link:       #0078D4;
  --text-disabled:   #A19F9D;

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

[data-theme="dark"] {
  --bg-base:     #1B1A19;
  --bg-subtle:   #252423;
  --bg-elevated: #2D2C2B;
  --text-primary:    #FFFFFF;
  --text-secondary:  #D2D0CE;
  --border-default:  #323130;
}

Typography

타이포그래피

폰트 페어링:
- 영문: Segoe UI / Aptos / system-ui
- 한글: 맑은 고딕 / Pretendard
위계:
- Display: 28px / 600 / 1.2
- H1: 22px / 600 / 1.25
- H2: 18px / 600 / 1.3
- H3: 16px / 600 / 1.35
- Body Large: 14px / 400 / 1.5
- Body: 14px / 400 / 1.5
- Body Small: 12px / 500 / 1.4 (메타 정보)
- Caption: 11px / 600 / 1.3 (timestamp)

Spacing

스페이싱

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

Border Radius

--radius-none: 0;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 6px;
--radius-xl: 8px;
--radius-full: 9999px;

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 4px 12px rgba(0,0,0,0.08);
--shadow-lg: 0 12px 28px rgba(0,0,0,0.14);

Iconography

스타일: Fluent UI Icons (Outline/Filled)
Stroke 굵기: 1.5px
모서리 처리: Round
추천 라이브러리: Fluent System Icons

Component Guide

컴포넌트 가이드

Button

.btn { font: 600 13px/1 'Segoe UI', system-ui, sans-serif; border-radius: 2px; 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(--bg-subtle); }
.btn-icon { background: transparent; border: 0; width: 32px; height: 32px; border-radius: 3px; color: var(--text-secondary); }
.btn-icon:hover { background: var(--bg-subtle); }
.btn-reply { background: var(--color-primary-500); color: #fff; padding: 7px 14px; }

Input / Compose

.input { background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 2px; padding: 6px 10px; font: 400 14px/1.4 inherit; color: var(--text-primary); }
.input:focus { border-color: var(--color-primary-500); outline: 0; }
.compose { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 4px; padding: 12px 14px; }
.compose .row { display: grid; grid-template-columns: 60px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-default); font: 400 13px/1.4 inherit; }
.compose .row .label { color: var(--text-tertiary); font-weight: 600; }
.recipient-pill { background: var(--color-primary-50); color: var(--color-primary-700); border-radius: 9999px; padding: 1px 8px; font: 600 12px/1.4 inherit; display: inline-flex; align-items: center; gap: 4px; }

Card (Mail row / Reading pane)

.maillist { background: var(--bg-elevated); border-right: 1px solid var(--border-default); width: 340px; }
.mail-row { padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); display: grid; grid-template-columns: 1fr auto; gap: 4px; cursor: pointer; }
.mail-row.unread { border-left: 3px solid var(--color-primary-500); padding-left: 11px; }
.mail-row .from { font: 600 13px/1.3 inherit; color: var(--text-primary); }
.mail-row .subject { font: 500 13px/1.3 inherit; color: var(--text-primary); margin-top: 2px; }
.mail-row.unread .subject { font-weight: 700; }
.mail-row .preview { font: 400 12px/1.4 inherit; color: var(--text-tertiary); margin-top: 2px; }
.mail-row .time { font: 600 11px/1 inherit; color: var(--text-tertiary); }
.mail-row .attach { color: var(--text-tertiary); font-size: 12px; }
.mail-row.active { background: var(--bg-subtle); }
.reading { padding: 16px 20px; background: var(--bg-elevated); border-radius: 4px; }
.reading h2 { margin: 0 0 6px; font: 600 18px/1.3 inherit; }
.reading .meta { display: flex; align-items: center; gap: 10px; font: 500 12px/1.4 inherit; color: var(--text-tertiary); padding: 8px 0; border-bottom: 1px solid var(--border-default); }
.reading .body { padding: 14px 0; font: 400 14px/1.6 inherit; }

Badge / Tag

.cat-red    { width: 10px; height: 10px; border-radius: 3px; background: var(--cat-red); display: inline-block; }
.cat-blue   { width: 10px; height: 10px; border-radius: 3px; background: var(--cat-blue); display: inline-block; }
.cat-yellow { width: 10px; height: 10px; border-radius: 3px; background: var(--cat-yellow); display: inline-block; }
.badge-unread-count { background: var(--color-primary-500); color: #fff; border-radius: 9999px; padding: 1px 8px; font: 700 11px/1.4 inherit; min-width: 20px; text-align: center; }
.tag-focused { background: var(--color-primary-500); color: #fff; border-radius: 2px; padding: 2px 8px; font: 700 11px/1.3 inherit; }

Navigation (Top + Folder tree)

.topbar { background: var(--color-primary-500); color: #fff; padding: 8px 14px; display: flex; align-items: center; gap: 12px; }
.topbar .logo { width: 24px; height: 20px; background: #fff; color: var(--color-primary-500); border-radius: 3px; display: grid; place-items: center; font: 900 11px/1 inherit; }
.topbar h1 { margin: 0; font: 600 16px/1 inherit; }
.search { flex: 1; background: rgba(255,255,255,0.12); border-radius: 3px; padding: 5px 12px; font: 500 13px/1 inherit; color: #fff; }
.folders { width: 220px; background: var(--bg-elevated); border-right: 1px solid var(--border-default); padding: 10px 0; }
.folders .item { display: flex; align-items: center; gap: 10px; padding: 7px 16px; font: 500 13px/1 inherit; color: var(--text-secondary); cursor: pointer; }
.folders .item:hover { background: var(--bg-subtle); }
.folders .item.active { background: var(--color-primary-50); color: var(--color-primary-700); font-weight: 700; border-left: 3px solid var(--color-primary-500); padding-left: 13px; }

Motion

--duration-fast: 90ms;
--duration-base: 180ms;
--duration-slow: 280ms;
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);

Anti-patterns

1. Outlook Blue를 Teams Purple로 대체 금지 — 각 MS 365 앱마다 시그니처 색 분리 (Outlook=블루) 2. 메일 리스트 모서리 12px 이상 금지 — 0~3px Sharp/Soft, 1px 보더로 구분 3. 활성 메일에 좌측 3px 컬러 막대 제거 금지 — 읽지 않은 메일도 같은 시그니처 4. Aptos/Segoe UI 외 세리프 본문 금지 — MS 365 일관성 5. 3분할 레이아웃(폴더/리스트/리딩)을 2분할로 축소 강제 금지 — 데스크톱은 3분할이 정체성

Microsoft Outlook

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

출처