oh-my-design-cli 1.8.7 → 1.9.0

package/web/references/kakaobank/DESIGN.md

@@ -8,595 +8,294 @@ primary_color: "#ffe300"
 logo:
   type: simpleicons
   slug: kakaotalk
-verified: "2026-05-15"
+verified: "2026-07-12"
 omd: "0.1"
 ds:
   name: KakaoBank Brand Resource
   url: "https://www.kakaobank.com/view/about/brand/resource"
   type: brand
-  description: "KakaoBank Brand Identity Guidelines V2.0 — logo system, KakaoBank Yellow #FFE300, downloadable CI assets."
-  og_image: "https://www.kakaobank.com/view/images/kkb_og_img.png"
+  description: "Official KakaoBank identity resource with symbol, wordmark, and brand-color guidance; it does not substitute for native banking-product UI evidence."
+verification_v2:
+  schema: 2
+  checked: "2026-07-12"
+  surfaces:
+    - { id: home, kind: corporate-product, url: "https://www.kakaobank.com/", inspected: "2026-07-12" }
+    - { id: service, kind: public-service, url: "https://www.kakaobank.com/view/service", inspected: "2026-07-12" }
+    - { id: brand, kind: official-brand, url: "https://www.kakaobank.com/view/about/brand/resource", inspected: "2026-07-12" }
+  sources:
+    - { id: home-live, kind: product-surface, url: "https://www.kakaobank.com/", captured: "2026-07-12" }
+    - { id: service-live, kind: product-surface, url: "https://www.kakaobank.com/view/service", captured: "2026-07-12" }
+    - { id: brand-live, kind: brand-asset, url: "https://www.kakaobank.com/view/about/brand/resource", captured: "2026-07-12" }
+    - { id: brand-pdf, kind: official-doc, url: "https://www.kakaobank.com/static/etc/logo/KakaoBank_BrandIdentityGuidelines_V2.0.pdf", captured: "2026-07-12" }
+  conflicts: []
+  claims:
+    "tokens.colors.primary": &brand_evidence { surface_id: brand, source_id: brand-live, method: official-brand-inspect, captured: "2026-07-12" }
+    "tokens.colors.canvas": &home_evidence { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-12" }
+    "tokens.colors.foreground": *home_evidence
+    "tokens.colors.secondary": *home_evidence
+    "tokens.colors.body": &service_evidence { surface_id: service, source_id: service-live, method: live-inspect, captured: "2026-07-12" }
+    "tokens.colors.surface": *home_evidence
+    "tokens.colors.divider": *brand_evidence
+    "tokens.typography.family.ui": *home_evidence
+    "tokens.typography.hero.size": *home_evidence
+    "tokens.typography.hero.weight": *home_evidence
+    "tokens.typography.hero.lineHeight": *home_evidence
+    "tokens.typography.hero.tracking": *home_evidence
+    "tokens.typography.hero.use": *home_evidence
+    "tokens.typography.display.size": *service_evidence
+    "tokens.typography.display.weight": *service_evidence
+    "tokens.typography.display.lineHeight": *service_evidence
+    "tokens.typography.display.tracking": *service_evidence
+    "tokens.typography.display.use": *service_evidence
+    "tokens.typography.section.size": *service_evidence
+    "tokens.typography.section.weight": *service_evidence
+    "tokens.typography.section.lineHeight": *service_evidence
+    "tokens.typography.section.tracking": *service_evidence
+    "tokens.typography.section.use": *service_evidence
+    "tokens.typography.card-title.size": *service_evidence
+    "tokens.typography.card-title.weight": *service_evidence
+    "tokens.typography.card-title.lineHeight": *service_evidence
+    "tokens.typography.card-title.tracking": *service_evidence
+    "tokens.typography.card-title.use": *service_evidence
+    "tokens.typography.body.size": *home_evidence
+    "tokens.typography.body.weight": *home_evidence
+    "tokens.typography.body.lineHeight": *home_evidence
+    "tokens.typography.body.use": *home_evidence
+    "tokens.typography.navigation.size": *home_evidence
+    "tokens.typography.navigation.weight": *home_evidence
+    "tokens.typography.navigation.lineHeight": *home_evidence
+    "tokens.typography.navigation.tracking": *home_evidence
+    "tokens.typography.navigation.use": *home_evidence
+    "tokens.spacing.xs": *home_evidence
+    "tokens.spacing.sm": *home_evidence
+    "tokens.spacing.md": *home_evidence
+    "tokens.spacing.lg": *service_evidence
+    "tokens.spacing.xl": *brand_evidence
+    "tokens.rounded.action": *home_evidence
+    "tokens.rounded.section": *home_evidence
+    "tokens.rounded.full": *home_evidence
+    "tokens.components.top-navigation.type": *home_evidence
+    "tokens.components.top-navigation.bg": *home_evidence
+    "tokens.components.top-navigation.fg": *home_evidence
+    "tokens.components.top-navigation.radius": *home_evidence
+    "tokens.components.top-navigation.padding": *home_evidence
+    "tokens.components.top-navigation.height": *home_evidence
+    "tokens.components.top-navigation.font": *home_evidence
+    "tokens.components.top-navigation.states": *home_evidence
+    "tokens.components.top-navigation.use": *home_evidence
+    "tokens.components.service-tab.type": *service_evidence
+    "tokens.components.service-tab.bg": *service_evidence
+    "tokens.components.service-tab.fg": *service_evidence
+    "tokens.components.service-tab.border": *service_evidence
+    "tokens.components.service-tab.radius": *service_evidence
+    "tokens.components.service-tab.padding": *service_evidence
+    "tokens.components.service-tab.height": *service_evidence
+    "tokens.components.service-tab.font": *service_evidence
+    "tokens.components.service-tab.states": *service_evidence
+    "tokens.components.service-tab.use": *service_evidence
+    "tokens.components.black-action.type": *home_evidence
+    "tokens.components.black-action.bg": *home_evidence
+    "tokens.components.black-action.fg": *home_evidence
+    "tokens.components.black-action.radius": *home_evidence
+    "tokens.components.black-action.padding": *home_evidence
+    "tokens.components.black-action.height": *home_evidence
+    "tokens.components.black-action.font": *home_evidence
+    "tokens.components.black-action.states": *home_evidence
+    "tokens.components.black-action.use": *home_evidence
+    "tokens.components.resource-download.type": *brand_evidence
+    "tokens.components.resource-download.bg": *brand_evidence
+    "tokens.components.resource-download.fg": *brand_evidence
+    "tokens.components.resource-download.radius": *brand_evidence
+    "tokens.components.resource-download.padding": *brand_evidence
+    "tokens.components.resource-download.height": *brand_evidence
+    "tokens.components.resource-download.font": *brand_evidence
+    "tokens.components.resource-download.states": *brand_evidence
+    "tokens.components.resource-download.use": *brand_evidence
+    "tokens.components.brand-spec-row.type": *brand_evidence
+    "tokens.components.brand-spec-row.bg": *brand_evidence
+    "tokens.components.brand-spec-row.fg": *brand_evidence
+    "tokens.components.brand-spec-row.border": *brand_evidence
+    "tokens.components.brand-spec-row.radius": *brand_evidence
+    "tokens.components.brand-spec-row.padding": *brand_evidence
+    "tokens.components.brand-spec-row.font": *brand_evidence
+    "tokens.components.brand-spec-row.use": *brand_evidence
 tokens:
-  source: prose-derived
-  extracted: "2026-06-09"
-  components_harvested: true
+  source: reconciled
+  extracted: "2026-07-12"
+  note: "Fresh corporate home, service, and official brand-resource capture. Brand identity and public web measurements are promoted; native banking-product controls are not inferred."
   colors:
     primary: "#ffe300"
-    base: "#1e1e1e"
     canvas: "#ffffff"
-    gray: "#a3a3a3"
-    light-gray: "#cccccc"
-    surface-fill: "#f7f7f7"
-    surface-subtle: "#f9f9f9"
-    error: "#e02000"
-    link: "#007aff"
-    success: "#0fbe6c"
-    warning: "#ff9800"
-    inactive-tab: "#888888"
-    border-subtle: "#e6e6e6"
-    on-primary: "#1e1e1e"
+    foreground: "#000000"
+    secondary: "#888888"
+    body: "#444444"
+    surface: "#f7f7f7"
+    divider: "#e6e6e6"
   typography:
-    family: { sans: "Pretendard Variable", mono: "SF Mono" }
-    hero-mega:     { size: 90, weight: 800, lineHeight: 1.10, use: "Corporate hero" }
-    display:       { size: 42, weight: 700, lineHeight: 1.25, use: "Service page h1" }
-    section-title: { size: 32, weight: 700, lineHeight: 1.30, use: "Mid-page h2" }
-    heading:       { size: 20, weight: 600, lineHeight: 1.40, use: "Footer column h3" }
-    title:         { size: 18, weight: 600, lineHeight: 1.44, use: "List section titles, modal headers" }
-    body-large:    { size: 16, weight: 400, lineHeight: 1.50, use: "Default body, card descriptions" }
-    body:          { size: 14, weight: 400, lineHeight: 1.55, use: "Sub-nav, dense list rows, button labels" }
-    caption:       { size: 13, weight: 400, lineHeight: 1.55, use: "Timestamps, helper text" }
-    micro:         { size: 12, weight: 400, lineHeight: 1.50, use: "Disclaimers, footer fine print" }
-  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 24, xxl: 32, section: 80 }
-  rounded: { sm: 8, md: 12, lg: 16, full: 9999 }
-  shadow:
-    whisper: "0 1px 2px rgba(0,0,0,0.04)"
-    subtle: "0 2px 8px rgba(0,0,0,0.06)"
-    sheet: "0 -2px 16px rgba(0,0,0,0.08)"
+    family: { ui: "Pretendard Variable" }
+    hero: { size: 90, weight: 800, lineHeight: 1.3, tracking: -0.9, use: "Current corporate home hero" }
+    display: { size: 42, weight: 700, lineHeight: 1.24, tracking: -0.84, use: "Current service page title" }
+    section: { size: 32, weight: 700, lineHeight: 1.36, tracking: -0.64, use: "Current public service section heading" }
+    card-title: { size: 24, weight: 700, lineHeight: 1.44, tracking: -0.48, use: "Current public service and brand-resource card heading" }
+    body: { size: 16, weight: 400, lineHeight: 1.5, use: "Current public body and list text" }
+    navigation: { size: 14, weight: 600, lineHeight: 1.5, tracking: -0.14, use: "Current top navigation" }
+  spacing: { xs: 8, sm: 12, md: 16, lg: 24, xl: 40 }
+  rounded: { action: 6, section: 16, full: 9999 }
+  components_harvested: true
   components:
-    button-yellow-solid: { type: button, bg: "#ffe300", fg: "#1e1e1e", radius: 12, padding: "14px 20px", font: "16px/600", use: "Primary CTA in product flows" }
-    button-black-solid: { type: button, bg: "#1e1e1e", fg: "#ffffff", radius: 12, padding: "14px 20px", font: "16px/600", use: "Secondary high-emphasis CTA" }
-    button-outline: { type: button, bg: "transparent", fg: "#1e1e1e", radius: 12, padding: "14px 20px", font: "16px/600", use: "Tertiary actions" }
-    button-nav-link: { type: button, bg: "transparent", fg: "#1e1e1e", padding: "0 20px", font: "14px/600", use: "Top navigation items" }
-    button-critical: { type: button, bg: "#e02000", fg: "#ffffff", radius: 12, padding: "14px 20px", font: "16px/600", use: "Destructive actions" }
-    tab-subnav: { type: tab, bg: "transparent", fg: "#888888", padding: "20px 0", font: "14px/400", active: "#1e1e1e text", use: "Sub-section nav" }
-    tab-service: { type: tab, bg: "transparent", fg: "#1e1e1e", padding: "16px 0", font: "16px/400", use: "Product-category tabs" }
-    tab-segmented: { type: tab, bg: "transparent", fg: "#a3a3a3", radius: 12, font: "14px/600", active: "#ffffff bg + #1e1e1e text", use: "Segmented control" }
-    card-product: { type: card, bg: "#ffffff", radius: 12, padding: "24px", use: "Corporate product card" }
-    card-section-fill: { type: card, bg: "#f7f7f7", radius: 16, padding: "32px", use: "Mid-page promotional sections" }
-    card-debit: { type: card, bg: "#ffe300", radius: 16, use: "Debit/savings card visualization, CR-80 aspect" }
-    input-default: { type: input, bg: "#ffffff", fg: "#1e1e1e", radius: 12, padding: "14px 16px", font: "16px/400", use: "Form fields, amount entry" }
-    input-amount: { type: input, bg: "transparent", fg: "#1e1e1e", font: "32px/700", use: "Transfer amount hero numeral" }
-    badge-notification: { type: badge, bg: "#e02000", fg: "#ffffff", radius: 9999, padding: "2px 6px", font: "11px/700", use: "Unread notification dot" }
-    badge-status-positive: { type: badge, fg: "#0fbe6c", radius: 9999, padding: "4px 10px", font: "12px/600", use: "이체 완료, 적금 진행중" }
-    badge-status-critical: { type: badge, fg: "#e02000", radius: 9999, padding: "4px 10px", font: "12px/600", use: "이체 실패, 기한 만료" }
-    listItem-account: { type: listItem, bg: "#ffffff", padding: "16px 20px", use: "Account row, 64px min-height, 40px rounded-square avatar" }
+    top-navigation: { type: button, bg: "transparent", fg: "#000000", radius: "0px", padding: "0 20px", height: "62px", font: "14px / 600", states: "focus, hover, and pressed captured", use: "Current corporate top navigation item" }
+    service-tab: { type: tab, bg: "transparent", fg: "#000000", border: "0 0 1px #e6e6e6", radius: "0px", padding: "16px 0", height: "62px", font: "16px / 400", states: "default captured; no reusable selected style promoted", use: "Current public service-category tab" }
+    black-action: { type: button, bg: "#000000", fg: "#ffffff", radius: "6px", padding: "9.5px 18px", height: "42px", font: "15px / 600", states: "default captured; no reusable hover or pressed value promoted", use: "Current corporate high-emphasis action" }
+    resource-download: { type: button, bg: "#000000", fg: "#ffffff", radius: "6px", padding: "10px 16px 10px 20px", height: "43px", font: "16px / 400", states: "default captured; no reusable hover or pressed value promoted", use: "Current official brand-resource download action" }
+    brand-spec-row: { type: listItem, bg: "transparent", fg: "#000000", border: "1px 0 0 #e6e6e6", radius: "0px", padding: "10px 0", font: "16px / 400 / 24px", use: "Current official brand specification row" }
 ---
 
 # 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*.
+KakaoBank is an internet bank that presents financial services as part of ordinary mobile life. Its public story spans deposits, savings, loans, investment, foreign exchange, cards, business banking, youth products, and newer AI-led service exploration. The corporate site expresses that breadth with unusually little banking ornament: a white canvas, black type, pale-gray sections, very large Korean headings, and only selective use of the protected KakaoBank Yellow. The result feels digitally accessible while retaining the clarity and restraint expected from a regulated financial institution.
+
+That restraint is the distinctive system. The official brand resource defines KakaoBank Yellow as `#FFE300`, alongside black, white, and a narrow neutral palette, and warns against nearby substitute yellows. Yet the current public corporate surface is mostly monochrome. Yellow identifies KakaoBank; it is not proof that every banking CTA, card, success state, or app control uses yellow. The current product page organizes the catalog through large editorial sections and simple service tabs, while the brand-resource page explains the symbol, wordmark, and color system as protected identity assets.
 
-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.
+Pretendard Variable carries all visible public UI and editorial roles. It loaded from KakaoBank's own domain and appeared across 645 elements, from the 90px home hero to 14px navigation and 16px body text. Brand character comes from scale, disciplined yellow, and product imagery rather than a proprietary display face.
 
 **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
+- Official single-yellow identity: `#FFE300`, not neighboring Kakao-family yellows
+- White and pale-gray corporate canvas with black-first typography
+- Pretendard Variable loaded across every observed text role
+- 90px/800 home hero and 42px/700 service-page title
+- Flat public components with 0px navigation/tab geometry and 6px black actions
+- Explicit separation between public corporate evidence and native banking-product UI
 
 ## 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.
+- **KakaoBank Yellow** (`#ffe300`): official primary identity color and protected brand specification.
+- **Canvas** (`#ffffff`) and **foreground** (`#000000`): dominant current public pairing.
+- **Secondary** (`#888888`): repeated supporting navigation and footer text.
+- **Body gray** (`#444444`): service and brand-resource explanatory text.
+- **Section surface** (`#f7f7f7`): current quiet public section fill.
+- **Divider** (`#e6e6e6`): public service and brand-spec boundaries.
+
+Earlier `#E02000`, `#0FBE6C`, `#FF9800`, input, placeholder, and native state roles are not retained. The live public site exposed `#007AFF` on small web controls, but its semantic product role was not clear enough to promote.
 
 ## 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)
-
-| Role | Font | Size | Weight | Line Height | Notes |
-|------|------|------|--------|-------------|-------|
-| Hero Mega | Pretendard | 90px | 800 | ~1.1 | Corporate hero ("나의 첫 번째 AI 은행 카카오뱅크") — verified |
-| Display | Pretendard | 42px | 700 | ~1.25 | Service page h1 ("카카오뱅크의 서비스를 소개합니다") — verified |
-| Section Title | Pretendard | 32px | 700 | ~1.3 | Mid-page h2 ("새로운 금융 경험, AI 서비스") — verified |
-| Heading | Pretendard | 20px | 600 | ~1.4 | Footer column h3 (소개 / 서비스 / ESG / 투자정보) — verified |
-| Title | Pretendard | 18px | 600 | ~1.44 | List section titles, modal headers |
-| Body Large | Pretendard | 16px | 400 | ~1.5 | Default body, card descriptions, header links — verified |
-| Body | Pretendard | 14px | 400/600 | ~1.55 | Sub-nav, dense list rows, button labels (600 when navigational) |
-| Caption | Pretendard | 13px | 400 | ~1.55 | Timestamps, helper text |
-| Micro | Pretendard | 12px | 400 | ~1.5 | Disclaimers, footer fine print |
-
-### 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.
+### Font evidence boundary
+
+| Evidence class | Resolution |
+|---|---|
+| Official product-use | KakaoBank's current public home, service, and brand-resource pages establish Pretendard Variable. |
+| Live surface-use | Pretendard Variable loaded/high across 645 visible elements from KakaoBank's first-party WOFF2. |
+| Official distributed asset | The public webfont is first-party delivered; the KakaoBank wordmark remains a protected identity asset rather than a font. |
+| Declared-only | `swiper-icons` was declared with zero visible text use. |
+| Unresolved | Native iOS/Android banking flows and device-specific typography remain unresolved. |
+
+| Role | Size | Weight | Line height | Tracking |
+|---|---:|---:|---:|---:|
+| Corporate hero | 90px | 800 | 117px | -0.9px |
+| Service display | 42px | 700 | 52.08px | -0.84px |
+| Section heading | 32px | 700 | 43.52px | -0.64px |
+| Card heading | 24px | 700 | 34.56px | -0.48px |
+| Body/list | 16px | 400 | 24px | normal |
+| Top navigation | 14px | 600 | 21px | -0.14px |
 
 ## 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
+### Current public components
 
----
+#### Top navigation
+- Transparent / black, 0px radius, 62px height, `0 20px`
+- Pretendard Variable 14px/600; focus, hover, and pressed captured
+
+#### Service-category tab
+- Transparent / black, 1px `#e6e6e6` bottom rule
+- 0px radius, 62px height, `16px 0`, 16px/400
+
+#### Corporate black action
+- Black / white, 6px radius, 42px height, `9.5px 18px`
+- Pretendard Variable 15px/600
+
+#### Brand-resource download
+- Black / white, 6px radius, 43px height, `10px 16px 10px 20px`
+- Pretendard Variable 16px/400
 
-**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).
+#### Brand specification row
+- Transparent / black, 1px `#e6e6e6` top rule
+- `10px 0`, 16px/400/24px
+
+Yellow native CTAs, account cards, transfer inputs, status badges, notifications, bottom sheets, and app tabs are intentionally absent until a current inspectable native-product path establishes them.
 
 ## 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
+- Use large type and generous vertical rhythm to explain complex financial categories.
+- Keep public navigation and tabs geometrically flat; hierarchy comes from placement and weight.
+- Use `#f7f7f7` for section-level grouping instead of elevated cards.
+- Apply KakaoBank Yellow at verified identity moments, not as ambient chrome.
+- Keep official brand-resource layouts separate from banking-task layouts.
 
 ## 6. Depth & Elevation
 
-| Level | Treatment | Use |
-|-------|-----------|-----|
-| Flat (Level 0) | No shadow | Default — corporate site is entirely flat. Most product cards |
-| Whisper (Level 1) | `0 1px 2px rgba(0,0,0,0.04)` | Active segmented-tab pip, inline raised chip |
-| Subtle (Level 2) | `0 2px 8px rgba(0,0,0,0.06)` | Floating action button, tooltip |
-| Sheet (Level 3) | `0 -2px 16px rgba(0,0,0,0.08)` | Bottom sheets, modal dialogs |
-
-**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.
+The promoted public system is shadow-free. Separation comes from white/pale-gray surfaces, `#e6e6e6` rules, and typographic scale. No sheet, card, or focus shadow is promoted for native banking UI.
 
 ## 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
+- Use exact `#FFE300` when the role is an official KakaoBank identity role.
+- Preserve Pretendard Variable's observed Korean-first metrics and tracking.
+- Keep the corporate web surface restrained and largely monochrome.
+- Distinguish official identity, public service marketing, and native banking evidence.
 
 ### 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
+- Do not substitute `#FEE500`, `#FAE100`, or another Kakao-family yellow.
+- Do not infer a Yellow CTA or transfer component from a brand swatch.
+- Do not fabricate app error, success, account, badge, or sheet components.
+- Do not turn the public corporate site into a Kakao Friends-heavy app mockup.
 
 ## 8. Responsive Behavior
 
-### Breakpoints
-| Name | Width | Key Changes |
-|------|-------|-------------|
-| Mobile (Primary) | <480px | Full-width app layout, 20px gutter, single-column |
-| Tablet | 480–1024px | 2-column card grids, expanded service tabs |
-| Desktop | 1024–1360px | 4-column grids, fixed top nav, 1360px content max |
-| Wide | >1360px | Content stays at 1360px; canvas extends with `#FFFFFF` margins |
-
-### 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
+The public routes preserve their typographic hierarchy and section grouping while content reflows. Exact mobile-app navigation, banking-task breakpoints, device safe areas, and native keyboard behavior remain unresolved.
 
 ## 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.
-
----
+> Build a restrained Korean financial information surface with a white canvas, black-first type, pale `#f7f7f7` section fills, Pretendard Variable, very large bold headings, flat navigation, and 6px black public actions. Use `#FFE300` only for verified KakaoBank identity roles and omit unverified native banking components.
 
 ## 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.
-
-| Context | Tone |
-|---|---|
-| CTAs | 동사 단독 또는 동사+명사, 짧게. `이체하기`, `확인`, `다음`, `보내기` |
-| 시스템 메시지 | 관찰형 단문. `이체가 완료되었어요`, `잔액이 부족해요`. 감정 부재 |
-| 에러 메시지 | 구체적 원인 + 즉시 행동 한 줄. `잔액이 부족해요. 다른 계좌에서 보내볼래요?` 절대 `오류가 발생했습니다` 단독 사용 금지 |
-| 성공 토스트 | 과거형 단문. `이체 완료`. 축하 이모지·과한 메시지 금지 |
-| 약관 / 공시 | 격식체 (`-합니다`) — 법적 명확성이 우선 |
-| 마케팅 / 새소식 | `해요체` 유지, 캐릭터 개입 가능. `26주 동안 함께 모아봐요!` |
-| 빈 상태 | 다음 행동 1개. `친구를 추가하면 이체가 빨라져요`. 절대 `데이터가 없습니다` |
-| 신뢰·안전 | 차분, 사실 위주. 공포 마케팅 금지 (`사기 주의!` ❌). 보안 정보는 본문 무게 텍스트로 |
-
-**Forbidden phrases.** `불편을 드려 죄송합니다`, `데이터가 없습니다`, `오류가 발생했습니다` (단독), `혁신적인`, `최고의`, `업계 최초` (마케팅 superlative). 영어 원문 노출 (`Get Started` → `시작하기`로 번역). 명령형 (`-해라`). Emoji는 product chrome에서 금지 (이모티콘은 콘텐츠라 OK, UI 텍스트엔 금지).
-
-**Voice samples.**
-
-- *"나의 첫 번째 AI 은행"* — corporate hero. <!-- verified: kakaobank.com, 2026-05-08 -->
-- *"나의 일상 속 유용한 금융 서비스를 만듭니다"* — corporate sub-hero. <!-- verified: kakaobank.com, 2026-05-08 -->
-- *"카카오뱅크의 서비스를 소개합니다"* — service page h1. <!-- verified: kakaobank.com/view/service, 2026-05-08 -->
-- *"어렵고 복잡한 금융생활, 카카오뱅크 AI가 도와드릴게요."* — AI 서비스 section copy. <!-- verified: kakaobank.com/view/service, 2026-05-08 -->
-- *"내 사업장에 맞는 보증서대출을 확인할 수 있어요."* — 사업자 보증서대출 product copy. <!-- verified: kakaobank.com/view/service, 2026-05-08 -->
-- *"이체가 완료되었어요"* — illustrative success toast pattern. <!-- illustrative: pattern derived from Kakao family system messages, not verified verbatim in mobile app -->
-- *"50,000원을 김카뱅에게 보냈어요"* — illustrative transfer confirmation. <!-- illustrative -->
+KakaoBank's public voice makes finance feel ordinary and useful. It favors direct Korean nouns and verbs, names the service category clearly, and explains benefits without institutional ceremony. Service descriptions should state who a product is for, what financial task it supports, and what the visitor can learn next. Corporate and brand material may be more declarative, while compliance or Help content must stay precise and unambiguous. Avoid playful copy where money movement, identity, or risk is involved. Do not invent rates, user counts, or performance claims.
 
 ## 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](https://en.wikipedia.org/wiki/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](https://koalagains.com/stocks/KOSPI/323410)).
-
-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?](https://www.koreaherald.com/article/2666383), [KED Global — KakaoBank becomes Korea's most valuable lender](https://www.kedglobal.com/ipos/newsView/ked202108060001)). 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](https://www.kakaobank.com/static/etc/logo/KakaoBank_BrandIdentityGuidelines_V2.0.pdf)).
-
-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.
+KakaoBank positions banking as a digital product embedded in everyday routines. The official symbol explains a bank centered on the individual, while the service catalog shows continuous expansion from basic accounts into youth, business, investment, global, and AI-related offerings. The visual identity balances Kakao-family recognition with the restraint expected of a bank: one unmistakable yellow, then a large field of neutral structure. This system allows the company to speak both as a consumer product and as a financial institution. Large Korean headings make service categories approachable; monochrome navigation and pale-gray sections keep attention on information rather than decoration. The protected wordmark and exact yellow establish ownership, but they do not dictate the geometry of native transfers, account cards, or compliance flows. Those product layers require their own evidence.
 
 ## 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.
+1. **Put the individual at the center.** Organize information around the user's task, not the bank's internal structure.
+2. **Use yellow with discipline.** Exact brand recognition is stronger than broad decorative use.
+3. **Make finance readable.** Strong Korean typography and generous rhythm should reduce cognitive load.
+4. **Do not confuse brand with product evidence.** A CI guide cannot authorize native transfer controls.
 
 ## 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.*
+First-party material establishes task contexts only:
+- An individual comparing everyday banking services.
+- A young user or guardian exploring KakaoBank mini.
+- A business owner reviewing business banking options.
+- A visitor seeking official company, ESG, investor, or brand information.
 
-**민지, 28, 서울.** 마케팅 회사 사원. 월급 통장은 KB지만 생활비·이체는 전부 카카오뱅크. 친구 모임 회비는 모임통장으로 받고, 26주적금으로 연말 여행비 모은다. 카카오뱅크를 "은행"이라기보다는 "돈 쓰는 카톡"이라고 생각함 — UI가 채팅처럼 가벼운 게 그녀가 매일 여는 이유. 종이 통장을 본 적이 거의 없다.
-
-**준호, 35, 부산.** 1인 카페 운영. **개인사업자통장** + **부가세박스** 조합으로 매출-경비-부가세를 자동 분류. 매년 부가세 신고 직전 서류 떼러 은행 가는 게 사라진 게 그에게 가장 큰 사건. 신용대출도 비대면으로 받았다 — `사장님 정책자금 대출도 비대면으로 간편하게!`라는 카피가 정확히 그를 지칭한다고 느낌.
-
-**서연, 14, 대전.** 중2. **카카오뱅크 mini** 사용자. 부모님이 만들어준 mini 계정에 용돈이 들어오고, 본인이 mini 카드로 편의점·스타벅스 결제. **mini 내맘대로 저금**으로 굿즈 구입 자금을 모은다. 부모-자녀 공동 가시성이 그녀의 부모님이 mini를 신뢰하는 이유.
-
-**Mr. 김, 52, 인천.** 중소기업 부장. 디지털 친화는 아니지만 코로나 이후 모든 송금을 카카오뱅크로 옮겼다. 큰 금액 이체할 때 인증 단계가 무서워서 일부러 천천히 진행한다. 빨간 경고색 + 명료한 한 줄 카피 (`잔액 5,000만 원 이상 이체는 추가 인증이 필요해요`)가 그가 신뢰의 신호로 받는 정확한 패턴.
+Project-specific names, ages, balances, credit profiles, income, risk tolerance, and success metrics are intentionally unspecified and must come from the product brief.
 
 ## 14. States
 
-| State | Treatment |
-|---|---|
-| **Empty (계좌 없음, 신규 사용자)** | 16px / 600 / `#1E1E1E` `"아직 계좌가 없어요"` + 14px / 400 / `#A3A3A3` `"카카오뱅크 입출금통장을 만들어보세요"` + Yellow Solid CTA `"통장 만들기"`. 일러스트 1개 (Kakao Friends 캐릭터, 80px) 위에 배치 |
-| **Empty (거래 내역 없음)** | 14px / 400 / `#A3A3A3` `"이번 달 거래 내역이 없어요"` 단독. 일러스트 없음. 추천 행동 없음 — 자연히 채워질 테니까 |
-| **Empty (필터 결과 없음)** | 14px / 400 / `#A3A3A3` `"조건에 맞는 거래가 없어요"` + 14px / 600 `#1E1E1E` 텍스트 링크 `"필터 초기화"` |
-| **Loading (계좌 잔액)** | 잔액 자리에 `#F7F7F7` 스켈레톤 박스 (실제 잔액 폭과 동일), 1.2s 시머. 절대 "0원"으로 채우지 않음 — 0원 표시는 잘못된 정보를 암시 |
-| **Loading (이체 진행 중)** | 풀스크린 모달, KakaoBank Yellow 원형 로더 (24px), 아래 16px / 400 / `#A3A3A3` `"이체 중이에요"`. 사용자 입력 차단, 취소 버튼 없음 (이체 트랜잭션은 중단 불가) |
-| **Loading (앱 첫 진입)** | KakaoBank 심볼 (`#FFE300` 배경 위 흰 'B+I'), 화면 중앙. 심볼 단독 등장, 텍스트 없음 |
-| **Error (인라인 입력)** | 입력창 border `#E02000` 1.5px, 헬퍼 텍스트 13px / 400 / `#E02000`. 실행 가능한 한 줄 (`"계좌번호를 다시 확인해주세요"`) |
-| **Error (네트워크)** | 토스트 상단, `#1E1E1E` 배경 흰 텍스트 14px / 400, 4초 자동 dismiss. `"연결이 불안정해요. 잠시 후 다시 시도해주세요."` |
-| **Error (이체 실패 — 잔액 부족)** | 풀스크린, 64px `#E02000` ! 아이콘 → 24px / 700 / `#1E1E1E` `"잔액이 부족해요"` → 16px / 400 / `#A3A3A3` `"필요 금액: 50,000원 / 현재 잔액: 32,000원"` → Yellow Solid CTA `"다른 계좌에서 보내기"` + Outline `"확인"` |
-| **Success (이체 완료)** | 풀스크린 confirmation. 64px `#0FBE6C` 체크 → 24px / 700 / `#1E1E1E` `"이체가 완료되었어요"` → 16px / 400 / `#A3A3A3` 메타 정보 (보낸 금액, 받는 사람, 시각) → Yellow Solid `"확인"` (sticky, 56px). 토스트 아님 — 이체는 expensive 액션이라 dedicated 화면 |
-| **Success (인라인 — 즐겨찾기 추가 등)** | 200ms `#FFE300` 플래시 후 원래 색으로 페이드. 토스트 없음 |
-| **Skeleton (거래 내역)** | 64px row 그대로, 텍스트 영역만 `#F7F7F7` 박스. 아바타 자리도 동일한 12px rounded square skeleton |
-| **Disabled** | 버튼 bg `#F7F7F7`, 텍스트 `#CCCCCC`. 색상 반전 없음. 지오메트리 동일 — re-enable 시 frame-stable |
-| **Loading (긴 작업: 신용 조회)** | 진행률 % + `"약 N분 남음"` 라벨. KakaoBank Yellow progress bar (`#FFE300` 채움, `#F7F7F7` 트랙) |
+Top navigation exposed focus, hover, and pressed states. One current service control exposed a disabled state, but its semantic role was insufficient for promotion. Native loading, empty, transfer success, transfer failure, identity verification, and destructive states remain absent.
 
 ## 15. Motion & Easing
 
-**Durations**:
-
-| Token | Value | Use |
-|---|---|---|
-| `motion-instant` | 0ms | 토글 / 체크박스 즉시 |
-| `motion-fast` | 150ms | 버튼 active, hover, 인라인 success flash |
-| `motion-standard` | 250ms | 모달 / 시트 enter, 카드 탭, 탭 전환 |
-| `motion-success` | 350ms | 이체 성공 / 적금 완료 confirmation 화면 등장 |
-| `motion-page` | 300ms | 네이티브 push/pop |
-
-**Easings**:
-
-| Token | Curve | Use |
-|---|---|---|
-| `ease-enter` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | 시트, 토스트, 화면 push 등장 |
-| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | 모달 dismiss, 토스트 자동 닫기 |
-| `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | 양방향 전환 |
-| `ease-spring-success` | spring (mass 1, stiffness 380, damping 28) | 이체 성공 체크 아이콘 등장 (한정 사용) |
-
-**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 유지.
-
-<!--
-OmD v0.1 Sources — Philosophy Layer (sections 10–15)
-
-Tier 1 — Direct verification (playwright live DOM, 2026-05-08):
-- https://www.kakaobank.com/ — hero "나의 첫 번째 AI 은행" 90px/800, sub-hero "나의 일상 속 유용한 금융 서비스를 만듭니다" 32px/700, body Pretendard Variable, monochrome canvas (`#FFFFFF` / `#F7F7F7` / `#F9F9F9`), top nav 14px/600 #1E1E1E.
-- https://www.kakaobank.com/view/service — display 42px/700, section h2 32px/700, product copy ("어렵고 복잡한 금융생활, 카카오뱅크 AI가 도와드릴게요.", "내 사업장에 맞는 보증서대출을 확인할 수 있어요."), service tab strip (통장/저축/대출/투자/외환/카드/사업자), product names confirmed (AI 서비스, mini, 개인사업자통장, 부가세박스, 슈퍼뱅크, SCBX 프로젝트).
-- https://www.kakaobank.com/view/about/brand/resource — official brand guideline V2.0 page. KakaoBank Yellow `#FFE300` (RGB 255/227/0, PANTONE Yellow 012 C/U), Black `#1E1E1E`, Gray `#A3A3A3`, Light Gray `#CCCCCC`. Symbol meaning ('B' + 'I' = "내가 중심이 되는 은행"). Wordmark follows Kakao 공동체 CI rules. Explicit prohibition: "유사한 다른 값의 노란색을 지정하지 않도록 유의".
-
-Tier 1 — Brand Identity PDF:
-- https://www.kakaobank.com/static/etc/logo/KakaoBank_BrandIdentityGuidelines_V2.0.pdf (referenced; not directly fetched but cross-confirmed via the web brand resource page rendering)
-
-Tier 2 — Press / secondary (WebSearch, 2026-05):
-- https://en.wikipedia.org/wiki/KakaoBank — 2017-07-27 launch, 1M users in 5 days, founding consortium (Kakao Corp + Korea Investment Holdings as lead financial partner — note: the user's task brief mentioned KB Bank as the consortium partner, but Wikipedia and primary press identify Korea Investment Holdings as the lead; this reference uses the verified attribution).
-- https://www.kedglobal.com/ipos/newsView/ked202108060001 — KOSPI IPO 2021-08-06, ₩39,000 IPO price, becoming Korea's most valuable lender by market cap at listing.
-- https://www.koreaherald.com/article/2666383 — IPO bubble/jackpot framing, 56× book value vs. peer 0.44× average.
-- https://koalagains.com/stocks/KOSPI/323410 — FY2020→FY2024 loan book ₩20.7T → ₩44.5T, 4Y revenue CAGR 29.2%, net income CAGR 40.3%, market cap drop 58.7% in 2022.
-- https://matrixbcg.com/blogs/brief-history/kakaobank — 2016-01 "Kakaobank Preparatory Corporation" formation, branchless cost-structure thesis, 23M+ users by Jan 2024.
-
-Tier 2 — Product naming verification (WebSearch, 2026-05):
-- 26주적금: https://www.kakaobank.com/products/26weeks (referenced)
-- 세이프박스: https://www.kakaobank.com/products/safeboxes (referenced)
-- 모임통장 + 모임 체크카드: https://www.kakaobank.com/products/moimcheckcard (referenced)
-- mini: https://m.kakaobank.com/FaqTag;tag=mini (referenced)
-
-Re-verification status:
-- 23M+ users (Jan 2024) is carried from secondary press; numbers may drift; re-verify for public quotes.
-- IPO price ₩39,000 (the upper-band finalization) — initial range was ₩33,000–₩39,000 per KED Global.
-- The "KB Bank consortium" framing in the user task brief is amended to "Kakao Corp + Korea Investment Holdings" per Wikipedia; if KB Bank held a smaller IPO/consortium stake, that detail is not the controlling structure.
-
-Not independently verified:
-- Mobile-app component specs (Yellow Solid Primary CTA, debit card face, success confirmation screen) — these are inferred from the canonical `#FFE300` + Kakao-family 12px-radius pattern + brand guideline V2.0, not directly DOM-inspected. They live in the iOS/Android app, which playwright cannot reach.
-- Voice samples marked `illustrative` are derived patterns from Kakao-family system messaging, not verbatim KakaoBank app strings.
-
-Personas (§13) are fictional archetypes informed by publicly described KakaoBank user segments — Korean digital-native banking users 20s–40s, SMB/사업자 segment, youth/mini segment, late-adopting middle-aged users. Any resemblance to specific individuals is unintended.
-
-Interpretive claims (editorial, not documented KakaoBank statements):
-- "Banking-formal, character-flavored" framing (§12 Principle 3) — editorial reading.
-- The "yellow is product, not chrome" principle (§12 Principle 1) — derived from V2.0 guideline restraint patterns + observation that the corporate site is monochrome, not a documented Kakao rule.
-- "Cards over forms" (§12 Principle 6) — observational from product naming patterns + Kakao parent's flat design heritage.
--->
+No reusable duration or easing curve is promoted. Public interaction capture establishes state presence, not native banking motion behavior.
 
 ---
 
-**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.
+**Verified:** 2026-07-12 (omd:migrate)
+**Tier 1 sources:** https://www.kakaobank.com/ ; https://www.kakaobank.com/view/service ; https://www.kakaobank.com/view/about/brand/resource ; https://www.kakaobank.com/static/etc/logo/KakaoBank_BrandIdentityGuidelines_V2.0.pdf
+**Tier 2 attempts:** getdesign.md/kakaobank returned no design record; Refero had no reliable KakaoBank match
+**Conflicts unresolved:** none