카카오 DESIGN.md

Design System Inspiration of Kakao (카카오)

Overview

Visual Theme & Atmosphere

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.

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:

• 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

Primary tasks

• Browse the company's milestone history filtered by category
• Read how the company describes itself and its services
• Search the corporate site for a page or service
• Add a compliant Kakao Login button to a third-party service

Brand Narrative

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.

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.

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.

Principles

These are evidence-derived implementation principles:

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.

Personas

These are official service and stakeholder contexts, not invented demographic personas.

• 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.

Colors

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.

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.

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.

Typography

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.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• typography.login-label.fontSize: 30Pt

Layout

• 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.

Responsive Behavior

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.

Elevation & Depth

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.

Motion & Easing

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.

On 2026-09-29 all six probed corporate-home controls computed transition: all 0s: their hover, pressed and focus changes are instant, not animated.

Components

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
• 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
• Hover and pressed: bg #f3f3f3 (2026-07-11 capture on three corporate pages; 2026-09-29 probe with :hover and :active matched)
• Focus: keyboard focus fills bg #f3f3f3 next to the browser's default ring. The fill was still there after focus moved to the next control, which looks like a script-applied "current menu item" state rather than a :focus rule; computed styles cannot tell the two apart, so treat it as a lead.
• States: light/dark themes, hover, pressed, focus

Corporate Search Control

• Background: transparent
• Text/Icon: #333333
• Radius: 18px
• Height: 36px
• Font context: 14px / 400 / KakaoSmall
• Hover and pressed: bg #eeeeee (the surface grey), on the corporate home on 2026-09-29 and on the search, language and theme buttons in the 2026-07-11 capture
• Focus: the browser's default ring only, which is not a Kakao style, so no focus value is declared
• Use: the language and theme toggles share this 36px circle; the search input opens in a layer behind a click and was not measured

Dark Marketing Tag

• Background: #111111
• Text: #ffffff
• Border: 2px solid #ffffff
• Radius: 16px
• Padding: 7px 8px 8px
• Height: 32px
• Font: 13px / 700 / KakaoSmall
• Hover and pressed: bg rgba(17, 17, 17, 0.75); border and label stay (2026-07-11 capture, confirmed 2026-09-29)
• Focus: the browser's default ring only

Marketing Download Pill

• Background: #fae100 (marketing yellow; the only element in the capture with this fill)
• Text: #000000
• Border: 2px solid #000000
• Radius: 16px
• Padding: 7px 13px 8px 30px
• Height: 32px
• Font: 13px / 700 / KakaoSmall, tracking -0.5px
• States: on 2026-09-29 hover and pressed (:hover and :active matched) left the fill, border and label as at rest, so the pill does not respond to the pointer. Keyboard focus shows only the browser's default ring.
• Use: 카카오톡 다운로드 on the corporate home, paired with the dark marketing tag

Milestone Filter

• Background: #eeeeee
• Text: #000000
• Radius: 30px
• Padding: 8px 20px 12px
• Height: 44px
• Font: 16px / 700 / KakaoBig
• Pressed: bg #dfdfdf, from one 2026-07-11 frame on the category combobox
• States: selected filter captured; hover and focus not sampled

Footer Related-Site Pill

• Background: #eeeeee
• Text: #000000
• Radius: 24px
• Padding: 10px 20px 12px
• Height: 40px
• Font: 12px / 400 / KakaoSmall
• States: default captured on 2026-07-11. On 2026-09-29 the pill matched :hover and :active and kept bg #eeeeee and fg #000000: it has no pointer response. Keyboard focus shows only the browser's default ring. (Corrected 2026-09-29: earlier text said hover was "not retained", which read as a capture gap.)

Service Card

• Background: transparent
• Title: #111111, 30px / 700 (strong.title_service); the card anchor itself is #333333, 14px / 400 / KakaoBig
• Size: 288 × 299px with 16px right padding and a 120px service image
• Hover and pressed: a 24 × 24 SVG icon on the title's ::after goes from opacity 0 to 1; nothing recolours, moves or casts a shadow
• Focus: the browser's default ring only
• Source: the 2026-09-29 probe; the July capture holds no home service card

Milestone Service Link

• Background: transparent
• Text: #333333
• Font: 14px / 400 / KakaoSmall, line height 24.92px, tracking -0.2px
• Height: 20px
• Hover and pressed: fg #111111, on three sibling links in the 2026-07-11 capture
• Use: service-name links in the milestones-page list (35 items)

Culture Carousel Control

• Background: #ffffff
• Icon: #333333
• Border: 1px solid #dbdbdb
• Radius: 50% on a 50 × 50px circle
• States: default only
• Use: circular carousel control on the culture page

Keyboard focus (2026-09-29)

All six controls probed on the corporate home (navigation pill, search button, download pill, dark tag, service card, footer pill) draw the browser's default focus ring (outline: auto, rendered #005fcc). That ring is Chrome's, not Kakao's, so no component carries it as a focus value. The navigation pill is the only control that adds an authored change, its #f3f3f3 fill.

---

Verified: 2026-07-11 (verification v2, current corporate surfaces + rendered official Login guide); states re-measured 2026-09-29 by a live probe of the corporate home 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

States

Keyboard focus was walked with real Tab presses on 2026-09-29. None of the six probed controls has an authored focus ring; the browser default is not a Kakao value and is not tokenized.

Live state probe, 2026-10-16 (https://www.kakaocorp.com/page/), marketing-download-cta: pressed — no visible change (measured 2026-10-16).

Do's and Don'ts

Do

• 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 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.

Voice & Tone

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.

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.

Agent Prompt Guide

• “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.”
• “Create the corporate download pill: #fae100 fill, 2px black border, 16px radius, 32px height, KakaoSmall 13px/700. It does not change on hover or press.”
• “Treat any KakaoTalk in-app component as an unverified extension unless native product evidence is supplied.”

Governance

Known Gaps

• Contrast, search-control. Text #333333 on #00000000 measures 1.66:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, service-card. Text #111111 on #00000000 measures 1.11:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, milestone-service-link. Text #333333 on #00000000 measures 1.66:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.