디자인 시스템 갤러리 Mailchimp Design System

Mailchimp Design System

Cavendish Yellow와 Freddie, 유기적인 세리프 헤드라인의 긍정적 크래프트 톤

서양디자인 시스템마케팅따뜻한humanismretro-craft복합comfortablesoftflat라이트공식한글 지원출시 2017개정 2023

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

Brand DNA

브랜드 DNA

  • 브랜드명: Mailchimp Design System
  • 한 줄 정체성: 중소상공인을 응원하는, 손그림 일러스트와 Cavendish Yellow가 만드는 친근한 마케팅 시스템
  • 공식 디자인 철학: 표현력과 일관성을 함께 유지해 복잡한 마케팅을 더 친근하고 접근하기 쉽게 만든다.
  • 시그니처 요소 1개: Cavendish Yellow(#FFE01B) + Freddie + Means/Graphik의 유기적인 타이포 대비

Tone & Mood

톤 & 무드

  • 핵심 키워드 3개: 친근함, 크래프트, 격려
  • 무드 설명: 노란 배경 위에 검은 타이포가 또렷하다. 일러스트는 불완전한 손맛을 살리고, 카피는 사람의 말투로 쓴다.
  • 비주얼 스타일: 휴머니즘 + 살짝의 retro craft
  • 밀도(Density): Comfortable
  • 모서리 성향: Sharp~Soft (0~4px) — 헤드라인은 sharp, 컨트롤은 약간의 round
  • 평면성: Flat — 그림자보다 색의 명도 차이로 위계

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Cavendish Yellow */
  --color-primary-50:  #FFFBE5;
  --color-primary-100: #FFF7CC;
  --color-primary-200: #FFEF99;
  --color-primary-300: #FFE866;
  --color-primary-400: #FFE033;
  --color-primary-500: #FFE01B;  /* Mailchimp Yellow 기본 */
  --color-primary-600: #E5C918;  /* hover */
  --color-primary-700: #B39E13;
  --color-primary-800: #80720E;
  --color-primary-900: #4D4509;

  /* Secondary - Peppercorn Black (대비축) */
  --color-secondary-500: #241C15;  /* Peppercorn */

  /* Neutral */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #FBF8F0;  /* Mailchimp warm off-white */
  --color-neutral-100:  #F2F0E9;
  --color-neutral-200:  #E0DACC;
  --color-neutral-300:  #C5BEAE;
  --color-neutral-500:  #8A8174;
  --color-neutral-700:  #5C5448;
  --color-neutral-800:  #3F392F;
  --color-neutral-900:  #241C15;
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #DDF4DD;
  --color-success-fg: #3A8540;
  --color-warning-bg: #FFF3CC;
  --color-warning-fg: #B07900;
  --color-error-bg:   #FBE5E5;
  --color-error-fg:   #B53636;
  --color-info-bg:    #E7F0FB;
  --color-info-fg:    #2A6FB7;

  /* Surface */
  --bg-base:     #FBF8F0;        /* warm canvas */
  --bg-subtle:   #F2F0E9;
  --bg-elevated: #FFFFFF;
  --bg-overlay:  #FFFFFF;

  /* Text */
  --text-primary:    #241C15;    /* Peppercorn */
  --text-secondary:  #5C5448;
  --text-tertiary:   #8A8174;
  --text-on-primary: #241C15;    /* 노랑 위에는 검정 */
  --text-disabled:   #C5BEAE;

  /* Border */
  --border-default: #E0DACC;
  --border-subtle:  #F2F0E9;
  --border-strong:  #8A8174;
  --border-focus:   #007C89;     /* 보조 청록 */
}

Typography

타이포그래피

  • 폰트 페어링:
    • 영문 헤드: Means Web, Georgia fallback
    • 영문 본문·제품 UI: Graphik Web, Helvetica Neue, Arial fallback
    • 한글: Pretendard (OFL) / Noto Sans KR
  • 위계:
    • Display: 72px / 400 / 0.96 / -0.03em (마케팅 hero)
    • H1: 48px / 400 / 1.05 / -0.02em
    • H2: 32px / 700 / 1.15 / 0
    • H3: 22px / 700 / 1.27 / 0
    • Body Large: 18px / 400 / 1.55 / 0
    • Body: 16px / 400 / 1.5 / 0
    • Body Small: 14px / 400 / 1.43 / 0
    • Caption: 12px / 600 / 1.33 / 0.04em (uppercase)

Spacing

스페이싱

  • Base unit: 4px
  • 토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; ``
  • Container: max-width 1280px, 좌우 패딩 24px

Border Radius

Border Radius

--radius-none: 0;
--radius-sm: 2px;
--radius-md: 4px;     /* 컨트롤 */
--radius-lg: 8px;     /* 카드 */
--radius-xl: 16px;
--radius-full: 9999px;

Shadow / Elevation

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(36,28,21,0.06);
--shadow-md: 0 4px 8px rgba(36,28,21,0.10);
--shadow-lg: 0 8px 24px rgba(36,28,21,0.14);
--shadow-xl: 0 16px 40px rgba(36,28,21,0.20);

일러스트와 결합 시 --shadow-offset: 4px 4px 0 #241C15 같은 hard-edge 그림자도 자주 사용 (handcrafted 감성).

Iconography

Iconography

  • 스타일: Outline + 손그림 일러스트
  • Stroke 굵기: 1.5~2px
  • 모서리 처리: Round
  • 추천 라이브러리: Lucide / Phosphor + 자체 일러스트 라이브러리

Component Guide

컴포넌트 가이드

Button

.btn {
  font: 700 16px/1 "Graphik Web", "Helvetica Neue", "Pretendard", sans-serif;
  border-radius: var(--radius-md);
  padding: 12px 20px;
  border: 2px solid var(--color-secondary-500);
  background: var(--color-primary-500);
  color: var(--color-secondary-500);
  transition: transform 100ms ease, box-shadow 100ms ease;
  box-shadow: 4px 4px 0 var(--color-secondary-500);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--color-secondary-500); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--color-secondary-500); }
.btn:disabled { background: var(--color-neutral-200); color: var(--text-disabled); border-color: var(--text-disabled); box-shadow: 4px 4px 0 var(--text-disabled); }

.btn-primary { /* 위 기본이 primary */ }
.btn-secondary { background: var(--bg-elevated); }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--color-primary-100); }
.btn-danger { background: var(--color-error-fg); color: #fff; border-color: var(--color-secondary-500); }

Input

.input {
  background: var(--bg-elevated);
  border: 2px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 16px;
}
.input:focus {
  outline: none;
  border-color: var(--color-secondary-500);
  box-shadow: 4px 4px 0 var(--color-secondary-500);
  transform: translate(-2px, -2px);
}
.input[aria-invalid="true"] { border-color: var(--color-error-fg); }

Card

.card { background: var(--bg-elevated); border: 2px solid var(--color-secondary-500); border-radius: var(--radius-lg); padding: 24px; box-shadow: 6px 6px 0 var(--color-secondary-500); }
.card-elevated { background: var(--color-primary-500); }
.card-outlined { box-shadow: none; }

Badge / Tag

.tag { padding: 2px 8px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.tag-solid   { background: var(--color-secondary-500); color: var(--color-primary-500); }
.tag-subtle  { background: var(--color-primary-100); color: var(--color-secondary-500); }
.tag-outline { border: 1.5px solid var(--color-secondary-500); color: var(--color-secondary-500); }

Navigation (Top Nav)

.topnav { height: 72px; background: var(--bg-base); border-bottom: 2px solid var(--color-secondary-500); display: flex; align-items: center; padding: 0 32px; gap: 24px; }
.topnav .logo { width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary-500); border: 2px solid var(--color-secondary-500); }
.topnav a { color: var(--color-secondary-500); font-weight: 700; }

Motion

Motion

--duration-fast: 100ms;
--duration-base: 200ms;
--duration-slow: 350ms;
--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);

Anti-patterns

Anti-patterns

1. Cavendish Yellow + 흰 텍스트 조합 금지 — 명도 대비 부족 2. 사진 위에 본문 텍스트 직접 배치 금지 — 노랑 또는 흰 박스 배경 사용 3. 손그림 일러스트와 사실적 사진을 한 화면 동급 배치 금지 — 톤 충돌 4. corporate 느낌의 차가운 그라데이션 배경 금지 — Mailchimp 친근함 위배 5. 긴 본문과 제품 UI에 Means Web 사용 금지 — 표현적인 헤드라인 전용

Sources

출처

  1. https://ux.mailchimp.com/
  2. https://mailchimp.com/about/brand-assets/