Design System Inspiration of KakaoBank (카카오뱅크)

1. Visual Theme & Atmosphere

KakaoBank is what happens when a messenger company decides retail banking should feel like a chat thread, not a teller window. Korea's first internet-only bank (launched 2017-07-27) carries the warmth of the Kakao family, but when you actually look at the surfaces side-by-side, the resemblance is more cousins than siblings: KakaoBank's canvas is an even cleaner, more banking-formal white than the parent. The corporate site (kakaobank.com) is almost monochrome — black on white with one neutral-gray fill (#f7f7f7) — and the signature KakaoBank Yellow #FFE300 is reserved, by official brand guideline, for the symbol, the app icon, and the moments where the bank wants to announce itself.

That restraint is the design system's whole thesis. Yellow is loud — banking has to feel safe — so yellow shows up where trust has already been established (the app you've installed, the card in your hand, the success screen after a transfer) and stays out of the way during compliance-heavy flows (terms, identity verification, tax forms). The corporate-facing surfaces use a 90px hero in weight 800, Pretendard Variable as the type stack, and a quiet #1E1E1E near-black — the exact same near-black Kakao parent uses, harmonizing with the family without copy-pasting it. In the actual mobile app, the cards (the debit card, the 26주적금 weekly-savings challenge, the mini youth account, 세이프박스 safe-box) take over as the main visual language — illustrated cards with Kakao Friends characters peeking through, yellow for the sender's actions, white for the bank's.

Key Characteristics:

• KakaoBank Yellow (#FFE300) as the singular brand accent — distinct from Kakao parent (#FEE500) and Kakao marketing (#FAE100); brand guideline V2.0 explicitly forbids substituting near-yellows
• Pretendard Variable as the primary type stack — system-aligned Korean-first sans, no custom typeface on web
• Banking-formal restraint — corporate surfaces are near-monochrome; yellow is reserved for brand and product moments, not chrome
• Card-as-product — debit cards, 26주적금, 모임통장, 세이프박스, mini all surface as illustrated cards in the mobile app
• Kakao Friends mascots (Ryan, Apeach, Tube, Muzi) appear contextually — on physical card faces, in 26주적금 challenge characters, in moim 메시지카드 — never in compliance chrome
• Near-black #1E1E1E for primary text, three-tier gray scale (#1E1E1E / #A3A3A3 / #CCCCCC) — no warm grays, no off-blacks
• Single-yellow discipline — the brand guide specifies one yellow value and one only; no tinted sub-shades
• Mobile-app-first — the corporate site is the marketing layer, not the product; the actual DS lives in the iOS/Android client

2. Color Palette & Roles

Primary

• KakaoBank Yellow (#FFE300): Primary brand color, app icon, symbol fill, primary CTA in product surfaces, debit card face, success confirmation accents. RGB 255/227/0, PANTONE Yellow 012 C/U, CMYK 0/10/100/0. Per V2.0 brand guideline, do not substitute #FAE100, #FEE500, #FFCC00, or any near-yellow.
• Near Black (#1E1E1E): Primary text, headings, wordmark on light backgrounds, secondary brand color. Same near-black as Kakao parent — intentional family resemblance.
• Pure White (#FFFFFF): Page background, card surfaces, on-yellow text alternative when contrast permits (chrome only — never body copy).

Neutral Scale (per brand guideline V2.0)

• Gray (#A3A3A3): Secondary text, captions, disabled labels. PANTONE Cool Gray 6 C/U.
• Light Gray (#CCCCCC): Borders, dividers, disabled fills. PANTONE Cool Gray 3 C/U.
• Surface Fill (#F7F7F7): Section backgrounds, card-on-card layering on the corporate site.
• Surface Subtle (#F9F9F9): Footer surface on the corporate site.

Semantic (banking-functional)

• Critical Red (#E02000): Error messages, destructive actions, failed-transaction badges. Inherited from Kakao parent for cross-product consistency.
• Link Blue (#007AFF): Inline action buttons in chat-like flows (iOS-aligned blue), secondary tappable affordances.
• Positive Green (#0FBE6C): Successful transfers, completed savings goals, verified status — banking apps must read "money moved" instantly.
• Warning Amber (#FF9800): Caution states (e.g., "limit approaching"), reserved for genuine warnings, not ambient nudges.

Typography Color Roles

• Heading / Strong (#1E1E1E): h1–h3, balance amounts, account names.
• Body (#1E1E1E): Default body color on the corporate site (full strength — no muted body).
• Secondary / Caption (#A3A3A3): Sub-labels, timestamps, FAQ helper text, footer policy links.
• Inactive Tab (#888888): Sub-nav inactive items on the corporate site.

Surface & Borders

• Border Default (#CCCCCC): Card borders, input outlines, divider lines.
• Border Subtle (#E6E6E6): Faint separators inside dense list views (carries from list patterns).
• Overlay (rgba(0, 0, 0, 0.4)): Modal scrims — lighter than most banks, keeping in-context visibility.

3. Typography Rules

Font Family

• Primary: "Pretendard Variable", system-ui, -apple-system, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif — verified live at kakaobank.com (computed font-family on body).
• Brand Display (logo only): Custom wordmark (per guideline — wordmark follows Kakao 공동체 CI rules, not a substitutable webfont).
• Design Principle: No custom brand typeface on web. Pretendard Variable carries Korean and Latin equally well; the brand expresses itself through color and the app icon, not through a display face.

Hierarchy (verified at kakaobank.com / kakaobank.com/view/service)

Principles

• One typeface, three weights: 400 (Regular), 600 (SemiBold), 700/800 (Bold/ExtraBold for hero only). The corporate hero pushes to 800 — that is the brand's confidence moment.
• Korean-first metric: Pretendard Variable ships line-heights tuned for Hangul; do not override with a Latin-tuned line-height value.
• No italics. Banking copy reads upright; emphasis happens through weight, not slant.
• No custom brand display font on web. Yellow + the symbol carry brand identity; type stays neutral so account numbers and amounts read as data, not marketing.

4. Component Stylings

Buttons

KakaoBank's corporate site is intentionally chrome-light — buttons on the public web are mostly text affordances with a few iconographic ones. The product-facing button system lives in the mobile app, where the Yellow Solid primary CTA is the signature pattern (verified visually on app icon, debit card face, brand resource page swatch — #FFE300 is the canonical fill).

Yellow Solid (Primary CTA — product surfaces / app)

• Background: #FFE300 (KakaoBank Yellow)
• Text: #1E1E1E (Near Black) — never white on yellow (contrast fail)
• Border: none
• Radius: 12px
• Padding: 14px 20px (default), 16px 24px (large)
• Font: 16px / 600 / Pretendard
• Pressed: opacity 0.85 (no darker yellow exists in the brand palette)
• Disabled: bg #F7F7F7, text #CCCCCC
• Use: Primary action in product flows ("이체하기", "확인", "다음")

Black Solid (Secondary Strong)

• Background: #1E1E1E
• Text: #FFFFFF
• Border: none
• Radius: 12px
• Padding: 14px 20px
• Font: 16px / 600 / Pretendard
• Use: Secondary high-emphasis CTA when paired with Yellow Solid; identity verification flows

Outline Neutral

• Background: transparent
• Text: #1E1E1E
• Border: 1px solid #CCCCCC
• Radius: 12px
• Padding: 14px 20px
• Font: 16px / 600 / Pretendard
• Pressed: bg #F7F7F7
• Use: Tertiary actions, "취소", "나중에"

Top Nav Link (corporate site — verified)

• Background: transparent
• Text: #1E1E1E → hover/active stays #1E1E1E (no color change)
• Border: none
• Padding: 0 20px
• Font: 14px / 600 / Pretendard
• Height: 62px (vertically centered in 62px header band)
• Use: Top navigation items (소개, 서비스, ESG, 투자정보, 고객센터, 인재영입)

Sub-Nav Tab (corporate site — verified)

• Background: transparent
• Text inactive: #888888
• Text active: #1E1E1E
• Border: 0px (active state expressed through color, not underline)
• Padding: 20px 0
• Font: 14px / 400 / Pretendard
• Use: Sub-section nav (비즈니스, 기술, 새소식)

Service Tab (verified — kakaobank.com/view/service)

• Background: transparent
• Text: #1E1E1E
• Border: 0
• Padding: 16px 0
• Font: 16px / 400 / Pretendard
• Height: 61px
• Use: Product-category tabs on the service page (통장, 저축, 대출, 투자, 외환, 카드, 사업자)

Critical Solid

• Background: #E02000
• Text: #FFFFFF
• Border: none
• Radius: 12px
• Padding: 14px 20px
• Font: 16px / 600
• Use: Destructive actions (계좌 해지, 자동이체 삭제)

Cards

Product Card (corporate)

• Background: #FFFFFF
• Border: none (or 1px solid #E6E6E6 when laid on white)
• Radius: 12px (verified — corporate card-link border-radius: 12px)
• Padding: 24px
• Shadow: none — corporate site is shadow-free; depth via background fill #F7F7F7
• Use: AI 서비스 / mini / 사업자 / 글로벌 sections on /view/service

Section Fill Card

• Background: #F7F7F7
• Border: none
• Radius: 16px
• Padding: 32px
• Use: Mid-page promotional sections, FAQ groupings

Debit / Savings Card (product visualization)

• Background: #FFE300 (KakaoBank Yellow) — face color
• Border: none
• Radius: 16px (mobile-app card visual)
• Aspect: ~1.586:1 (CR-80 card proportion)
• Use: Card preview tiles, 26주적금 progress card, 모임통장 summary card. Kakao Friends mascot illustration (Ryan / Apeach / Muzi) often sits left, account label right, amount bottom-right.

Inputs

Default

• Background: #FFFFFF
• Text: #1E1E1E
• Border: 1px solid #CCCCCC
• Radius: 12px
• Padding: 14px 16px
• Font: 16px / 400
• Placeholder: #A3A3A3
• Focus: border #1E1E1E 1.5px (no yellow focus — yellow is brand, not state)
• Error: border #E02000 1.5px
• Use: Form fields, amount entry, recipient lookup

Amount Input (large)

• Background: transparent
• Text: #1E1E1E, 32–48px / 700
• Border: none (underline only on focus, 2px solid #1E1E1E)
• Use: Transfer amount entry — banking apps expect amount as a hero numeral

Badges

Notification Dot

• Background: #E02000
• Text: #FFFFFF
• Border: 1.5px solid #FFFFFF (separation from yellow surfaces)
• Radius: 9999px
• Padding: 2px 6px
• Font: 11px / 700
• Use: Unread notification on tab/card

Status Pill (Positive)

• Background: rgba(15, 190, 108, 0.12)
• Text: #0FBE6C
• Border: none
• Radius: 9999px
• Padding: 4px 10px
• Font: 12px / 600
• Use: "이체 완료", "적금 진행중"

Status Pill (Critical)

• Background: rgba(224, 32, 0, 0.12)
• Text: #E02000
• Use: "이체 실패", "기한 만료"

Tabs (segmented)

Segmented Control

• Container: #F7F7F7 bg, 12px radius, 4px inner padding
• Inactive tab: transparent, #A3A3A3 text, 14px / 600
• Active tab: #FFFFFF bg, #1E1E1E text, 14px / 600, shadow 0 1px 2px rgba(0,0,0,0.08)
• Use: Switching between account types, period filters

List Items

Account Row

• Background: #FFFFFF
• Padding: 16px 20px
• Min-height: 64px
• Avatar: 40px rounded square (12px radius — Kakao family rule)
• Account name: 16px / 600 / #1E1E1E
• Account number / sub-label: 13px / 400 / #A3A3A3
• Right-aligned amount: 16px / 700 / #1E1E1E (color flips to #E02000 for negative)
• Divider: 1px solid #E6E6E6 between rows

---

Verified: 2026-05-08 Tier 1 sources: kakaocorp.com/view/about/brand/resource (official brand guideline V2.0, 2024-08 — Yellow #FFE300 / Black #1E1E1E / Gray #A3A3A3 / Light Gray #CCCCCC); kakaobank.com/ (live DOM — Pretendard Variable type stack ✓, hero 90px/800 ✓, surface fills #f7f7f7 / #f9f9f9 ✓, header 62px / 14px·600 nav links ✓, sub-nav inactive #888888 ✓); kakaobank.com/view/service (live DOM — display 42px/700 ✓, section h2 32px/700 ✓, service tab 61px/16px·400 ✓, 12px card radius ✓). Tier 2 sources: getdesign.md/kakaobank — no record (explicit "No designs found"). styles.refero.design — not searched (no Kakao-family record per kakao reference). Tier 2b status: unavailable; Tier 1 (live DOM + official brand guideline V2.0) treated as authoritative. Conflicts unresolved: none. Brand guideline #FFE300 is the single canonical yellow — explicitly disambiguated from Kakao parent (#FEE500) and Kakao marketing (#FAE100). Body weights on the corporate site are intentionally chrome-light; product-facing button specs (Yellow Solid Primary, etc.) are inferred from the canonical yellow + Kakao-family 12px radius pattern, not directly inspected on web (they live in the mobile app).

5. Layout Principles

Spacing System

• Base unit: 4px
• Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 56px, 64px, 80px
• Horizontal screen padding (mobile): 20px
• Horizontal screen padding (web max): centered max-width 1360px (verified — h2 width on /view/service)
• List item vertical padding: 16px
• Section vertical rhythm: 80px between major sections, 32px between sub-sections

Grid & Container

• Web: 1360px content max-width, centered
• Mobile (app): full-width with 20px horizontal gutter
• Card grid: 4-column on desktop, 2-column on tablet, single column on mobile
• Account list: single column, full-width items, 64px row height

Whitespace Philosophy

• Banking-formal, not bank-formal. Generous whitespace says "we have nothing to hide" — but it's structured, not luxurious. Every section breathes; no section sprawls.
• Yellow earns its space. When yellow appears (card face, hero illustration, primary CTA), it gets ≥40% of its container; partial-yellow accents are forbidden by guideline.
• Lists density, hero generosity. Account/transaction lists target 6+ rows per viewport; hero and onboarding screens target 1 idea per viewport.

Border Radius Scale

• Tight (8px): inline tags, small chips
• Standard (12px): buttons, inputs, product cards, avatars (rounded squares — Kakao-family rule, not circles)
• Comfortable (16px): section fill cards, debit card visualization
• Sheet (20px): bottom sheet top corners
• Pill (9999px): status badges, notification dots, segmented control inactive tabs

6. Depth & Elevation

Shadow Philosophy. KakaoBank inherits Kakao parent's flat-design discipline and amplifies it for banking-formal trust. The corporate site has zero shadows; depth is communicated through #FFFFFF → #F7F7F7 → #F9F9F9 background steps and 1px #E6E6E6 dividers. Mobile-app surfaces use shadows sparingly — the debit card face does not float; it sits flat on white. Yellow never casts a yellow-tinted shadow.

7. Do's and Don'ts

Do

• Use #FFE300 exactly — match Pantone Yellow 012 C/U, never substitute #FAE100 / #FEE500 / #FFCC00
• Pair yellow surfaces with #1E1E1E text — never white-on-yellow for body copy (contrast fail)
• Use Pretendard Variable on web; respect Korean-tuned line-heights
• Keep the brand symbol on solid Yellow, Black, or White only (per guideline)
• Use 12px radius as the family default (buttons, cards, avatars-as-rounded-squares)
• Reserve Kakao Friends mascots for product moments (cards, 26주적금 challenges, 모임 메시지카드) — never in compliance chrome
• Use full-strength colors — #1E1E1E body, #A3A3A3 caption, #CCCCCC border. Avoid in-between grays
• Let the corporate site stay near-monochrome — yellow is for the app, not the marketing chrome

Don't

• Don't use circular avatars — Kakao family uses 12px rounded squares
• Don't tint shadows with yellow — shadows stay neutral so yellow remains the only warmth
• Don't use yellow for error or warning states — yellow is brand, never status
• Don't introduce a secondary brand hue (no "KakaoBank Blue", no "KakaoBank Green") — semantic blues/greens are utility, not brand
• Don't render the symbol on a non-Yellow/Black/White background — guideline forbidden
• Don't apply the wordmark independently — it follows Kakao 공동체 CI rules, not standalone use
• Don't use pure black #000000 for text — use #1E1E1E to match the family
• Don't use a custom display webfont — Pretendard Variable is the only typeface on web

8. Responsive Behavior

Breakpoints

Touch Targets

• Buttons: 48px min-height (default), 56px (large), 40px (compact)
• Tab bar: 56px height, evenly distributed
• List rows: 64px (account list), 56px (settings list)
• Notification dot: 16px diameter minimum

Collapsing Strategy

• Desktop top nav (소개 / 서비스 / ESG / 투자정보 / 고객센터 / 인재영입) collapses to hamburger drawer below 768px
• Service product-category tab strip (통장 / 저축 / 대출 / 투자 / 외환 / 카드 / 사업자) becomes horizontal scroll below 768px
• Card grids: 4 → 2 → 1 column at desktop / tablet / mobile breakpoints
• Bottom CTA in product flows: sticky full-width with safe area inset

Image Behavior

• Hero illustration (Kakao Friends, 26주적금 character): edge-bleed on mobile, contained on desktop
• Card faces (debit / savings / 모임): 1.586:1 aspect (CR-80 proportion), 16px radius
• Mascot avatars in chat-style flows: 40px rounded square, 12px radius

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: KakaoBank Yellow (#FFE300)
• CTA Text on Yellow: Near Black (#1E1E1E) — NEVER white on yellow
• Background: Pure White (#FFFFFF)
• Surface Fill: Light Fill (#F7F7F7)
• Heading text: Near Black (#1E1E1E)
• Body text: Near Black (#1E1E1E)
• Secondary text: Gray (#A3A3A3)
• Inactive nav text: Cool Gray (#888888)
• Border: Light Gray (#CCCCCC)
• Divider: Border Subtle (#E6E6E6)
• Error: Red (#E02000)
• Success: Green (#0FBE6C)
• Link / iOS-blue action: Blue (#007AFF)

Example Component Prompts

• "Create a Yellow Solid primary button: #FFE300 background, #1E1E1E text 16px weight 600, 12px radius, 14×20 padding, 48px min-height, full-width on mobile. Pressed: opacity 0.85. Disabled: #F7F7F7 bg, #CCCCCC text."
• "Build a debit card visualization: #FFE300 background, 16px radius, 1.586:1 aspect, 24px padding. Top-left: account name 14px weight 600 #1E1E1E. Top-right: KakaoBank symbol 24px. Bottom-left: card number masked (•••• •••• •••• 1234) 14px weight 500 #1E1E1E. Bottom-right: Kakao Friends mascot illustration 80px."
• "Design an account list row: white bg, 64px row height, 20px h-padding. Left: 40px rounded-square avatar (12px radius) + 12px gap + account name (16px weight 600 #1E1E1E) over account number (13px weight 400 #A3A3A3). Right: amount (16px weight 700 #1E1E1E, #E02000 if negative). 1px #E6E6E6 bottom border."
• "Create a 26주적금 progress card: white bg, 1px #E6E6E6 border, 12px radius, 24px padding. Top: title '26주적금' 18px weight 700 #1E1E1E. Middle: 26-dot progress strip — completed dots #FFE300, remaining dots #CCCCCC, 8px diameter, 8px gap. Bottom: '13주차 진행중' 13px #A3A3A3 left, 'KRW 130,000' 16px weight 700 #1E1E1E right."
• "Design a transfer success screen: full-screen white bg. Center: 64px green check #0FBE6C in a circle. Below: '이체가 완료되었어요' 24px weight 700 #1E1E1E. Below that: '50,000원을 김카뱅에게 보냈어요' 16px weight 400 #A3A3A3. Bottom: Yellow Solid '확인' button (full-width, 56px tall, sticky with 20px safe-area inset)."

Iteration Guide

1. Yellow is #FFE300 exactly — not #FAE100, not #FEE500. Brand guideline is canonical.
2. Pretendard Variable on web; never embed a custom display font on KakaoBank-styled surfaces.
3. 12px is THE radius — buttons, cards, avatars (as rounded squares), inputs.
4. Avatars are rounded squares (12px radius), not circles — Kakao family rule.
5. Text on yellow is always #1E1E1E, never white. Text on black/dark is always #FFFFFF.
6. Banking-formal restraint: don't use yellow as ambient chrome — only as brand and primary action.
7. Mascots (Ryan, Apeach, Tube, Muzi) are product moments, never compliance moments.
8. Mobile-first at 375px; 1360px max content width on web.

---

10. Voice & Tone

KakaoBank speaks like a friendly fintech that knows it's still a bank — warm and colloquial enough that you'd forward a notification to your group chat, formal enough that the regulatory copy underneath is bulletproof. The closest sibling is Toss in posture (helpful, plain-spoken, allergic to bank jargon), but the flavor is more Kakao-character — small turns of phrase that wink at the messenger origin (이체할게요, 보냈어요, 김카뱅에게), and product names that pun rather than describe (세이프박스 instead of "secondary holding account", 26주적금 instead of "26-week recurring deposit", 모임통장 instead of "shared group account"). The default sentence ending is the polite-conversational 해요체 (-어요 / -예요) — never 합니다체 for body copy, except in legal/약관 surfaces where regulatory clarity demands it.

The brand explicitly markets itself with the line "나의 첫 번째 AI 은행" (verified live, kakaobank.com hero, 90px/800) and "나의 일상 속 유용한 금융 서비스를 만듭니다" (verified live, kakaobank.com sub-hero) — 나의 (my) is the recurring possessive. Banking is framed as personal infrastructure, not institutional service.

Forbidden phrases. 불편을 드려 죄송합니다, 데이터가 없습니다, 오류가 발생했습니다 (단독), 혁신적인, 최고의, 업계 최초 (마케팅 superlative). 영어 원문 노출 (Get Started → 시작하기로 번역). 명령형 (-해라). Emoji는 product chrome에서 금지 (이모티콘은 콘텐츠라 OK, UI 텍스트엔 금지).

Voice samples.

• "나의 첫 번째 AI 은행" — corporate hero.
• "나의 일상 속 유용한 금융 서비스를 만듭니다" — corporate sub-hero.
• "카카오뱅크의 서비스를 소개합니다" — service page h1.
• "어렵고 복잡한 금융생활, 카카오뱅크 AI가 도와드릴게요." — AI 서비스 section copy.
• "내 사업장에 맞는 보증서대출을 확인할 수 있어요." — 사업자 보증서대출 product copy.
• "이체가 완료되었어요" — illustrative success toast pattern.
• "50,000원을 김카뱅에게 보냈어요" — illustrative transfer confirmation.

11. Brand Narrative

KakaoBank is Korea's first internet-only bank, founded 2016-01 as 'Kakaobank Preparatory Corporation' in Pangyo and launched commercially on 2017-07-27 as a consortium between Kakao Corp and Korea Investment Holdings (the lead financial partner — KB Kookmin Bank held a smaller stake in the original consortium but was not the controlling financial partner; this is a common misattribution) (Wikipedia — KakaoBank). The launch was the cleanest product-market fit Korean banking had ever seen: 1 million users in 5 days, hitting 23M+ users by January 2024 — close to half of South Korea's adult population. The thesis was simple and brutal: branchless banking, no transaction fees, higher deposit interest, and an onboarding flow that opened a real account in under 7 minutes from a smartphone. By FY2024 the loan book had expanded to ₩44.5T (from ₩20.7T in FY2020); deposits are in the same magnitude (KoalaGains — KakaoBank stock analysis).

The 2021-08-06 KOSPI IPO at ₩39,000 priced KakaoBank at 56× book value — a multiple that drew immediate "bubble or jackpot" headlines because traditional Korean bank price-to-book averages around 0.44× (Korea Herald — Jackpot or bubble?, KED Global — KakaoBank becomes Korea's most valuable lender). The IPO drew an all-time-high ₩2,585T in institutional bids, oversubscribed 1,733×. The stock subsequently fell — market cap dropped 58.7% in 2022 — but the operating story compounded (4-year revenue CAGR 29.2%, net income CAGR 40.3%), and the bank now occupies an unusual niche: a tech-multiple banking license, listed on KOSPI as ticker 323410, generating banking-margin profits with consumer-tech engagement metrics.

What KakaoBank refuses: branch infrastructure (none — by design), paper paperwork (entire account opening is in-app), Kakao parent's full yellow signature on every surface (the corporate site is monochrome; yellow is reserved for product and brand moments per V2.0 guideline), and the imitative "fintech blue" that swept Western neobanks in the 2010s. What it embraces: Kakao Friends mascots as product flavoring (Ryan / Apeach / Tube / Muzi appear on debit card faces and 26주적금 challenge characters, never in compliance chrome), cute-formal product naming (세이프박스, 26주적금, 모임통장, mini), and a single-yellow brand discipline that is documented to 5-decimal precision in PANTONE Yellow 012 C/U in the V2.0 brand guide (KakaoBank Brand Identity Guidelines V2.0, 2024-08).

The CEO is 윤호영 (Yun Ho-young); 사업자번호 375-88-00197; 고객센터 1599-3333 (verified live in footer). The name 카카오뱅크 literally reads "Kakao Bank" — but the symbol is a stylized 'B' with an 'I' (나, "me") at its center, and the brand resource page makes the meaning explicit: "내가 중심이 되는 은행" — "the bank with me at the center." That is the 1-sentence brand positioning, and every other decision in this document descends from it.

12. Principles

1. Yellow is product, not chrome. #FFE300 shows up on the symbol, the app icon, the debit card face, the primary CTA — never as ambient marketing background, never tinted, never substituted. UI implication: if a designed surface uses #FFE300 as a >40% fill, it must be either (a) the brand symbol, (b) a card face, or (c) a primary CTA. Otherwise demote to #F7F7F7 or #FFFFFF.
2. One yellow, exactly. The brand guide V2.0 explicitly forbids near-yellows (#FAE100, #FFCC00, #FEE500). UI implication: color tokens must reference #FFE300 by name; tinted shades (yellow-50, yellow-100…) are not in the system. If a designer reaches for "lighter yellow," that is a signal to switch to #F7F7F7 or white instead.
3. Banking-formal, character-flavored. Compliance copy uses 합니다체; product copy uses 해요체; mascots appear in product moments, never in legal/identity-verification flows. UI implication: a Kakao Friends illustration on an OTP entry screen is a bug.
4. Mobile-app is the product; web is the marketing. The corporate site is intentionally chrome-light because the actual DS lives in iOS/Android. UI implication: don't design web flows that try to replicate the mobile-app experience. Web is for persuasion (hero, services, IR), app is for transactions.
5. Kakao family resemblance, not imitation. #1E1E1E near-black, 12px radius, rounded-square avatars, flat-design — these are inherited from the Kakao parent system intentionally. UI implication: if you find yourself reaching for circular avatars or pure-black text, you've drifted out of the family.
6. Cards over forms. When the bank wants to show you something — a savings goal, a recent transfer, a 모임 settlement — it shows a card, not a row in a table. UI implication: default to card-based summary surfaces; reserve dense rows for searchable history (transactions, statements).
7. One accent, real semantics. Yellow is brand. Red #E02000 is error. Green #0FBE6C is success. Blue #007AFF is iOS-aligned action affordance. There is no "KakaoBank green" or "KakaoBank red" — semantics stay semantic. UI implication: never use yellow to indicate warning or attention; use the warning amber #FF9800 exclusively for that, and only sparingly.

13. Personas

Personas are fictional archetypes informed by publicly described KakaoBank user segments (Korean digital-native banking users 20s–40s, especially mobile-only segments, plus the SMB/사업자 segment introduced post-2021 and the youth/mini segment), not individual people.

민지, 28, 서울. 마케팅 회사 사원. 월급 통장은 KB지만 생활비·이체는 전부 카카오뱅크. 친구 모임 회비는 모임통장으로 받고, 26주적금으로 연말 여행비 모은다. 카카오뱅크를 "은행"이라기보다는 "돈 쓰는 카톡"이라고 생각함 — UI가 채팅처럼 가벼운 게 그녀가 매일 여는 이유. 종이 통장을 본 적이 거의 없다.

준호, 35, 부산. 1인 카페 운영. 개인사업자통장 + 부가세박스 조합으로 매출-경비-부가세를 자동 분류. 매년 부가세 신고 직전 서류 떼러 은행 가는 게 사라진 게 그에게 가장 큰 사건. 신용대출도 비대면으로 받았다 — 사장님 정책자금 대출도 비대면으로 간편하게!라는 카피가 정확히 그를 지칭한다고 느낌.

서연, 14, 대전. 중2. 카카오뱅크 mini 사용자. 부모님이 만들어준 mini 계정에 용돈이 들어오고, 본인이 mini 카드로 편의점·스타벅스 결제. mini 내맘대로 저금으로 굿즈 구입 자금을 모은다. 부모-자녀 공동 가시성이 그녀의 부모님이 mini를 신뢰하는 이유.

Mr. 김, 52, 인천. 중소기업 부장. 디지털 친화는 아니지만 코로나 이후 모든 송금을 카카오뱅크로 옮겼다. 큰 금액 이체할 때 인증 단계가 무서워서 일부러 천천히 진행한다. 빨간 경고색 + 명료한 한 줄 카피 (잔액 5,000만 원 이상 이체는 추가 인증이 필요해요)가 그가 신뢰의 신호로 받는 정확한 패턴.

14. States

15. Motion & Easing

Durations:

Easings:

Spring stance. Spring overshoot은 success confirmation에만 한정 허용 — 이체 성공 / 적금 목표 달성 같은 사용자가 "해냈다"고 느껴야 하는 순간에 한정. 일반 UI 모션은 spring 금지 (은행은 진중함이 우선). Pull-to-refresh는 OS 네이티브 spring 그대로 사용 (override가 더 어색).

Signature motions.

1. 이체 성공 체크 등장. 64px 녹색 체크 아이콘이 motion-success / ease-spring-success로 0.6 → 1.0 scale + opacity 0 → 1. 이 한 모션이 KakaoBank의 "끝났어요" 시그니처. 흔들림 없는 완결감.
2. 카드 탭. 카드가 98% scale로 압축 (motion-fast / ease-standard), tap-up에서 release, 이후 motion-page / ease-enter로 라우트 전환.
3. 잔액 업데이트. 잔액 숫자가 변할 때, 새 숫자가 위에서 아래로 8px 슬라이드 + 0.5 → 1 opacity (300ms). 카운트업 애니메이션은 사용 안 함 — 정확한 금액이 즉시 보여야 함.
4. 노란 색 transition 금지. #FFE300은 binary on/off — 중간 yellow tint를 거치는 transition은 brand 색상 인지도를 훼손하므로 허용되지 않음. 노란 surface가 등장할 때는 fade-in 또는 slide-in만, 색상 transition 없음.
5. Reduce motion. prefers-reduced-motion: reduce 시 모든 spring → instant fade, 모든 motion-* → motion-instant. 성공 체크는 spring 없이 0.5초 fade-in으로 대체. 앱은 fully usable 유지.

---

Verified: 2026-05-08 Tier 1 sources (Philosophy): kakaobank.com/view/about/brand/resource (official KakaoBank Brand Identity Guidelines V2.0, Aug 2024 — Yellow #FFE300, "내가 중심이 되는 은행" symbol meaning, single-yellow discipline); kakaobank.com/ (corporate hero "나의 첫 번째 AI 은행" / 90px·800, sub-hero, monochrome canvas); kakaobank.com/view/service (product copy verified, service taxonomy verified). Tier 2 sources: Wikipedia (KakaoBank — founding 2016-01 / launch 2017-07-27 / Kakao Corp + Korea Investment Holdings consortium), KED Global (KOSPI IPO 2021-08-06 ₩39,000), Korea Herald (IPO 56× book value framing), KoalaGains (FY2020→FY2024 ₩20.7T→₩44.5T loan book), MatrixBCG (1M users in 5 days, 23M+ by Jan 2024), Brandfetch. Tier 2 (component DS): getdesign.md/kakaobank — no record. styles.refero.design — not searched (no Kakao-family record per kakao reference precedent). Style ref for tone: kakao (Kakao 공동체 family resemblance — 해요체 body, 합니다체 legal), toss (Korean fintech voice posture). Conflicts unresolved: none. The user task brief's "KB Bank consortium" framing is amended to "Korea Investment Holdings" per primary sources; KakaoBank Yellow is precisely #FFE300 (not #FAE100 as the brief speculated) per the V2.0 brand guideline.