N26
딥 틸·오프화이트 위에 잔액과 Spaces를 명료하게 펼치는 모바일 뱅킹
Brand DNA
브랜드 DNA
- 브랜드명: N26
- 한 줄 정체성: 베를린에서 출발한 모바일 우선 은행으로, 복잡한 금융 업무를 명료한 디지털 흐름으로 바꾼다.
- 공식 디자인 철학: “Simple, customer-focused and transparent” — 단순함, 고객 중심, 투명성을 브랜드와 제품 전반에 적용한다.
- 시그니처 요소 1개: 딥 틸(#088177)을 넓은 컬러 면과 핵심 인터랙션에 사용하고, 잔액·거래·Spaces를 여백 많은 오프화이트 화면에 또렷하게 배열하는 방식
Tone & Mood
톤 & 무드
- 핵심 키워드 3개: 명료한, 인간적인, 도시적인
- 무드 설명: 차가운 금융 도구처럼 보이기보다, 오프화이트와 절제된 딥 틸을 바탕으로 일상적인 돈 관리를 친근하게 보여준다. Wheat·Rhubarb·Petrol 같은 낮은 채도의 보조색은 정보 구분과 라이프스타일 이미지를 돕는다.
- 비주얼 스타일: 모던 미니멀 + 휴머니즘
- 밀도(Density): Comfortable — 잔액과 핵심 행동은 넉넉히 띄우되 거래 목록은 빠르게 훑을 수 있는 간격을 유지한다.
- 모서리 성향: Soft (기본 6~8px, 큰 프로모션 카드만 16~24px)
- 평면성: Flat — 그림자보다 배경색, 보더, 여백으로 위계를 만든다.
Color System
컬러 시스템 (CSS 변수)
:root {
/* Primary — 현재 N26 디지털 경험의 Deep Teal */
--color-primary-50: #EAF5F3;
--color-primary-100: #D8EDEB;
--color-primary-200: #B7DDDA;
--color-primary-300: #82C8C1;
--color-primary-400: #4BAEA4;
--color-primary-500: #088177;
--color-primary-600: #076F66;
--color-primary-700: #075D57;
--color-primary-800: #064C47;
--color-primary-900: #053B37;
/* Character palette — 브랜드가 공개한 Teal / Petrol / Wheat / Rhubarb 계열 */
--color-petrol-100: #CCDCE2;
--color-petrol-500: #2B697A;
--color-wheat-100: #EBDDCC;
--color-wheat-500: #C89D58;
--color-rhubarb-100: #EBD6D6;
--color-rhubarb-500: #B25D5B;
/* Neutral — 따뜻한 라이트 캔버스 */
--color-neutral-0: #FFFFFF;
--color-neutral-50: #FAF8F5;
--color-neutral-100: #F1EFEB;
--color-neutral-200: #DEDCD7;
--color-neutral-300: #C4C2BD;
--color-neutral-500: #787875;
--color-neutral-700: #4A4A48;
--color-neutral-900: #1B1B1B;
--color-neutral-1000: #111211;
/* Semantic */
--color-success-bg: #E6F3EF;
--color-success-fg: #087466;
--color-warning-bg: #F6EEDC;
--color-warning-fg: #8A5A12;
--color-error-bg: #F5E6E6;
--color-error-fg: #9C4443;
--color-info-bg: #E5EFF2;
--color-info-fg: #2B697A;
/* Surface */
--bg-base: #FAF8F5;
--bg-subtle: #F1EFEB;
--bg-elevated: #FFFFFF;
--bg-overlay: rgba(27,27,27,0.48);
/* Text */
--text-primary: #1B1B1B;
--text-secondary: #4A4A48;
--text-tertiary: #787875;
--text-on-primary: #FFFFFF;
--text-disabled: #A7A6A1;
/* Border */
--border-default: #DEDCD7;
--border-subtle: #EAE8E4;
--border-strong: #B7B5B0;
--border-focus: #088177;
}
[data-theme="dark"] {
--color-primary-50: #132A26;
--color-primary-100: #193C35;
--color-primary-200: #24554B;
--color-primary-300: #337568;
--color-primary-400: #45A18F;
--color-primary-500: #5BC0AE;
--color-primary-600: #75D0C1;
--color-primary-700: #9ADDD2;
--color-primary-800: #BCEBE3;
--color-primary-900: #DDF5F0;
--color-petrol-100: #20343A;
--color-petrol-500: #8AB8C4;
--color-wheat-100: #352B1D;
--color-wheat-500: #E2BC78;
--color-rhubarb-100: #382322;
--color-rhubarb-500: #D98C89;
--color-success-bg: #16332E;
--color-success-fg: #75D0C1;
--color-warning-bg: #352B1D;
--color-warning-fg: #E2BC78;
--color-error-bg: #382322;
--color-error-fg: #D98C89;
--color-info-bg: #1B3036;
--color-info-fg: #8AB8C4;
--bg-base: #171918;
--bg-subtle: #1D201F;
--bg-elevated: #222524;
--bg-overlay: rgba(0,0,0,0.72);
--text-primary: #F8F8F5;
--text-secondary: #D1D3CF;
--text-tertiary: #ABAEAA;
--text-on-primary: #10201D;
--text-disabled: #747875;
--border-default: #393C3A;
--border-subtle: #2D302E;
--border-strong: #565A57;
--border-focus: #5BC0AE;
}Typography
타이포그래피
- 폰트 페어링:
- 한글: Pretendard (SIL Open Font License)
- 영문: N26 / N26 Extended (브랜드 전용), GT America 계열 폴백
- 위계:
- Display: 64px / 400 / 1.02 / -0.035em
- H1: 40px / 400 / 1.12 / -0.025em
- H2: 28px / 500 / 1.2 / -0.015em
- H3: 20px / 500 / 1.3 / -0.01em
- Body Large: 18px / 400 / 1.55 / 0
- Body: 16px / 400 / 1.5 / 0
- Body Small: 14px / 400 / 1.45 / 0
- Caption: 12px / 500 / 1.35 / 0.02em
- Numeric: 20~48px / 500 / 1.05 / -0.025em / 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, 좌우 패딩 24px(모바일 16px)
Border Radius
Border Radius
--radius-none: 0;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-full: 9999px;Shadow / Elevation
Shadow / Elevation
--shadow-none: none; /* 기본 섹션 */
--shadow-sm: 0 1px 2px rgba(27,27,27,0.06); /* 입력·작은 팝오버 */
--shadow-md: 0 8px 24px rgba(27,27,27,0.10); /* 플로팅 카드 */
--shadow-lg: 0 20px 48px rgba(27,27,27,0.14); /* 모달 */
--shadow-xl: 0 28px 72px rgba(27,27,27,0.18); /* 풀스크린 다이얼로그 */Iconography
Iconography
- 스타일: Outline 중심, 상태 아이콘은 Filled 병용
- Stroke 굵기: 1.5px
- 모서리 처리: Round
- 추천 라이브러리: Lucide (stroke 1.5로 조정) / Phosphor
Component Guide
컴포넌트 가이드 (상태별 CSS)
Button
.n26-btn {
min-height: 44px;
padding: 0 20px;
border: 1px solid transparent;
border-radius: var(--radius-md);
font: 500 15px/1 "N26", "Helvetica Neue", Arial, sans-serif;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
transition: background var(--duration-base) var(--ease-out),
border-color var(--duration-base) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
}
.n26-btn--primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.n26-btn--primary:hover { background: var(--color-primary-600); }
.n26-btn--primary:active { transform: translateY(1px); background: var(--color-primary-700); }
.n26-btn--secondary { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-default); }
.n26-btn--secondary:hover { border-color: var(--border-strong); background: var(--bg-subtle); }
.n26-btn--ghost { background: transparent; color: var(--color-primary-600); }
.n26-btn--ghost:hover { background: var(--color-primary-50); }
.n26-btn--danger { background: var(--color-error-fg); color: #FFFFFF; }
.n26-btn:disabled { cursor: not-allowed; opacity: 0.42; transform: none; }
.n26-btn.is-loading { color: transparent; pointer-events: none; position: relative; }
.n26-btn.is-loading::after { content: ""; width: 16px; height: 16px; border: 2px solid var(--text-primary); border-right-color: transparent; border-radius: 50%; position: absolute; animation: n26-spin 700ms linear infinite; }
.n26-btn--primary.is-loading::after { border-color: var(--text-on-primary); border-right-color: transparent; }
.n26-btn--danger.is-loading::after { border-color: #FFFFFF; border-right-color: transparent; }
@keyframes n26-spin { to { transform: rotate(360deg); } }Input
.n26-input {
width: 100%;
min-height: 48px;
padding: 12px 14px;
background: var(--bg-elevated);
color: var(--text-primary);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
font: 400 16px/1.4 inherit;
}
.n26-input::placeholder { color: var(--text-tertiary); }
.n26-input:hover { border-color: var(--border-strong); }
.n26-input:focus { outline: 3px solid color-mix(in srgb, var(--border-focus) 20%, transparent); border-color: var(--border-focus); }
.n26-input[aria-invalid="true"] { border-color: var(--color-error-fg); }
.n26-input:disabled { background: var(--bg-subtle); color: var(--text-disabled); cursor: not-allowed; }Card
.n26-card { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 24px; }
.n26-card--accent { background: var(--color-primary-500); color: var(--text-on-primary); border-color: transparent; }
.n26-card--outlined { background: transparent; border-color: var(--border-default); }
.n26-card__amount { font: 500 32px/1.05 inherit; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }Badge / Tag
.n26-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 9px; border-radius: var(--radius-full); font: 500 12px/1 inherit; }
.n26-tag--solid { background: var(--color-primary-500); color: var(--text-on-primary); }
.n26-tag--subtle { background: var(--color-primary-100); color: var(--color-primary-800); }
.n26-tag--outline { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-default); }Navigation (Side rail)
.n26-nav { width: 224px; padding: 24px 16px; background: var(--bg-elevated); border-right: 1px solid var(--border-subtle); }
.n26-nav__brand { font: 700 24px/1 inherit; letter-spacing: -0.04em; margin: 4px 12px 28px; }
.n26-nav__item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: var(--radius-md); color: var(--text-secondary); font-size: 14px; }
.n26-nav__item:hover { background: var(--bg-subtle); color: var(--text-primary); }
.n26-nav__item[aria-current="page"] { background: var(--color-primary-100); color: var(--color-primary-800); font-weight: 500; }Motion
Motion
--duration-fast: 120ms;
--duration-base: 200ms;
--duration-slow: 360ms;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);Anti-patterns
Anti-patterns
1. 밝은 민트를 N26의 현재 Primary로 사용하지 않는다 — 2018년 이후 브랜드는 더 깊고 대비가 높은 Teal 계열로 이동했다. 2. 모든 표면을 차가운 네이비로 덮지 않는다 — 라이트 모드의 오프화이트 여백과 인간적인 보조색이 N26다움을 만든다. 3. 버튼과 내비게이션을 습관적으로 Pill 형태로 만들지 않는다 — 기본 인터랙션은 6~8px Soft 모서리를 사용한다. 4. 잔액·거래·목표 정보를 장식적 그래디언트나 과도한 그림자로 가리지 않는다. 5. Teal·Petrol·Wheat·Rhubarb를 같은 비중으로 경쟁시키지 않는다 — Teal이 행동을 이끌고 나머지는 맥락을 구분한다.