oh-my-design-cli 1.8.6 → 1.9.0

package/web/references/kakao/DESIGN.md

@@ -3,566 +3,378 @@ id: kakao
 name: Kakao
 country: KR
 category: consumer-tech
-homepage: "https://www.kakao.com"
+homepage: "https://www.kakaocorp.com/page/"
 primary_color: "#fee500"
 logo:
   type: simpleicons
   slug: kakaotalk
-verified: "2026-05-15"
+verified: "2026-07-11"
 omd: "0.1"
+ds:
+  name: Kakao Login Design Guide
+  url: "https://developers.kakao.com/docs/latest/ko/kakaologin/design-guide"
+  type: system
+  description: Official Kakao Login button compliance guidance; corporate-site design is tracked as a separate surface.
+verification_v2:
+  schema: 2
+  checked: "2026-07-11"
+  surfaces:
+    - { id: corp-home, kind: marketing, url: "https://www.kakaocorp.com/page/", inspected: "2026-07-11" }
+    - { id: corp-culture, kind: marketing, url: "https://www.kakaocorp.com/page/about/culture", inspected: "2026-07-11" }
+    - { id: corp-milestones, kind: marketing, url: "https://www.kakaocorp.com/page/about/milestones", inspected: "2026-07-11" }
+    - { id: login-guide, kind: design-system, url: "https://developers.kakao.com/docs/ko/kakaologin/design-guide", inspected: "2026-07-11" }
+  sources:
+    - { id: corp-home-live, kind: product-surface, url: "https://www.kakaocorp.com/page/", captured: "2026-07-11" }
+    - { id: corp-culture-live, kind: product-surface, url: "https://www.kakaocorp.com/page/about/culture", captured: "2026-07-11" }
+    - { id: corp-milestones-live, kind: product-surface, url: "https://www.kakaocorp.com/page/about/milestones", captured: "2026-07-11" }
+    - { id: login-guide-live, kind: official-doc, url: "https://developers.kakao.com/docs/ko/kakaologin/design-guide", captured: "2026-07-11" }
+  claims:
+    "tokens.colors.login": &login_doc { surface_id: login-guide, source_id: login-guide-live, method: official-doc-rendered-text, captured: "2026-07-11" }
+    "tokens.colors.login-symbol": *login_doc
+    "tokens.colors.login-label": *login_doc
+    "tokens.colors.marketing": &corp_live { surface_id: corp-home, source_id: corp-home-live, method: computed-style, captured: "2026-07-11" }
+    "tokens.colors.dark-marketing": *corp_live
+    "tokens.colors.canvas": *corp_live
+    "tokens.colors.foreground": *corp_live
+    "tokens.colors.on-dark": *corp_live
+    "tokens.colors.muted": &milestones_live { surface_id: corp-milestones, source_id: corp-milestones-live, method: computed-style, captured: "2026-07-11" }
+    "tokens.colors.surface": *milestones_live
+    "tokens.colors.border": &culture_live { surface_id: corp-culture, source_id: corp-culture-live, method: computed-style, captured: "2026-07-11" }
+    "tokens.typography.family.display": *corp_live
+    "tokens.typography.family.text": *corp_live
+    "tokens.typography.family.login": *login_doc
+    "tokens.typography.display.size": *corp_live
+    "tokens.typography.display.weight": *corp_live
+    "tokens.typography.display.lineHeight": *corp_live
+    "tokens.typography.display.tracking": *corp_live
+    "tokens.typography.heading.size": *corp_live
+    "tokens.typography.heading.weight": *corp_live
+    "tokens.typography.heading.lineHeight": *corp_live
+    "tokens.typography.title.size": *corp_live
+    "tokens.typography.title.weight": *corp_live
+    "tokens.typography.title.lineHeight": *corp_live
+    "tokens.typography.nav.size": *corp_live
+    "tokens.typography.nav.weight": *corp_live
+    "tokens.typography.nav.lineHeight": *corp_live
+    "tokens.typography.body.size": *corp_live
+    "tokens.typography.body.weight": *corp_live
+    "tokens.typography.body.lineHeight": *corp_live
+    "tokens.typography.body-readable.size": *corp_live
+    "tokens.typography.body-readable.weight": *corp_live
+    "tokens.typography.body-readable.lineHeight": *corp_live
+    "tokens.typography.body-readable.tracking": *corp_live
+    "tokens.typography.caption.size": *corp_live
+    "tokens.typography.caption.weight": *corp_live
+    "tokens.typography.caption.lineHeight": *corp_live
+    "tokens.typography.caption.tracking": *corp_live
+    "tokens.typography.login-label.size": *login_doc
+    "tokens.spacing.xs": *corp_live
+    "tokens.spacing.sm": *corp_live
+    "tokens.spacing.md": *corp_live
+    "tokens.spacing.lg": *corp_live
+    "tokens.spacing.xl": *corp_live
+    "tokens.rounded.login": *login_doc
+    "tokens.rounded.marketing": *corp_live
+    "tokens.rounded.search": *corp_live
+    "tokens.rounded.footer": *milestones_live
+    "tokens.rounded.filter": *milestones_live
+    "tokens.rounded.full": *corp_live
+    "tokens.components.kakao-login.type": *login_doc
+    "tokens.components.kakao-login.bg": *login_doc
+    "tokens.components.kakao-login.fg": *login_doc
+    "tokens.components.kakao-login.radius": *login_doc
+    "tokens.components.kakao-login.font": *login_doc
+    "tokens.components.kakao-login.states": *login_doc
+    "tokens.components.kakao-login.use": *login_doc
+    "tokens.components.corporate-nav.type": *corp_live
+    "tokens.components.corporate-nav.bg": *corp_live
+    "tokens.components.corporate-nav.fg": *corp_live
+    "tokens.components.corporate-nav.radius": *corp_live
+    "tokens.components.corporate-nav.padding": *corp_live
+    "tokens.components.corporate-nav.height": *corp_live
+    "tokens.components.corporate-nav.font": *corp_live
+    "tokens.components.corporate-nav.states": *corp_live
+    "tokens.components.corporate-nav.use": *corp_live
+    "tokens.components.search-control.type": *corp_live
+    "tokens.components.search-control.bg": *corp_live
+    "tokens.components.search-control.fg": *corp_live
+    "tokens.components.search-control.radius": *corp_live
+    "tokens.components.search-control.height": *corp_live
+    "tokens.components.search-control.font": *corp_live
+    "tokens.components.search-control.states": *corp_live
+    "tokens.components.search-control.use": *corp_live
+    "tokens.components.dark-marketing-tag.type": *corp_live
+    "tokens.components.dark-marketing-tag.bg": *corp_live
+    "tokens.components.dark-marketing-tag.fg": *corp_live
+    "tokens.components.dark-marketing-tag.border": *corp_live
+    "tokens.components.dark-marketing-tag.radius": *corp_live
+    "tokens.components.dark-marketing-tag.padding": *corp_live
+    "tokens.components.dark-marketing-tag.height": *corp_live
+    "tokens.components.dark-marketing-tag.font": *corp_live
+    "tokens.components.dark-marketing-tag.states": *corp_live
+    "tokens.components.dark-marketing-tag.use": *corp_live
+    "tokens.components.milestone-filter.type": *milestones_live
+    "tokens.components.milestone-filter.bg": *milestones_live
+    "tokens.components.milestone-filter.fg": *milestones_live
+    "tokens.components.milestone-filter.radius": *milestones_live
+    "tokens.components.milestone-filter.padding": *milestones_live
+    "tokens.components.milestone-filter.height": *milestones_live
+    "tokens.components.milestone-filter.font": *milestones_live
+    "tokens.components.milestone-filter.states": *milestones_live
+    "tokens.components.milestone-filter.use": *milestones_live
+    "tokens.components.footer-pill.type": *milestones_live
+    "tokens.components.footer-pill.bg": *milestones_live
+    "tokens.components.footer-pill.fg": *milestones_live
+    "tokens.components.footer-pill.radius": *milestones_live
+    "tokens.components.footer-pill.padding": *milestones_live
+    "tokens.components.footer-pill.height": *milestones_live
+    "tokens.components.footer-pill.font": *milestones_live
+    "tokens.components.footer-pill.states": *milestones_live
+    "tokens.components.footer-pill.use": *milestones_live
+  conflicts: []
 tokens:
-  source: prose-derived
-  extracted: "2026-06-09"
-  components_harvested: true
+  source: reconciled
+  extracted: "2026-07-11"
+  note: "Kakao Login compliance, Kakao corporate marketing, and Kakao Developers documentation chrome are separate evidence domains."
   colors:
-    primary: "#fee500"
-    marketing-yellow: "#fae100"
-    unread: "#faeb00"
-    base: "#1e1e1e"
+    login: "#fee500"
+    login-symbol: "#000000"
+    login-label: "#000000"
+    marketing: "#fae100"
+    dark-marketing: "#111111"
     canvas: "#ffffff"
-    error: "#e02000"
-    link: "#2196f3"
-    success: "#47b881"
-    warning: "#ff9800"
-    text-primary: "#222222"
-    text-standard: "#333333"
-    text-secondary: "#666666"
-    text-muted: "#808080"
-    text-light: "#999999"
-    text-lightest: "#bbbbbb"
-    surface-elevated: "#f8f8f8"
-    surface-fill: "#f0f0f0"
-    border: "#e5e5e5"
-    footer-fill: "#eeeeee"
-    dark-pill: "#111111"
-    on-primary: "#000000"
+    foreground: "#333333"
+    on-dark: "#ffffff"
+    muted: "#888888"
+    surface: "#eeeeee"
+    border: "#dbdbdb"
   typography:
-    family: { sans: "-apple-system", mono: "SF Mono" }
-    display-hero:  { size: 36, weight: 800, lineHeight: 1.25, use: "Splash screens, marketing — Kakao Big Sans" }
-    display-large: { size: 28, weight: 700, lineHeight: 1.30, use: "Service section titles — Kakao Big Sans" }
-    heading-large: { size: 22, weight: 700, lineHeight: 1.36, use: "Screen titles, major sections" }
-    heading:       { size: 20, weight: 600, lineHeight: 1.40, use: "Navigation titles, modal headers" }
-    title:         { size: 18, weight: 600, lineHeight: 1.44, use: "Friend names, chat room titles" }
-    body:          { size: 16, weight: 400, lineHeight: 1.50, use: "Chat messages, descriptions" }
-    body-small:    { size: 14, weight: 400, lineHeight: 1.57, use: "Secondary info, metadata" }
-    caption:       { size: 13, weight: 400, lineHeight: 1.54, use: "Timestamps, status text" }
-    caption-small: { size: 12, weight: 400, lineHeight: 1.50, use: "Fine print, badges" }
-    micro:         { size: 11, weight: 400, lineHeight: 1.45, use: "Tab bar text, smallest labels" }
-  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 24, xxl: 32, section: 48 }
-  rounded: { sm: 4, md: 12, lg: 20, full: 9999 }
-  shadow:
-    minimal: "0px 1px 3px rgba(0,0,0,0.04)"
-    subtle: "0px 2px 6px rgba(0,0,0,0.08)"
-    elevated: "0px 4px 12px rgba(0,0,0,0.12)"
+    family: { display: "KakaoBig", text: "KakaoSmall", login: "System" }
+    display: { size: 53.82, weight: 700, lineHeight: "66px", tracking: "-1px" }
+    heading: { size: 30, weight: 700, lineHeight: "40px" }
+    title: { size: 28, weight: 700, lineHeight: "42px" }
+    nav: { size: 17, weight: 400, lineHeight: "27px" }
+    body: { size: 14, weight: 400, lineHeight: "21px" }
+    body-readable: { size: 14, weight: 400, lineHeight: "24.92px", tracking: "-0.2px" }
+    caption: { size: 12, weight: 400, lineHeight: "18px", tracking: "-0.2px" }
+    login-label: { size: "30Pt" }
+  spacing: { xs: 4, sm: 6, md: 8, lg: 16, xl: 20 }
+  rounded: { login: 12, marketing: 16, search: 18, footer: 24, filter: 30, full: 999 }
+  components_harvested: true
   components:
-    button-login: { type: button, bg: "#fee500", fg: "#000000", radius: 12, padding: "12px 20px", font: "16px/600", use: "Kakao Login compliance-mandated CTA" }
-    button-marketing-pill: { type: button, bg: "#fae100", fg: "#000000", radius: 16, padding: "7px 13px", font: "13px/700", use: "Brand marketing CTA, bordered yellow pill" }
-    button-dark-pill: { type: button, bg: "#111111", fg: "#ffffff", radius: 16, padding: "7px 8px", font: "13px/700", use: "Marketing CTA paired with yellow pill" }
-    button-nav-pill: { type: button, bg: "#ffffff", fg: "#000000", radius: 9999, padding: "3px 14px", font: "16px/700", use: "Top-nav active item" }
-    button-secondary: { type: button, bg: "transparent", fg: "#333333", radius: 12, padding: "12px 20px", font: "16px/600", use: "Secondary outline action" }
-    button-footer-pill: { type: button, bg: "#eeeeee", fg: "#000000", radius: 24, padding: "10px 20px", font: "12px/400", use: "Footer link pill" }
-    button-danger: { type: button, bg: "#e02000", fg: "#ffffff", radius: 12, padding: "12px 20px", font: "16px/600", use: "Destructive actions" }
-    input-default: { type: input, bg: "#ffffff", fg: "#222222", radius: 12, padding: "12px 16px", font: "16px/400", use: "Form fields" }
-    input-chat: { type: input, bg: "#f0f0f0", fg: "#222222", radius: 20, padding: "10px 16px", font: "16px/400", use: "Chat composer" }
-    input-search: { type: input, bg: "#f0f0f0", fg: "#222222", radius: 20, padding: "10px 16px 10px 40px", font: "14px/400", use: "Search bar" }
-    card-standard: { type: card, bg: "#ffffff", radius: 12, padding: "16px", use: "Most surfaces — barely-there shadow" }
-    card-bordered: { type: card, bg: "#ffffff", radius: 12, padding: "16px", use: "Inline content cards, 1px border" }
-    bubble-mine: { type: card, bg: "#fee500", fg: "#333333", radius: 18, padding: "8px 12px", font: "14px/400", use: "Outgoing chat bubble, asymmetric 9-patch" }
-    bubble-other: { type: card, bg: "#ffffff", fg: "#333333", radius: 18, padding: "8px 12px", font: "14px/400", use: "Incoming chat bubble" }
-    bubble-system: { type: card, bg: "#f0f0f0", fg: "#999999", radius: 9999, padding: "4px 12px", font: "12px/400", use: "System notice in chat" }
-    badge-notification: { type: badge, bg: "#e02000", fg: "#ffffff", radius: 9999, padding: "2px 6px", font: "11px/700", use: "Unread count" }
-    badge-tag: { type: badge, bg: "#f0f0f0", fg: "#666666", radius: 4, padding: "2px 6px", font: "11px/500", use: "Generic metadata tag" }
-    tab-top: { type: tab, bg: "#ffffff", fg: "#999999", padding: "12px 16px", font: "14px/600", active: "#333333 text + 2px bottom border #333333", use: "Top tab bar" }
-    listItem-friend: { type: listItem, fg: "#222222", padding: "0 16px", use: "Friend list row, 64px height, 48px rounded-square avatar" }
+    kakao-login: { type: button, bg: "#fee500", fg: "rgba(0, 0, 0, 0.85)", radius: "12px", font: "30Pt / OS system", states: "full label or shortened label; hover, pressed, and disabled visuals are not specified by this guide", use: "Kakao Login only; preserve black speech-bubble symbol and mandated colors" }
+    corporate-nav: { type: button, bg: "#ffffff", fg: "#000000", radius: "999px", padding: "4px 16px 6px", height: "37px", font: "17px / 400 / KakaoBig", states: "light and dark theme variants; focus and hover observed", use: "top-level corporate menu trigger" }
+    search-control: { type: button, bg: "transparent", fg: "#333333", radius: "18px", height: "36px", font: "14px / 400 / KakaoSmall", states: "default and hover observed", use: "corporate-site circular search control" }
+    dark-marketing-tag: { type: badge, bg: "#111111", fg: "#ffffff", border: "2px solid #ffffff", radius: "16px", padding: "7px 8px 8px", height: "32px", font: "13px / 700 / KakaoSmall", states: "default captured", use: "dark corporate marketing tag/CTA label" }
+    milestone-filter: { type: button, bg: "#eeeeee", fg: "#000000", radius: "30px", padding: "8px 20px 12px", height: "44px", font: "16px / 700 / KakaoBig", states: "selected filter captured", use: "milestone category filter" }
+    footer-pill: { type: button, bg: "#eeeeee", fg: "#000000", radius: "24px", padding: "10px 20px 12px", height: "40px", font: "12px / 400 / KakaoSmall", states: "default captured; hover not retained", use: "corporate footer related-site pill" }
 ---
 
 # Design System Inspiration of Kakao (카카오)
 
 ## 1. Visual Theme & Atmosphere
 
-Kakao is the connective tissue of Korean digital life -- KakaoTalk is on virtually every smartphone in the country, and the iconic yellow is as recognizable as any global tech brand's signature. The interface presents a clean, functional canvas where conversations take center stage, accented by that unmistakable Kakao Yellow (`#FEE500`) that radiates warmth and friendliness. This isn't the cautious, muted yellow of enterprise warnings; it's full-saturation sunshine that feels like a friend's smile.
-
-The design philosophy is "모든 연결의 시작" (The Beginning of All Connections). Every decision serves communication -- the interface should be invisible enough that conversations flow naturally, yet distinctive enough that users feel at home. KakaoTalk's chat bubbles are the defining UI element: warm yellow for your messages, clean white for others', creating an instantly legible visual language that has become the standard mental model for messaging in Korea.
+Kakao is a mobile-life platform whose identity is built around making communication and everyday services feel immediately approachable. Yellow, speech-bubble symbolism, friendly proprietary type, and compact Korean language create recognition before a person reads a product name. That familiarity spans many services, but it is not one transferable UI kit: the corporate site uses KakaoBig and KakaoSmall with black, white, and marketing yellow; Kakao Login is a regulated integration component; and Kakao Developers uses Pretendard only for documentation chrome. Correct reuse begins by naming the surface and relationship being designed.
 
-Typography is deliberately neutral -- system fonts (San Francisco on iOS, Roboto on Android) so messages feel personal, not branded. When personality is needed, the custom **Kakao Font** steps in: Big Sans for confident headlines, Small Sans for legible small-screen details. The overall aesthetic is flat, warm, and content-forward. Minimal shadows, minimal gradients, strong color coding through yellow and clean neutrals.
+The clean-slate rule is therefore surface identity first: name whether a value belongs to corporate marketing, the official login integration, or documentation chrome before reusing it.
 
 **Key Characteristics:**
-- Kakao Yellow (`#FEE500`) as the singular brand accent -- pure sunshine
-- System font stack for conversations -- messages feel personal, not designed
-- Kakao Font (Big Sans + Small Sans) for brand display moments (OFL open-source)
-- Chat bubble-centric UI: yellow for self, white for others -- the defining pattern
-- Flat design with minimal shadow -- depth through background color layering, not elevation
-- Near-black (`#1E1E1E`) brand base instead of pure black -- subtle warmth
-- 12px border-radius as the universal standard for interactive elements
-- 9-patch chat bubble system for pixel-perfect messaging UI
+- Corporate fonts: KakaoSmall 133 visible uses; KakaoBig 49
+- Developers docs font: Pretendard 1,339 visible uses, documentation chrome only
+- Login compliance: `#fee500`, black symbol, black 85% label, 12px radius, OS system font at 30Pt
+- Corporate marketing yellow `#fae100` remains distinct from login yellow
 
 ## 2. Color Palette & Roles
 
-### Primary
-- **Kakao Yellow** (`#FEE500`): Primary brand color, login button, send button, CTA accent. Compliance-mandated for Kakao Login. The iconic color.
-- **Near Black** (`#1E1E1E`): Brand base color (Pantone 433 C). Wordmark, symbol, primary text in corporate contexts.
-- **Pure White** (`#ffffff`): Chat background, card surfaces, other-person chat bubbles.
-
-### Chat-Specific
-- **My Bubble** (`#FEE500`): Yellow -- your messages are sunshine.
-- **Other's Bubble** (`#ffffff`): Clean white with subtle `#E5E5E5` border.
-- **System Message** (`#F0F0F0`): Date dividers, join/leave notices.
-- **Unread Count** (`#FAEB00`): Yellow text on unread badge -- draws attention.
-
-### Semantic
-- **Error Red** (`#E02000`): Error messages, destructive actions, critical alerts.
-- **Link Blue** (`#2196F3`): Hyperlinks within chat and content.
-- **Success Green** (`#47B881`): Completion states, verified status.
-- **Warning Orange** (`#FF9800`): Attention-needed states.
-
-### Neutral Scale
-- **Text Primary** (`#222222`): Friend names, chat titles, strong labels.
-- **Text Standard** (`#333333`): Chat messages, body text, action bar titles. The workhorse.
-- **Text Secondary** (`#666666`): Secondary labels, descriptions.
-- **Text Muted** (`#808080`): Status messages, placeholder-level text.
-- **Text Light** (`#999999`): Captions, timestamps, system messages.
-- **Text Lightest** (`#BBBBBB`): Disabled text, hint text.
-
-### Surface & Borders
-- **Surface Elevated** (`#F8F8F8`): Subtle elevation through background shift.
-- **Surface Fill** (`#F0F0F0`): Secondary surfaces, search bars, disabled fields.
-- **Border Default** (`#E5E5E5`): Standard borders, dividers, input outlines.
-- **Border Subtle** (`#F0F0F0`): Lightest borders, subtle separation.
-- **Overlay** (`rgba(0,0,0,0.4)`): Modal backdrops -- lighter than most systems, keeping context visible.
+### Kakao Login compliance
+- **Container** (`#fee500`): mandatory login-button background.
+- **Symbol** (`#000000`): mandatory speech-bubble symbol color.
+- **Label** (`rgba(0, 0, 0, 0.85)`): mandatory 85% black label.
 
-## 3. Typography Rules
+The official guide explicitly says colors outside this regulation must not be applied and that another third-party login button must not be emphasized by omitting Kakao's button color.
 
-### Font Family
-- **UI Primary**: `-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", Roboto, "Noto Sans KR", "Malgun Gothic", sans-serif`
-- **Monospace**: `"SF Mono", SFMono-Regular, Menlo, Consolas, monospace`
-- **Brand Display**: `"Kakao Big Sans"` -- confident headlines, promotional banners
-- **Brand Body**: `"Kakao Small Sans"` -- legible small-screen brand text
-
-Kakao Font is open-source (OFL-1.1) on GitHub. Big Sans has Regular/Bold/ExtraBold weights, Small Sans has Light/Regular/Bold. Both support full Hangul (11,172 characters).
-
-### Hierarchy
-
-| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
-|------|------|------|--------|-------------|----------------|-------|
-| Display Hero | Kakao Big Sans | 36px | 800 | 1.25 | normal | Splash screens, marketing |
-| Display Large | Kakao Big Sans | 28px | 700 | 1.30 | normal | Service section titles |
-| Heading Large | System | 22px | 700 | 1.36 | normal | Screen titles, major sections |
-| Heading | System | 20px | 600 | 1.40 | normal | Navigation titles, modal headers |
-| Title | System | 18px | 600 | 1.44 | normal | Friend names, chat room titles |
-| Body | System | 16px | 400 | 1.50 | normal | Chat messages, descriptions |
-| Body Small | System | 14px | 400 | 1.57 | normal | Secondary info, metadata |
-| Caption | System | 13px | 400 | 1.54 | normal | Timestamps, status text |
-| Caption Small | System | 12px | 400 | 1.50 | normal | Fine print, badges |
-| Micro | System | 11px | 400 | 1.45 | normal | Tab bar text, smallest labels |
-
-### Principles
-- **System fonts for trust**: Custom fonts would make conversations feel "designed" rather than personal. Messages should feel like YOUR messages.
-- **Kakao Font for brand**: When the brand speaks (promotions, onboarding, empty states), Big Sans adds personality. When users speak, the system font stays neutral.
-- **Weight restraint**: Most UI uses 400-500 weight. Bold (700) only for names, titles, amounts. Chat-heavy apps need typographic calm, not emphasis competition.
+### Corporate marketing
+- **Marketing Yellow** (`#fae100`): current corporate-home marketing accent.
+- **Dark Marketing** (`#111111`): current paired dark tag/CTA background.
+- **Canvas** (`#ffffff`): dominant public-site background.
+- **Foreground** (`#333333`): primary corporate text/control color.
+- **On Dark** (`#ffffff`): content on black/dark surfaces.
+- **Muted** (`#888888`): milestone metadata.
+- **Surface** (`#eeeeee`): current filter/footer-pill fill.
+- **Border** (`#dbdbdb`): captured culture-page circular-control border.
 
-## 4. Component Stylings
+## 3. Typography Rules
 
-### Buttons
+### Verified families
+- **KakaoBig**: loaded/high; 49 visible uses; display, navigation, card, and heading roles.
+- **KakaoSmall**: loaded/high; 133 visible uses; body, input, button, badge, and heading roles.
+- **System**: required by the Kakao Login design guide for the 30Pt label.
+- **Pretendard**: 1,339 visible uses on the Kakao Developers documentation website. It is documentation chrome, not the Kakao Login label font.
+- **KakaoDigitLatin**: declared but 0 visible uses; not promoted.
+
+| Role | Family | Size | Weight | Line Height | Tracking |
+|---|---|---:|---:|---:|---:|
+| Corporate Display | KakaoBig | 53.82px | 700 | 66px | -1px |
+| Corporate Heading | KakaoBig | 30px | 700 | 40px | normal |
+| Corporate Title | KakaoSmall | 28px | 700 | 42px | normal |
+| Navigation | KakaoBig | 17px | 400 | 27px | normal |
+| Body | KakaoSmall | 14px | 400 | 21px | normal |
+| Readable Body | KakaoSmall | 14px | 400 | 24.92px | -0.2px |
+| Caption | KakaoSmall | 12px | 400 | 18px | -0.2px |
+| Kakao Login Label | OS system | 30Pt | guide does not specify | proportional | unchanged |
+
+| Evidence class | Kakao status |
+|---|---|
+| **Official product-use** | The Kakao Login guide mandates OS system type for its label; KakaoBig/KakaoSmall are the official corporate families |
+| **Live surface-use** | KakaoBig and KakaoSmall are loaded on corporate surfaces; Pretendard is loaded on developer-documentation chrome |
+| **Official distributed asset** | No general redistribution right for KakaoBig/KakaoSmall is asserted by the current official sources |
+| **Declared-only** | KakaoDigitLatin is declared but had zero visible first-family uses in the inspected surfaces |
+| **Unresolved** | A universal KakaoTalk/native-service family mapping beyond the exact official surfaces documented here |
 
-Kakao surfaces use two yellows: `#FEE500` for the Kakao Login compliance button (mandated by Kakao Developers) and `#fae100` for marketing CTAs (verified at kakaocorp.com). Bordered (2px solid black) buttons are a distinctive Kakao marketing pattern.
+## 4. Component Stylings
 
-**Kakao Login (Compliance-Mandated)**
-- Background: `#FEE500`
-- Text: `#000000`
-- Border: none
+### Kakao Login Button
+- Background: `#fee500`
+- Symbol: `#000000`, mandatory Kakao speech bubble; shape, proportion, and color cannot change
+- Label: `rgba(0, 0, 0, 0.85)`
 - Radius: 12px
-- Padding: 12px 20px
-- Font: 16px / 600 / KakaoSmall
-- Disabled: opacity 0.5
-- Use: Kakao Login integration — specs are non-negotiable per Kakao Developers (do not modify color, text, or icon)
+- Font: 30Pt OS default system font
+- Labels: `카카오 로그인` / `Login with Kakao`, or shortened `로그인` / `Login`
+- States: full or shortened label; hover, pressed, and disabled visuals are not specified by this guide
+- Use: login integration only; preserve symbol/label area when resizing
+
+### Corporate Navigation Menu
+- Background: `#ffffff` in light mode; `#000000` on captured dark subpages
+- Text: `#000000` in light mode; `#ffffff` in dark mode
+- Radius: 999px
+- Padding: 4px 16px 6px
+- Height: 37px
+- Font: 17px / 400 / KakaoBig
+- States: light/dark themes, focus, hover
 
-**Marketing Pill (Bordered)**
-- Background: `#fae100`
-- Text: `#000000`
-- Border: 2px solid `#000000`
-- Radius: 16px
-- Padding: 7px 13px
-- Font: 13px / 700 / KakaoSmall
-- Use: Brand marketing CTA on kakaocorp.com (카카오톡 다운로드) — bordered yellow pill is the signature shape
+### Corporate Search Control
+- Background: transparent
+- Text/Icon: `#333333`
+- Radius: 18px
+- Height: 36px
+- Font context: 14px / 400 / KakaoSmall
+- States: default and hover observed
 
-**Dark Marketing Pill (Bordered)**
+### Dark Marketing Tag
 - Background: `#111111`
 - Text: `#ffffff`
 - Border: 2px solid `#ffffff`
 - Radius: 16px
-- Padding: 7px 8px
+- Padding: 7px 8px 8px
+- Height: 32px
 - Font: 13px / 700 / KakaoSmall
-- Use: Marketing CTA paired with the yellow Marketing Pill (Kanana, sub-brands)
 
-**Nav Pill**
-- Background: `#ffffff`
+### Milestone Filter
+- Background: `#eeeeee`
 - Text: `#000000`
-- Border: none
-- Radius: 999px
-- Padding: 3px 14px
+- Radius: 30px
+- Padding: 8px 20px 12px
+- Height: 44px
 - Font: 16px / 700 / KakaoBig
-- Use: Top-nav active item (소개, 카카오 문화) — full-pill rounded, KakaoBig display weight
+- States: selected filter captured
 
-**Secondary (Outline)**
-- Background: transparent
-- Text: `#333333`
-- Border: 1px solid `#E5E5E5`
-- Radius: 12px
-- Padding: 12px 20px
-- Font: 16px / 600 / KakaoSmall
-- Use: Secondary action in product UI (취소, 더보기)
-
-**Footer Link Pill**
+### Footer Related-Site Pill
 - Background: `#eeeeee`
 - Text: `#000000`
-- Border: none
 - Radius: 24px
-- Padding: 10px 20px
+- Padding: 10px 20px 12px
+- Height: 40px
 - Font: 12px / 400 / KakaoSmall
-- Use: Footer link/관련사이트 (verified at kakaocorp.com)
-
-**Danger**
-- Background: `#E02000`
-- Text: `#ffffff`
-- Border: none
-- Radius: 12px
-- Padding: 12px 20px
-- Font: 16px / 600 / KakaoSmall
-- Use: Destructive actions (삭제, 차단)
-
-### Inputs
-
-**Default**
-- Background: `#ffffff`
-- Text: `#222222`
-- Border: 1px solid `#E5E5E5`
-- Radius: 12px
-- Padding: 12px 16px
-- Font: 16px / 400 / Apple SD Gothic Neo
-- Placeholder: `#BBBBBB`
-- Focus: border changes to `#333333`
-- Use: Form fields (login, profile edit, signup)
-
-**Chat Input**
-- Background: `#F0F0F0`
-- Text: `#222222`
-- Border: none
-- Radius: 20px
-- Padding: 10px 16px
-- Font: 16px / 400 / Apple SD Gothic Neo
-- Placeholder: `#BBBBBB`
-- Use: Chat composer at bottom of conversation
-
-**Search**
-- Background: `#F0F0F0`
-- Text: `#222222`
-- Border: none
-- Radius: 20px
-- Padding: 10px 16px 10px 40px
-- Font: 14px / 400 / Apple SD Gothic Neo
-- Placeholder: `#999999`
-- Use: Search bar (friends, chat history) — left-icon at `#999999`
-
-### Cards
-
-**Standard**
-- Background: `#ffffff`
-- Border: none
-- Radius: 12px
-- Padding: 16px
-- Shadow: `0px 1px 3px rgba(0,0,0,0.04)`
-- Use: Most surfaces — Kakao is intentionally flat, shadows are barely-there
-
-**Bordered**
-- Background: `#ffffff`
-- Border: 1px solid `#E5E5E5`
-- Radius: 12px
-- Padding: 16px
-- Shadow: none
-- Use: Inline cards on content surfaces where shadow would clash
-
-**My Message (Chat Bubble)**
-- Background: `#FEE500`
-- Text: `#333333`
-- Border: none
-- Radius: 18px 4px 18px 18px
-- Padding: 8px 12px
-- Font: 14px / 400 / Apple SD Gothic Neo
-- Use: Sender's outgoing chat bubble (right-aligned) — asymmetric 9-patch radius
-
-**Other's Message (Chat Bubble)**
-- Background: `#ffffff`
-- Text: `#333333`
-- Border: 1px solid `#E5E5E5`
-- Radius: 4px 18px 18px 18px
-- Padding: 8px 12px
-- Font: 14px / 400 / Apple SD Gothic Neo
-- Use: Counterparty's incoming chat bubble (left-aligned)
-
-**System Message (Chat Bubble)**
-- Background: `#F0F0F0`
-- Text: `#999999`
-- Border: none
-- Radius: 9999px
-- Padding: 4px 12px
-- Font: 12px / 400 / Apple SD Gothic Neo
-- Use: System notice in chat ("친구가 입장했습니다")
-
-### Badges
-
-**Notification Dot**
-- Background: `#E02000`
-- Text: `#ffffff`
-- Border: none
-- Radius: 9999px
-- Padding: 2px 6px
-- Font: 11px / 700 / Apple SD Gothic Neo
-- Use: Unread count on tab/list (caps to "99+" past 99)
-
-**Tag (Default)**
-- Background: `#F0F0F0`
-- Text: `#666666`
-- Border: none
-- Radius: 4px
-- Padding: 2px 6px
-- Font: 11px / 500 / Apple SD Gothic Neo
-- Use: Generic metadata tag (channel/category)
-
-### Tabs
-
-**Top Tab**
-- Background: `#ffffff`
-- Text: `#999999`
-- Border: 1px solid `#E5E5E5`
-- Active: `#333333` text + 2px solid `#333333` bottom border
-- Padding: 12px 16px
-- Font: 14px / 600 / Apple SD Gothic Neo
-- Use: Tab bar — 4 equal tabs, 44px height
-
-### List items
-
-**Friend List Item**
-- Text: `#222222`
-- Use: Friend list row — avatar 48px rounded square (12px radius — KakaoTalk uses rounded squares, not circles), name 16px weight 500 `#222222`, status 14px weight 400 `#808080` single-line ellipsis. Row height 64px, horizontal padding 16px.
+- States: default captured; hover not retained
 
 ---
 
-**Verified:** 2026-05-08
-**Tier 1 sources:** kakaocorp.com (live DOM via playwright — Marketing Pill `#FAE100` / `#000000` / 16px / 7×13/30 / 13px·700·32px ✓; Dark Marketing Pill `#111111` 16px ✓; Nav Pill `#ffffff` / `#000000` / 999px / 3×14 / 16px·700·36px ✓; Footer Link Pill `#eeeeee` / 24px / 12px·400·40px ✓; KakaoTalk compliance Login button `#FEE500` retained per Kakao Developers requirement)
-**Tier 2 sources:** styles.refero.design — no record (?q=Kakao returns 0 brand match). getdesign.md/kakao — no record.
-**Tier 2b status:** unavailable; Tier 1 (kakaocorp.com live inspect) treated as authoritative.
-**Conflicts unresolved:** none. The dual-yellow split (`#FEE500` compliance vs `#FAE100` marketing) is verified against both Kakao Developers docs and the live kakaocorp.com DOM.
+**Verified:** 2026-07-11 (verification v2, current corporate surfaces + rendered official Login guide)
+**Tier 1 sources:** https://www.kakaocorp.com/page/ https://www.kakaocorp.com/page/about/culture https://www.kakaocorp.com/page/about/milestones https://developers.kakao.com/docs/ko/kakaologin/design-guide
+**Tier 2 sources:** https://getdesign.md/kakao and https://styles.refero.design/?q=Kakao did not provide importable current Kakao records in this run.
+**Surface split:** corporate marketing uses KakaoBig/KakaoSmall; the Login component requires OS system type; Developers docs chrome uses Pretendard.
+**Conflicts unresolved:** none
 
 ## 5. Layout Principles
 
-### Spacing System
-- Base unit: 8px
-- Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px
-- Horizontal screen padding: 16px
-- Chat message gap (same sender): 4px, (different sender): 16px
-- List item vertical padding: 12px
-
-### Grid & Container
-- Mobile: full-width, 16px horizontal padding
-- Chat messages: left-aligned (others) or right-aligned (self) with 16px margins
-- Friend list: single-column, full-width items
-- Grid menu (More tab): 3-4 column icon grid
-
-### Whitespace Philosophy
-- **Conversation-optimized**: Message bubbles are compact but well-separated between senders. Maximize visible messages while maintaining clear attribution.
-- **List efficiency**: Friend/chat lists prioritize density -- 64px rows show avatar + name + status in a scannable format.
-- **Flat layering**: Instead of shadows, Kakao uses background color shifts (`#ffffff` → `#F0F0F0` → `#E5E5E5`) for visual hierarchy. Lightweight, fast-rendering.
-
-### Border Radius Scale
-- Standard (12px): Buttons, cards, avatars (rounded square), inputs, login button
-- Rounded (20px): Search bars, rounded containers
-- Pill (9999px): System message bubbles, notification badges
-- Chat bubble: asymmetric via 9-patch assets
+- Corporate content uses a compact 4/6/8/16/20 spacing rhythm around controls and text.
+- The Login guide requires the symbol and label zones to remain intact when widening the container; expand left and right equally.
+- When scaling the whole Login button, preserve symbol/label proportions and keep the label height at no more than one third of the container height.
 
 ## 6. Depth & Elevation
 
-| Level | Treatment | Use |
-|-------|-----------|-----|
-| Flat (Level 0) | No shadow | Primary — most elements. Chat bubbles, list items, cards |
-| Minimal (Level 1) | `0px 1px 3px rgba(0,0,0,0.04)` | Rare — floating action button, keyboard toolbar |
-| Subtle (Level 2) | `0px 2px 6px rgba(0,0,0,0.08)` | Popovers, dropdown menus |
-| Elevated (Level 3) | `0px 4px 12px rgba(0,0,0,0.12)` | Bottom sheets, modal dialogs |
-
-**Shadow Philosophy**: Kakao is intentionally one of the flattest major design systems in production. Depth is communicated almost entirely through background color differentiation and border lines, not shadow elevation. This serves two purposes: performance on the millions of low-to-mid-range devices KakaoTalk targets, and aesthetic -- a messaging app should feel like a clean sheet of paper, not floating cards.
+No canonical shadow token is promoted. Captured corporate controls are largely flat; the Developers documentation site contains its own hover shadows, but those belong to documentation chrome rather than the Kakao Login component.
 
 ## 7. Do's and Don'ts
 
 ### Do
-- Use Kakao Yellow (`#FEE500`) as the primary brand accent
-- Follow Kakao Login button specs exactly -- they are compliance-mandated
-- Use system fonts for all conversational/functional UI
-- Use 12px border-radius as the standard for most interactive elements
-- Keep the interface flat -- rely on background color, not shadows, for depth
-- Use yellow bubbles for self-messages, white for others -- the universal Kakao pattern
-- Use rounded squares (12px radius) for KakaoTalk-style avatars
+- Use the exact Kakao Login compliance colors, symbol, radius, and system font.
+- Keep corporate KakaoBig/KakaoSmall values separate from Developers-site Pretendard.
+- Name marketing yellow `#fae100` separately from login yellow `#fee500`.
+- Use the shortened Login label instead of distorting a standard button below its intended size.
+- Preserve observed theme and interaction states on corporate navigation.
 
 ### Don't
-- Don't modify Kakao Login button colors, radius, or proportions
-- Don't use heavy shadows -- Kakao is one of the flattest design systems in production
-- Don't use yellow for text on white backgrounds -- contrast ratio is insufficient
-- Don't use pure black (`#000000`) for text -- use `#222222` or `#333333` for warmth
-- Don't override system fonts in chat contexts -- messages should feel personal
-- Don't use rounded circles for KakaoTalk avatars -- they use 12px rounded squares
-- Don't add gradient or 3D effects to brand elements -- strictly prohibited
+- Don't change the Kakao Login symbol shape, proportion, or color.
+- Don't replace the speech-bubble symbol with Kakao CI or a functional icon.
+- Don't remove the symbol from the Login button.
+- Don't use Developers-site Pretendard as evidence that the Login button uses Pretendard.
+- Don't present unverified KakaoTalk chat bubbles, mobile inputs, tabs, badges, or semantic colors as current canonical Kakao tokens.
 
 ## 8. Responsive Behavior
 
-### Breakpoints
-| Name | Width | Key Changes |
-|------|-------|-------------|
-| Mobile (Primary) | <480px | Full design fidelity, KakaoTalk native layout |
-| Tablet | 480-768px | Side panel for chat list + detail |
-| Desktop | >768px | Fixed sidebar + chat panel + optional right panel |
-
-### Touch Targets
-- Chat bubble: entire bubble tappable for context menu
-- Friend list items: 64px row height, full-width tappable
-- Tab bar items: 56px height, evenly distributed
-- Send button: 36px minimum, right side of input bar
-
-### Collapsing Strategy
-- Desktop: multi-column (chat list | conversation | info panel)
-- Tablet: 2-column (chat list | conversation)
-- Mobile: single screen with navigation between views
-- Chat input: always bottom-fixed with safe area handling
-
-### Image Behavior
-- Chat photos: grid layout (1/2/3+ images), 8px rounded corners
-- Profile avatars: 48px in lists, 80-100px in profile view, rounded square (12px)
-- Stickers/Emoticons: centered in bubble area, 120-200px display
+The corporate pages are responsive, but this run does not promote universal breakpoints. For the Login button, follow the official proportional resizing rule: extend both sides equally when widening, preserve symbol/label zones, and use the shortened label if a smaller format is required.
 
 ## 9. Agent Prompt Guide
 
-### Quick Color Reference
-- Primary CTA: Kakao Yellow (`#FEE500`)
-- CTA Text: Near Black (`#333333`) -- NOT white on yellow
-- Background: Pure White (`#ffffff`)
-- Background Fill: Light Gray (`#F0F0F0`)
-- Heading text: Dark (`#222222`)
-- Body text: Charcoal (`#333333`)
-- Secondary text: Gray (`#666666`)
-- Caption text: Muted (`#999999`)
-- Placeholder: Light (`#BBBBBB`)
-- Border: Soft Gray (`#E5E5E5`)
-- My Bubble: Kakao Yellow (`#FEE500`)
-- Other Bubble: White (`#ffffff`)
-- Link: Blue (`#2196F3`)
-- Error: Red (`#E02000`)
-
-### Example Component Prompts
-- "Create a KakaoTalk chat screen: white bg. My messages: right-aligned #FEE500 bubbles, #333333 text 16px, timestamp below #999999 12px. Others: left-aligned, 36px circle avatar, 12px sender name #666666 above white bubble with #E5E5E5 border."
-- "Build a Kakao Login button: #FEE500 bg, 12px radius. Left: black chat bubble icon. Center: '카카오 로그인' in #000000 at 85% opacity. Full-width, 16px margin."
-- "Design a friend list: white bg, 16px h-padding. Each row: 48px rounded-square avatar (12px radius) + 12px gap + name (16px weight 500, #222222) over status (14px weight 400, #808080, ellipsis). 64px row height. Divider: 1px #F0F0F0."
-- "Create a tab bar: white bg, 44px height, 4 tabs. Active: #333333 text (14px weight 600) + 2px bottom border. Inactive: #999999 text."
-- "Design a chat input bar: #F0F0F0 bg, 20px radius, 40px height. Left: plus button 36px #999999. Right: send button #FEE500 bg 36px circle. Text input #222222, placeholder #BBBBBB '메시지 보내기'. Bottom-fixed with safe area."
-
-### Iteration Guide
-1. System fonts for ALL functional UI -- Kakao Font for brand/marketing only
-2. Primary yellow is `#FEE500` -- text ON yellow is `#333333` (never white)
-3. Chat bubbles are the visual DNA: yellow = self, white = other, pill = system
-4. 12px is THE border-radius -- buttons, cards, avatars, login, all 12px
-5. Flat design: no shadows on chat bubbles, minimal elsewhere, depth via background color
-6. Gray hierarchy: #222222 → #333333 → #666666 → #808080 → #999999 → #BBBBBB
-7. Kakao Login specs are non-negotiable compliance requirements
+- “Build a compliant Kakao Login button with `#fee500`, black speech-bubble symbol, 85% black label, 12px radius, and OS system font at 30Pt.”
+- “Create the current corporate navigation pill with KakaoBig 17px/400, 37px height, 999px radius, and explicit light/dark themes.”
+- “Use KakaoSmall for corporate body/control text; do not substitute Pretendard unless reproducing Developers documentation chrome.”
+- “Treat any KakaoTalk in-app component as an unverified extension unless native product evidence is supplied.”
 
 ## 10. Voice & Tone
 
-Kakao's voice is **친근하고 일상적이며 따뜻한 (familiar, everyday, warm)** — the language of a friend explaining something, not a corporation announcing something. The phrase that anchors the company brand on kakaocorp.com is *"나의 세계를 바꾸는 카카오"* (Kakao that transforms my world), which sets the register: personal scale ("나의"), present-tense action ("바꾸는"), product-as-companion. The product surfaces extend this — system messages in KakaoTalk read as observations rather than alerts ("친구가 입장했습니다"), and onboarding microcopy uses the polite-conversational `해요체` rather than `합니다체`.
-
-| Context | Tone |
-|---|---|
-| 시스템 메시지 (chat) | 관찰형 단문. "OOO님이 들어왔습니다." 사실 묘사, 감정 부재 |
-| CTA / 버튼 | 동사+명사 혹은 동사 단독, 짧게. "보내기", "친구 추가하기", "확인" |
-| 에러 (네트워크/인증) | 구체적 원인 + 즉시 행동 가능한 한 줄. "다시 시도해주세요"는 마지막 fallback |
-| 약관 / 정책 | 격식체 (`-합니다`) — 법무성 명확함이 우선 |
-| 프로모션 / 마케팅 | 짧은 카피, 종결어미 다양화 ("받아요!", "지금 시작") |
-| 빈 상태 (Empty) | 다음 행동 1개를 제시. 위로하지 않음 ("친구를 추가하면 대화를 시작할 수 있어요") |
-| 성공 확인 | 토스트 1초, 짧은 확인 — 축하 이모지·과한 메시지 금지 |
-
-**Voice samples**
-- 카카오 로그인 버튼 라벨: *"카카오 계정으로 로그인"* <!-- verified: developers.kakao.com Kakao Login docs (2026-05) -->
-- 친구 추가 화면 빈 상태: *"친구가 없어요. 추천 친구를 살펴보세요."* <!-- illustrative: not verified as live KakaoTalk copy -->
-- 네트워크 오류: *"연결이 불안정해요. Wi-Fi를 확인해주세요."* <!-- illustrative -->
+Kakao’s corporate mission centers on bringing a needed future closer through technology that understands people. In user-facing copy, that translates into familiar Korean, short labels, and service explanations grounded in an everyday action—talking, finding a place, sending a gift, following a channel—rather than abstract technology claims.
 
-**Forbidden phrases.** "혁신", "최고의" 같은 마케팅 superlative (kakaocorp.com 어디에도 안 보임). 영어 원문 그대로 (Get Started → "시작하기"로 번역). 명령형 (`-해라`). 이모지 in product chrome (스티커/이모티콘은 콘텐츠라 OK, UI 텍스트엔 금지).
+The tone changes by surface. Corporate and culture pages can be optimistic and connective; product/service descriptions should be concrete about the benefit; developer and compliance guidance must be prescriptive and exact. Kakao Login wording, symbol, color, and label rules are not a place for playful rewriting. Avoid turning Kakao’s friendliness into childishness or using yellow as a substitute for clear instructions.
 
 ## 11. Brand Narrative
 
-Kakao는 **2006년 11월 29일** 김범수(Brian Kim, 前 NHN 임원)와 이제범 공동창업으로 **iWilab(아이위랩)** 으로 출발했다 — Mountain View 실리콘밸리의 한국 창업가 인큐베이터를 모태로 한국에 설립 ([Kim Beom-soo — Wikipedia](https://en.wikipedia.org/wiki/Kim_Beom-soo_(businessman)), [PortersFiveForce — Kakao Brief History](https://portersfiveforce.com/blogs/brief-history/kakaocorp)). **카카오톡 출시(2010-03)** 가 한국 모바일 인터넷의 분기점 — 90% 스마트폰 침투율의 메신저 인프라가 됐다. 첫 흑자 $42M(2012), 100M 누적가입자 돌파(2013), **2014-10 다음(Daum)과 합병** 'Daum Kakao'(2015 Kakao로 재브랜딩) — 김범수는 22.2% 최대주주가 됐다 ([Kakao — Wikipedia](https://en.wikipedia.org/wiki/Kakao)). 회사는 통신·결제·모빌리티·콘텐츠로 확장하면서도 *"사람과 세상을 연결한다"* 는 단일 명제를 brand positioning의 중심으로 유지한다. 공식 brand 페이지(kakaocorp.com)에 노출되는 문구 *"그 어떤 목소리도 소외되지 않도록"* 은 inclusivity를 명시적 design constraint로 못박는다 — 글꼴 크기·접근성·다국어 등 미시 결정의 윗단 origin.
+Kakao describes itself as a mobile-life platform that uses technology, content, and high mobile reach to make everyday services more convenient. Its current mission—bringing a needed future closer through technology that understands people—places human context before technical novelty.
 
-2024-2025년의 **카나나(Kanana)** AI 브랜드 launch는 *"나에게 가장 가까운, 가장 쉬운 AI"* 로 캐치프레이즈 — 여전히 `나의 / 가까운 / 쉬운` 의 personal·proximity·simplicity 삼각형이다. 즉 brand evolution은 있어도 voice의 핵심은 "1인칭, 친근, 단순"으로 일관.
+KakaoTalk’s communication model became the organizing metaphor for a broader ecosystem: channels connect people with brands and stores, messages carry transactional information, and services extend into commerce, maps, content, mobility, and social impact. The corporate yellow and speech-bubble identity therefore signal connection, but each service still needs its own product rules.
 
-What Kakao refuses: corporate 거리감, 기능 자랑, 영어 원문 노출. What it embraces: KakaoTalk 노란 색의 일관성(15년 동일), 한국 텍스트 우선, 시스템 폰트 (KakaoFont는 marketing 한정), 챗 거품의 시각 DNA.
+This is why surface separation is essential. Kakao’s corporate type and marketing yellow express the parent identity; Kakao Login uses a precisely regulated `#fee500` component so third-party integrations remain recognizable and trustworthy; developer documentation uses its own Pretendard chrome. A coherent Kakao reference preserves the relationship between these systems without flattening them into one fictional theme.
 
 ## 12. Principles
 
-1. **Familiar over impressive.** 사용자가 "어, 이거 그냥 친구한테 말하듯 쓰면 되네"라고 느껴야 한다. *UI implication:* 마이크로카피는 `해요체`, 동사 단독, ≤8 글자 우선.
-2. **Connection is the product.** 모든 surface는 "사람-사람" 또는 "사람-서비스" 연결이라는 1차 목적을 지운다. *UI implication:* 친구·메시지·전송·통화 entry는 main nav에서 ≤2 tap 이내.
-3. **Inclusivity is a constraint, not a value.** *"그 어떤 목소리도 소외되지 않도록"* 은 슬로건이 아니라 색상 contrast·글자 크기·다국어·접근성 라벨의 mandatory check. *UI implication:* 모든 interactive element WCAG AA 이상, 글자 14px 미만은 정보 보조 용도로만.
-4. **Yellow is sacred.** `#FEE500` Kakao Login은 Kakao Developers compliance 사항으로 **변경 불가** — 색상·텍스트·아이콘 전부 spec 그대로. *UI implication:* 로그인 버튼 = 제3의 design choice 영역 아님. 비-compliance 마케팅 yellow는 `#FAE100` 분리 토큰.
-5. **Korean text first.** UI 텍스트는 한글이 우선이며 영어는 보조. 폰트 매트릭(line-height, letter-spacing)도 한글 기준으로 튜닝됨. *UI implication:* 영어 placeholder를 한글로 의역, 글자 가운데정렬은 한글이 짧을 때만.
+These are evidence-derived implementation principles:
 
-## 13. Personas
-
-*Personas are fictional archetypes informed by publicly described KakaoTalk user segments (universal Korean adult population, small-business owners, content creators), not individual people.*
+1. **Compliance outranks approximation.** Login symbols, labels, colors, type, and relative emphasis follow the official integration guide even when another treatment looks more fashionable.
+2. **Surface-specific fonts are part of correctness.** KakaoBig/KakaoSmall, OS system labels, and Pretendard documentation chrome describe different jobs, not a fallback chain.
+3. **Preserve the dual-yellow distinction.** Corporate marketing `#fae100` and regulated Login `#fee500` remain separately named and sourced.
+4. **Connection should stay legible.** Friendly language and familiar symbols can reduce distance, but transactional information, consent, and support states must remain explicit.
+5. **Use first-party evidence over remembered KakaoTalk conventions.** Do not fabricate chat bubbles, navigation, or native-service tokens from cultural familiarity with the brand.
 
-**김지영, 38, 서울.** 마케팅 회사 팀장. KakaoTalk으로 가족·동료·거래처 모두 소통. 페르소나라기엔 너무 평범한 게 핵심 — Kakao 디자인의 성공은 "이 사람이 친구의 카톡과 회사 거래처 카톡을 같은 앱에서 안 헷갈리게" 만드는 것.
+## 13. Personas
 
-**이용운, 56, 부산.** 식당 운영. 카카오 비즈니스(고객 응대), 카카오페이(결제), 카카오맵(위치)을 매일 쓴다. 새로운 기능을 자발적으로 탐색하지 않으며, 기능이 *조용히* 추가되어 *우연히* 발견되는 패턴이 가장 잘 맞는다.
+These are official service and stakeholder contexts, not invented demographic personas.
 
-**박서연, 22, 대전.** 대학생, 이모티콘 스토어 즐겨 사용. 친구들과 채팅의 대부분을 이모티콘으로 한다 — 감정의 미세 조정을 텍스트가 아닌 그림으로. Kakao가 글꼴·이모티콘·스티커를 콘텐츠 카테고리로 격상시킨 게 이 페르소나의 일상에 깊이 박혀 있음.
+- **A person communicating in daily life:** expects familiar language, fast recognition, and continuity between conversation and adjacent services.
+- **A customer receiving information or benefits from a channel:** needs promotional, transactional, and support messages to remain clearly distinguishable.
+- **A business or creator operating a Kakao channel:** needs approachable customer communication without losing operational clarity or consent boundaries.
+- **A developer integrating Kakao Login:** needs exact compliance rules for symbol, color, type, label, and relative emphasis so the integration remains trustworthy.
 
 ## 14. States
 
-| State | Treatment |
+| Component | Verified state evidence |
 |---|---|
-| **Empty (친구 목록)** | 16px Apple SD Gothic Neo, `#222222` "친구가 없어요." + 14px `#666666` "추천 친구를 살펴보세요." + 카카오 옐로우 텍스트 링크 1개. 일러스트 없음 (Kakao Empty는 일관되게 텍스트만) |
-| **Empty (대화 없음)** | 시스템 메시지 톤. "아직 메시지가 없어요" 14px `#999999`. 추천 행동 없음 — 첫 메시지를 입력하면 자연히 채워지므로 |
-| **Loading (친구 목록 새로고침)** | Pull-to-refresh 시 카카오 옐로우 dot 3개 progressive loader. Native iOS/Android 인디케이터 그대로 |
-| **Loading (이미지)** | `#F0F0F0` skeleton 박스, 8px radius (이미지 grid radius와 일치). 시머 없음 |
-| **Error (네트워크)** | Toast 상단, `#E02000` 배경 white text, "연결이 불안정해요. Wi-Fi를 확인해주세요." 자동 dismiss 4s |
-| **Error (메시지 발송 실패)** | 메시지 옆 빨간 ! 아이콘 + 길게 누르면 "다시 보내기 / 삭제" 메뉴. 메시지 자체는 yellow bubble 유지 |
-| **Success (메시지 전송)** | 보낸 직후 옅은 회색 시계 → 한 사람 읽으면 회색 1, 모두 읽으면 표시 사라짐. 토스트 없음 — 메시지 자체가 confirmation |
-| **Success (결제)** | 별도 모달 — 카카오페이 노란 체크 마크, 지불 액수 큰 글씨, "확인" CTA. 0.6초 spring scale 애니메이션 |
-| **Skeleton (대화 목록)** | 64px row 그대로 사용, 텍스트 영역만 `#F0F0F0` 박스. 아바타 자리도 동일한 12px rounded square skeleton |
-| **Disabled** | 버튼 opacity 0.4, 배경·텍스트 색조 그대로 — Kakao yellow disabled는 `#DEE2E6` `#ADB5BD`로 *바뀜* (위 §4 기재) |
-| **Loading (긴 작업: 백업)** | 진행률 % + "약 N분 남음" 라벨. 카카오 옐로우 progress bar |
+| Kakao Login | full/short label and resizing constraints; interaction-state styling not specified |
+| Corporate nav | light/dark themes, focus, hover |
+| Search control | default, hover |
+| Milestone filter | selected |
+| Marketing/footer labels | default only |
 
 ## 15. Motion & Easing
 
-**Durations**:
-
-| Token | Value | Use |
-|---|---|---|
-| `motion-instant` | 0ms | 토글 / 체크박스 즉시 |
-| `motion-fast` | 150ms | 버튼 active 피드백, hover |
-| `motion-standard` | 250ms | 모달 / 시트 enter / exit |
-| `motion-message` | 300ms | 채팅 메시지 fade-in (yellow bubble 등장) |
-| `motion-spring` | variable | pull-to-refresh, 친구 추가 콜백 |
-
-**Easings**:
-
-| Token | Curve | Use |
-|---|---|---|
-| `ease-enter` | `cubic-bezier(0.2, 0.6, 0.25, 1)` | 메시지·시트 등장 |
-| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | 모달 dismiss |
-| `ease-spring` | spring (mass 1, stiffness 380) | 결제 confirm scale, 친구 추가 callback |
-
-**Motion rules.**
-1. 메시지 거품은 **항상** spring scale (0.95 → 1.0)로 등장 — Kakao 채팅의 시그니처 모션
-2. 노란 색조에 색상 transition 사용 금지 — `#FEE500` 은 binary on/off, 중간색 사용 시 brand 인지도 하락
-3. `prefers-reduced-motion: reduce` 시 모든 spring → 즉시 fade. 채팅 거품도 spring 제거하고 100ms fade-in
-4. 토스트는 항상 상단(notch 아래) 등장 — 하단은 채팅 input과 충돌
-
----
-
-**Verified:** 2026-05-08
-**Tier 1 sources (Philosophy):** kakaocorp.com (mission/vision quotes "나의 세계를 바꾸는 카카오", "그 어떤 목소리도 소외되지 않도록"), developers.kakao.com (Kakao Login compliance spec for §12 Principle 4)
-**Tier 2 sources:** none independent — Kakao brand narrative is primarily self-published. Voice samples marked `illustrative` are derived patterns from Kakao chat surfaces, not verbatim live UI text.
-**Style ref for tone:** `toss` (한국어 페르소나 어조 일관성).
-**Conflicts unresolved:** none.
+No exact motion duration or easing token is promoted. Preserve focus and hover clarity on the corporate site and platform-standard interaction feedback for the Login button; label custom timing as an extension until first-party evidence is available.