Monzo

Hot Coral 카드 + 둥근 카드 모티프 + 낙관적인 Monzo Magic

서양핀테크소비자복합modern-minimalhumanism고딕comfortableroundsubtle라이트다크한글 지원출시 2015개정 2026

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

Brand DNA

브랜드 DNA

브랜드명: Monzo
한 줄 정체성: 영국의 Hot Coral 카드에서 출발해 돈 관리를 낙관적이고 인간적으로 바꾼 모바일 은행
공식 디자인 철학: “Optimism is the original spirit of Monzo”와 “Built for everyone” — 따뜻함, 공감, 명료함을 금융 경험에 적용
시그니처 요소 1개: Hot Coral(#FF4F40)을 입힌 둥근 카드 실루엣. 딥 네이비·소프트 화이트 위에 실제 앱 UI를 크게 보여 주고, 재치 있는 일러스트로 Monzo Magic을 완성

Tone & Mood

톤 & 무드

핵심 키워드 3개: 낙관적인, 인간적인, 활기찬
무드 설명: 블루 톤 소프트 화이트와 딥 네이비가 신뢰의 바탕을 만들고 Hot Coral이 에너지를 더합니다. 기능 화면은 선명하고 차분하지만, 카드 모티프·대담한 헤드라인·개성 있는 일러스트로 은행 특유의 경직됨을 걷어냅니다. 앱은 공식 라이트·다크 테마를 모두 지원합니다.
비주얼 스타일: 모던 미니멀 + 휴머니즘
밀도(Density): Comfortable — 잔액과 거래를 빠르게 훑되 카드 사이에 충분한 호흡을 둠
모서리 성향: Round (12~20px)
평면성: Subtle

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Monzo Hot Coral */
  --color-primary-50:  #FFF0EE;
  --color-primary-100: #FFC4BC;
  --color-primary-200: #FF9C90;
  --color-primary-300: #FF7464;
  --color-primary-400: #FF6051;
  --color-primary-500: #FF4F40;   /* Hot Coral */
  --color-primary-600: #E03A2C;
  --color-primary-700: #B22C20;
  --color-primary-800: #821E16;
  --color-primary-900: #52120D;

  /* Core + energetic supporting palette */
  --color-secondary-500: #14233C; /* Deep Navy */
  --color-navy:       #14233C;
  --color-soft-white: #F4F6F5;
  --color-coral:      #FF4F40;
  --color-lime:       #D8E55A;
  --color-teal:       #00A69C;
  --color-blue:       #2251FF;
  --color-pink:       #E877C5;

  /* Neutral - blue-toned Soft White → Deep Navy */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F4F6F5;     /* Soft White 캔버스 */
  --color-neutral-100:  #EAEEEC;
  --color-neutral-200:  #DCE2DF;
  --color-neutral-300:  #B8C5C1;
  --color-neutral-500:  #687977;
  --color-neutral-700:  #344650;
  --color-neutral-800:  #233443;
  --color-neutral-900:  #14233C;     /* Deep Navy */
  --color-neutral-1000: #07121F;

  /* Semantic */
  --color-success-bg: #DDF5F0;
  --color-success-fg: #007C73;
  --color-warning-bg: #F7F4CF;
  --color-warning-fg: #776600;
  --color-error-bg:   #FDE6E3;
  --color-error-fg:   #B93126;
  --color-info-bg:    #E5EAFF;
  --color-info-fg:    #2446B8;

  /* Surface */
  --bg-base:     #F4F6F5;
  --bg-subtle:   #EAEEEC;
  --bg-elevated: #FFFFFF;
  --bg-overlay:  rgba(20,35,60,0.52);

  /* Text */
  --text-primary:    #14233C;
  --text-secondary:  #344650;
  --text-tertiary:   #687977;
  --text-on-primary: #14233C;
  --text-disabled:   #9EAEAA;

  /* Border */
  --border-default: #DCE2DF;
  --border-subtle:  #EAEEEC;
  --border-strong:  #A8B7B4;
  --border-focus:   #FF4F40;
}

[data-theme="dark"] {
  --color-primary-50:  #35130F;
  --color-primary-100: #5B1D17;
  --color-primary-200: #86291F;
  --color-primary-300: #B63A2D;
  --color-primary-400: #E44A3B;
  --color-primary-500: #FF6B5C;
  --color-primary-600: #FF8073;
  --color-primary-700: #FFA79E;
  --color-primary-800: #FFD0CA;
  --color-primary-900: #FFE9E6;
  --color-neutral-0:    #07121F;
  --color-neutral-50:   #0B1728;
  --color-neutral-100:  #102038;
  --color-neutral-200:  #14233C;
  --color-neutral-300:  #31435A;
  --color-neutral-500:  #72818F;
  --color-neutral-700:  #AAB8B5;
  --color-neutral-800:  #DCE2DF;
  --color-neutral-900:  #F4F6F5;
  --color-neutral-1000: #FFFFFF;
  --color-success-bg: #0D3430;
  --color-success-fg: #67D8CE;
  --color-warning-bg: #39340F;
  --color-warning-fg: #D8E55A;
  --color-error-bg:   #3B1715;
  --color-error-fg:   #FF8A7F;
  --color-info-bg:    #14264F;
  --color-info-fg:    #91A8FF;
  --bg-base:     #0B1728;
  --bg-subtle:   #102038;
  --bg-elevated: #14233C;
  --bg-overlay:  rgba(2,8,16,0.70);
  --text-primary:    #F4F6F5;
  --text-secondary:  #DCE2DF;
  --text-tertiary:   #AAB8B5;
  --text-on-primary: #14233C;
  --text-disabled:   #607181;
  --border-default: #31435A;
  --border-subtle:  #23344A;
  --border-strong:  #51647A;
  --border-focus:   #FF6B5C;
}

Typography

타이포그래피

폰트 페어링:
- 영문 헤드라인: Oldschool Grotesk (브랜드 전용) / Arial Rounded MT Bold 폴백
- 영문 기능 UI: Monzo Sans — Universal Sans 커스텀 컷 (브랜드 전용) / system-ui 폴백
- 한글: Pretendard (OFL) / Noto Sans KR 폴백
위계:
- Display: 56px / 800 / 1.02 / -0.035em
- H1: 32px / 750 / 1.12 / -0.025em
- H2: 22px / 750 / 1.2 / -0.015em
- H3: 16px / 600 / 1.4 / 0
- Body Large: 16px / 400 / 1.55 / 0
- Body: 14px / 400 / 1.5 / 0
- Body Small: 13px / 500 / 1.4 / 0
- Caption: 11px / 600 / 1.3 / 0.02em
- Numeric: 17px / 650 / 1.2 / tabular-nums

Spacing

스페이싱

Base unit: 4px
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; ``
Container: max-width 1200px, 좌우 패딩 20px

Border Radius

--radius-none: 0;
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-full: 9999px;

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(20,35,60,0.06);       /* 리스트·작은 카드 */
--shadow-md: 0 6px 18px rgba(20,35,60,0.09);      /* 카드 hover */
--shadow-lg: 0 18px 42px rgba(20,35,60,0.14);     /* 모달 */
--shadow-xl: 0 28px 70px rgba(20,35,60,0.18);     /* 풀스크린 dialog */
--shadow-coral: 0 18px 38px rgba(255,79,64,0.28); /* Hot Coral 카드 */

Iconography

스타일: Outline + Filled 혼합 + 친근한 일러스트
Stroke 굵기: 1.5~2px
모서리 처리: Round
추천 라이브러리: Phosphor / Heroicons + 자체 일러스트

Component Guide

컴포넌트 가이드

Button

.btn { font: 700 14px/1 'Monzo Sans', system-ui, sans-serif; border-radius: 9999px; padding: 14px 22px; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: background var(--duration-base) var(--ease-out), transform 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 { transform: scale(0.97); }
.btn-secondary { background: var(--color-navy); color: var(--color-soft-white); border: 1.5px solid var(--color-navy); }
.btn-secondary:hover { background: var(--color-neutral-800); }
.btn-ghost { background: transparent; color: var(--color-primary-500); }
.btn-danger { background: var(--color-error-fg); color: #fff; }
.btn-pot { background: var(--color-lime); color: var(--color-navy); }   /* 저축 Pots */
.btn:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }

Input

.input { background: var(--bg-elevated); border: 1.5px solid var(--border-strong); border-radius: 14px; padding: 14px 16px; color: var(--text-primary); font: 400 15px/1.3 inherit; }
.input::placeholder { color: var(--text-tertiary); }
.input:focus { outline: none; border-color: var(--color-primary-500); box-shadow: 0 0 0 3px rgba(255,79,64,0.15); }
.input[aria-invalid="true"] { border-color: var(--color-error-fg); }
.input:disabled { background: var(--bg-subtle); color: var(--text-disabled); cursor: not-allowed; }

Card (Account + Pots)

.card-account { background: var(--color-coral); color: var(--color-navy); border-radius: 20px; padding: 22px; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow-coral); }
.card-account .label { font: 600 11px/1 inherit; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }
.card-account .balance { font: 700 36px/1 inherit; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; margin-top: 12px; }
.pot { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 20px; padding: 18px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-sm); }
.pot .icon { width: 44px; height: 44px; border-radius: 50%; background: var(--color-lime); color: var(--color-navy); display: grid; place-items: center; font-size: 22px; }
.pot .name { font: 700 15px/1.3 inherit; color: var(--text-primary); }
.pot .amount { font: 700 22px/1 inherit; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.pot .progress { height: 6px; background: var(--bg-subtle); border-radius: 9999px; overflow: hidden; }
.pot .progress .bar { height: 100%; background: var(--color-primary-500); border-radius: 9999px; }
.card { background: var(--bg-elevated); border-radius: 14px; padding: 18px; box-shadow: var(--shadow-sm); }
.card-outlined { background: transparent; border: 1px solid var(--border-default); }

Badge / Tag

.tag { padding: 4px 10px; border-radius: 9999px; font: 700 11px/1.4 inherit; letter-spacing: 0.02em; }
.tag-current   { background: var(--color-primary-50); color: var(--color-primary-700); }
.tag-pot       { background: color-mix(in srgb, var(--color-lime) 28%, transparent); color: var(--color-warning-fg); }
.tag-savings   { background: var(--color-success-bg); color: var(--color-success-fg); }
.tag-premium   { background: var(--color-primary-500); color: var(--text-on-primary); }
.tag-shared    { background: var(--color-info-bg); color: var(--color-info-fg); }

Navigation (Bottom tab)

.tab-bar { display: flex; gap: 16px; padding: 12px 16px; background: var(--bg-elevated); border-top: 1px solid var(--border-default); }
.tab-bar .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 600 11px/1.2 inherit; color: var(--text-tertiary); cursor: pointer; }
.tab-bar .tab.active { color: var(--color-primary-500); }
.tab-bar .tab .ic { font-size: 22px; }

Motion

--duration-fast: 150ms;
--duration-base: 280ms;
--duration-slow: 450ms;
--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

Anti-patterns

1. Hot Coral을 오류·위험 상태에 무분별하게 사용 금지 — 브랜드 순간과 행동 강조에 의도적으로 제한 2. 딥 네이비를 순수 검정으로, 블루 톤 소프트 화이트를 누런 베이지로 대체 금지 3. 주요 카드와 콘텐츠 블록에 Sharp(0~4px) 모서리 사용 금지 — 14~28px의 부드러운 카드 실루엣 유지 4. 개성 있는 오브젝트 일러스트를 전형적인 플랫 기업 인물 일러스트로 대체 금지 5. 잔액·거래 금액에 비례 숫자를 사용해 자릿수 정렬을 깨뜨리지 말 것 — tabular-nums 유지

Monzo

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

출처