Design System Inspiration of KakaoPay

1. Visual Theme & Atmosphere

KakaoPay's design occupies the warm, friendly end of the Korean fintech spectrum — where Toss is bold and assertively spacious, KakaoPay is soft and conversationally legible. The web home opens with a near-white canvas (#ffffff) and a near-black-but-warm body color (rgb(6, 11, 17) ≈ #060B11), framed by a dark nav header and a soft off-white footer (#F8F9FA). The Kakao-ecosystem yellow (#FFEB00) is present as a brand anchor — but, by explicit accessibility decision, it is not the primary CTA color on functional surfaces. KakaoPay's design team has publicly committed to a minimum 3:1 contrast ratio between graphics and background, which drove the brand to retreat from saturated yellow on UI chrome and toward warmer, softer paired neutrals.

The defining typographic choice is Noto Sans KR — a deliberately mainstream Korean-first system font choice, set with system-ui and AppleSDGothicNeo fallbacks. KakaoPay does not deploy a proprietary display face (unlike Toss's "Toss Product Sans" or Stripe's sohne-var). The choice is itself the statement: this is a financial app for everyone in Korea, including users on older Android devices, screen readers, and low-vision configurations. The body baseline is 14px — denser than Stripe's 16px web baseline and consistent with Korean web fintech convention. Section headings sit at 22px / weight 500 / line-height 1.45 / letter-spacing -0.2px — a moderate, friendly authority, not display-light (Stripe) and not display-bold (Toss financial amounts). Sub-menu labels run at 14px / weight 300 (inactive) and weight 500 (active group) — the weight differential is how hierarchy gets communicated, not size.

What distinguishes KakaoPay visually from its closest neighbors (Toss, Kakao Bank) is the softness of the geometry: rounded corners and rounded line work are stated principles, and the brand explicitly rejects sharp/aggressive shapes. Where Stripe runs 4px conservative radii and Toss runs 8–16px utilitarian rounding, KakaoPay's brand philosophy leans into the "둥글고 부드러운" (rounded and soft) idiom. Combined with the warm-neutral background and 3:1-minimum contrast targeting, the impression is of a financial product that has been deliberately de-tensed — engineered to feel low-stakes the moment you open it, even when the underlying action (transferring 5,000,000원) is high-stakes.

Key Characteristics:

• Noto Sans KR primary, with system-ui / AppleSDGothicNeo fallback — Korean-first, accessibility-first
• 14px web body baseline; 22px / weight 500 / -0.2px letter-spacing for section heads
• Weight 300 / 500 dual-track for hierarchy; bold (700) reserved for emphasis and reverse-on-yellow
• Kakao Yellow (#FFEB00) as ecosystem anchor — used decoratively / on dark brand chrome, not as default CTA
• Warm soft neutrals (Ivory #FEFFFA, Wild Willow #C5C17A, Olive #7F7600) as the supporting palette
• Minimum 3:1 contrast on graphics — accessibility is documented and enforced
• Rounded geometry across all components (cards, buttons, icons, illustrations)
• Three-tier graphic system: Icon → 2D → 3D, applied by information density

2. Color Palette & Roles

Primary

• Kakao Yellow (#FFEB00): The brand anchor across the Kakao ecosystem. Used for logo, hero brand moments, and yellow-on-dark CTA in promotional surfaces. Not the default functional-UI CTA color — accessibility rules prohibit #FFEB00 text on white and large-area #FFEB00 for primary buttons without paired dark text.
• Deep Ink (#060B11): rgb(6, 11, 17) — observed body text color on live kakaopay.com. The KakaoPay "near-black": a deep neutral with a faint blue undertone, warmer than pure #000.
• Pure White (#ffffff): Page background, card surfaces.

Brand Support

• Ivory (#FEFFFA): Soft off-white surface tone — alternative to pure white for sections that need warmth.
• Wild Willow (#C5C17A): Muted yellow-green secondary — pairs with yellow as a calmer adjacent tone.
• Olive (#7F7600): Deep yellow-green — used for text-on-yellow, icon strokes against light yellow backgrounds, achieving the 3:1-minimum contrast against #FFEB00.

Surface Neutrals

• Surface Footer (#F8F9FA): Observed footer container background — the canonical "secondary surface" tone.
• Surface Soft (#F2F4F6): Light grey-blue panel background for cards and grouped content.
• Border Default (#E5E8EB): 1px borders on inputs, cards, dividers.
• Border Subtle (#EEF0F3): Inner dividers, list separators.

Text Scale

• Heading Ink (#060B11): Primary heading and body text on light surfaces.
• Heading on Dark (#F8F9FA): Heading text on dark nav / dark brand sections.
• Body Slate (#374151): Secondary body / longer-form copy.
• Caption Grey (#6B7684): Captions, helper text, timestamps.
• Placeholder (#B0B8C1): Form placeholders, muted hint text.

Functional

• Success Green (#03B26C): Confirmation states (transaction succeeded, savings goal hit).
• Error Red (#F04452): Error states, declines, validation failures.
• Warning Amber (#FFA94D): Warning states, deadline reminders. Distinct from brand yellow.
• Info Blue (#3182F6): Informational links and tooltips on non-brand surfaces.

Dark Nav / Hero

• Header Ink (#1A1D24): Dark nav header background — near-black with warm undertone.
• Header Text (#FFFFFF): Top-level nav links on dark header.
• Header Muted (rgba(255,255,255,0.6)): Inactive top-level link state.

3. Typography Rules

Font Family

• Primary: "Noto Sans KR", system-ui, AppleSDGothicNeo, sans-serif (observed)
• Numerals: Same family; tabular numerals not enforced via OpenType on web — financial amounts rely on rendering at consistent weight (500/700) and right alignment for column legibility.
• No proprietary display face. Korean-first accessibility is the explicit reason.

Hierarchy

Principles

• Weight differentiates, not size. The most common KakaoPay pattern is 14px / weight 300 paired with 14px / weight 500 — same size, different hierarchy. Reduces visual noise.
• Negative tracking only at display. Headings ≥22px use -0.2px to -0.4px; body keeps letter-spacing: normal. Korean glyphs are wider than Latin and over-tightening punishes legibility.
• Korean is the first audience. Latin strings are styled to render adequately in Noto Sans KR's Latin glyphs — KakaoPay does not switch to a Latin-optimized fallback mid-sentence.
• Two-weight density. 300 / 500 / 700 are the load-bearing weights; 400 is the neutral default for paragraph copy. Avoid stacking weights mid-paragraph for emphasis.
• No display-light. Unlike Stripe's signature weight-300 headlines, KakaoPay's hero/display sits at 500-700. Light weight at display sizes would read as cold, contradicting the warm-friendly tone.

4. Component Stylings

Buttons

Primary (Functional UI)

• Background: #060B11 (Deep Ink — preferred default on white surfaces, accessibility-safe)
• Text: #FFFFFF
• Padding: 14px 20px
• Radius: 12px (rounded — matches "둥글고 부드러운" principle)
• Font: 16px / weight 500 / Noto Sans KR
• Height: 48px (touch-friendly)
• Hover: opacity 0.9 / no color shift
• Use: Primary action on light surface where Kakao Yellow would fail contrast ("확인", "다음", "송금하기")

Brand Yellow (Decorative / On Dark)

• Background: #FFEB00
• Text: #060B11 (dark ink — required for 3:1 contrast on yellow)
• Padding: 14px 20px
• Radius: 12px
• Font: 16px / weight 700 / Noto Sans KR
• Height: 48px
• Use: Kakao-ecosystem moments (Kakao login, brand promotion, marketing-page hero CTA on dark canvas). Never white text on yellow.

Secondary / Outline

• Background: #FFFFFF
• Text: #060B11
• Padding: 14px 20px
• Radius: 12px
• Border: 1px solid #E5E8EB
• Font: 16px / weight 500
• Use: Secondary action paired with a primary CTA

Tertiary / Soft

• Background: #F2F4F6
• Text: #060B11
• Padding: 14px 20px
• Radius: 12px
• Border: none
• Font: 16px / weight 500
• Use: Low-emphasis action, "더보기", "취소"

Link Inline

• Background: transparent
• Text: #3182F6
• Padding: 0
• Underline: on hover only
• Font: 14px / weight 500
• Use: Inline text link inside paragraph copy

Cards & Containers

Standard Card

• Background: #FFFFFF
• Border: 1px solid #EEF0F3
• Radius: 16px (rounded-soft)
• Padding: 20px
• Shadow: 0px 2px 8px rgba(0, 0, 0, 0.04) (very subtle — soft elevation, not dramatic)
• Use: Service tile, summary panel, content block

Soft Card (grouped content)

• Background: #F8F9FA
• Border: none
• Radius: 16px
• Padding: 20px
• Shadow: none — elevation conveyed by background contrast only
• Use: Inset panel, FAQ row, grouped form section

Brand Card (yellow-on-dark moment)

• Background: #1A1D24
• Border: none
• Radius: 20px
• Padding: 24px
• Text: #FFFFFF with #FFEB00 accent for the brand-moment headline
• Use: Hero promotional card, Kakao-ecosystem feature spotlight

Badges / Tags / Pills

Neutral Badge

• Background: #F2F4F6
• Text: #374151
• Padding: 4px 10px
• Radius: 9999px (pill — matches rounded principle)
• Font: 12px / weight 500

Brand Badge

• Background: #FFFBCC (yellow-tinted 12% surface)
• Text: #7F7600 (Olive — clears 3:1 contrast on the tinted background)
• Padding: 4px 10px
• Radius: 9999px
• Font: 12px / weight 500

Success Badge

• Background: rgba(3, 178, 108, 0.12)
• Text: #03B26C
• Padding: 4px 10px
• Radius: 9999px
• Font: 12px / weight 500

Error Badge

• Background: rgba(240, 68, 82, 0.10)
• Text: #F04452
• Padding: 4px 10px
• Radius: 9999px
• Font: 12px / weight 500

Inputs & Forms

• Background: #FFFFFF
• Border: 1px solid #E5E8EB
• Radius: 12px
• Padding: 14px 16px
• Height: 52px
• Focus: 1px solid #060B11 (no yellow ring — contrast safety)
• Label: 13px / weight 500 / #6B7684, sits above field
• Text: 16px / weight 400 / #060B11
• Placeholder: #B0B8C1
• Error: 1px solid #F04452 + 13px error helper text in #F04452 below

Navigation

Web Header (observed)

• Background: #1A1D24 (dark)
• Height: 84px
• Text: #FFFFFF for top-level links
• Top-level link: 16px / weight 300 / line-height 84px (centered vertically by line-height)
• Megamenu H2 group header: 22px / weight 500 / letter-spacing -0.2px / color #F8F9FA
• Megamenu H3 sub-group label: 14px / weight 500 / 8px horizontal padding / color #FFFFFF
• Megamenu link (inactive): 14px / weight 300 / #060B11 on white megamenu drop
• Logo position: left
• No CTA in primary nav (KakaoPay app install is bottom-of-page or floating)

Mobile / App Tab Bar

• Background: #FFFFFF
• Top border: 1px solid #EEF0F3
• Height: 56px (+ safe-area)
• Tab icon: 24px, weight handled by 3-tier graphic system (Icon variant)
• Active tab: #060B11 icon + 11px / weight 500 label #060B11
• Inactive tab: #B0B8C1 icon + 11px / weight 400 label #6B7684

Iconography (3-Tier System)

• Icon (UI tier): 24px solid-fill monoline, #060B11 on light / #FFFFFF on dark. Used for inline actions, tab bar, list rows.
• 2D Graphic: Solid-fill illustration ~80–120px, multi-color from the warm-soft palette. Used for empty states and feature cards.
• 3D Graphic: Rendered illustration ~160–240px, used for hero / onboarding only. Always paired with a single supporting sentence — never decorative.

---

Verified: 2026-05-13 (CREATE — Apple-tier) Tier 1 sources: https://www.kakaopay.com/ (live DOM via playwright — body font Noto Sans KR, body color rgb(6,11,17), header 84px dark, megamenu H2 22px·500·-0.2px, footer #F8F9FA); https://story.kakaopay.com/225-kakaopay-design/ (official KakaoPay design blog — three pillars, 3:1 contrast commitment, Icon→2D→3D hierarchy); https://www.kakaocorp.com/page/service/service/KakaoPay (service taglines and IA); WebSearch corroboration on brand color #FFEB00 + Wild Willow / Ivory / Olive supporting palette. Tier 2 sources: getdesign.md/kakaopay — verified explicitly empty ("No designs found for 'kakaopay'", 2026-05-13). styles.refero.design/?q=kakaopay and ?q=카카오페이 — both verified empty via playwright 2026-05-13. Tier 2b status: unavailable. Tier 1 (live DOM + official story.kakaopay.com design blog + Kakao Corp service page + brand-color aggregator) treated as authoritative per pipeline. Conflicts unresolved: none. Live DOM (warm-neutral + dark-ink primary, no yellow on functional CTAs) is fully consistent with the blog-stated accessibility policy (3:1 minimum, yellow retreat from primary functional UI). The yellow stays as a brand-anchor / ecosystem cue, not a CTA token. Note on KPDS: No public KakaoPay Design System docs site discovered. Design knowledge is published as narrative posts on story.kakaopay.com, not as a public token registry. _research.md: web/references/kakaopay/_research.md

5. Layout Principles

Spacing System

• Base unit: 4px
• Common scale: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64
• Section v-padding: 64px desktop / 40px mobile
• Card internal padding: 20px standard, 24px featured
• Form field stacking: 16px gap between fields, 8px gap between label and field

Grid & Container

• Web max content width: ~1200px
• Mobile baseline: 360px (wider than Toss's 375px to accommodate older Android target)
• Horizontal padding: 20px mobile / 40px tablet / centered on desktop
• Megamenu drop: full-width, internal column gap 32px

Whitespace Philosophy

• Soft density. KakaoPay sits between Stripe's airy editorial spacing and a typical Korean banking site's information-dense tables. Lists and transaction rows are tight (52–56px rows) but section breaks are generous (64px) — the rhythm tells users "we're in a list now" vs "new topic, breathe".
• Yellow as punctuation. Brand yellow is reserved for moments — a hero card, a Kakao login button, an icon highlight. It never tiles. Tiling yellow would fail accessibility and lose its function as an attention anchor.
• Rounded everywhere, but not pill-everywhere. Cards round at 16px, buttons at 12px, badges at 9999px (pill). The rounding scale is itself a hierarchy.

Border Radius Scale

• Compact (8px): Inputs, small chips, inline elements
• Standard (12px): Buttons, small cards
• Comfortable (16px): Standard cards, modal sheets
• Large (20-24px): Featured brand cards, bottom sheets
• Pill (9999px): Badges, toggle switches, floating action chips

6. Depth & Elevation

Shadow Philosophy: KakaoPay's shadows are explicitly quiet. Pure-black at very low opacity — softer than Toss (which is already restrained) and dramatically softer than Stripe's blue-tinted multi-layer system. The reasoning is the same as the typography rationale: in a payment app, dramatic depth reads as decoration, and decoration reads as untrustworthy. Elevation is communicated more through background contrast (#F8F9FA panel on #FFFFFF page) than through shadow weight.

Background Layering

• Page: #FFFFFF
• Inset section / footer-like surface: #F8F9FA
• Grouped soft card: #F2F4F6
• Dark brand band: #1A1D24 (white text on top)

7. Do's and Don'ts

Do

• Use Noto Sans KR with system fallbacks — Korean-first, accessibility-first
• Use Deep Ink (#060B11) for primary CTA on white surfaces (default), reserve yellow for brand moments on dark canvas
• Pair Kakao Yellow (#FFEB00) only with Deep Ink text or Olive (#7F7600) iconography — never white text on yellow
• Apply rounded geometry: 12px buttons, 16px cards, 9999px badges
• Use weight (300 / 500) as the primary hierarchy lever — same size, different weight
• Verify 3:1 minimum contrast on every graphic-on-background pairing
• Use soft, single-layer shadows (0px 2px 8px rgba(0,0,0,0.04)) for cards
• Layer surfaces using background tones (#FFFFFF → #F8F9FA → #F2F4F6) before reaching for shadow
• Use the Icon → 2D → 3D graphic hierarchy by surface importance

Don't

• Don't put white text on #FFEB00 — fails contrast, breaks the accessibility commitment
• Don't use Kakao Yellow as the default CTA color on functional UI — it is decorative / ecosystem-anchor, not a primary-action token
• Don't apply display-light weight (200/300) to headings — KakaoPay's tone is friendly-warm, not editorial-cool
• Don't tighten Korean text below -0.2px — Korean glyphs need the breathing room
• Don't use sharp 0–4px radii on cards or buttons — contradicts the stated "둥글고 부드러운" principle
• Don't use multi-layer or colored shadows — KakaoPay's elevation is single-layer soft black
• Don't mix illustration tiers within one screen — pick Icon or 2D or 3D per surface, by information density
• Don't use Kakao Yellow as background for body text — even with Deep Ink, large yellow surfaces fatigue the eye and crowd out information

8. Responsive Behavior

Breakpoints

Touch Targets

• Buttons: 48px (standard), 56px (primary mobile CTA)
• List rows: 56px minimum (52px content + 4px padding)
• Tab bar items: 56px tall + safe-area
• Icon buttons: 44×44px tap target even when icon is 24px

Collapsing Strategy

• Desktop megamenu → mobile drawer (slide-in from right)
• Three-column service grid → two-column → single column
• Hero 3D graphic scales down to 2D variant on mobile
• Bottom sheet replaces centered modal on mobile
• Sticky bottom CTA bar with safe-area insets on all mobile screens

Image Behavior

• Service icons render at 24px / 32px / 40px depending on context
• 2D graphics scale fluidly within a max-width box; never stretch beyond intrinsic resolution
• 3D graphics are PNG with transparency; replaced with 2D variant below mobile breakpoint
• Brand logo: 80px wide on desktop, 64px on mobile, never below 48px

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA (functional UI): Deep Ink (#060B11)
• Primary CTA (brand moment / Kakao ecosystem): Kakao Yellow (#FFEB00) with Deep Ink text
• Background: Pure White (#FFFFFF)
• Surface Soft: #F8F9FA
• Surface Grouped: #F2F4F6
• Heading: #060B11
• Body: #374151
• Caption: #6B7684
• Border: #E5E8EB
• Success: #03B26C
• Error: #F04452
• Warning: #FFA94D
• Info Link: #3182F6
• Brand Dark: #1A1D24
• Brand Accent (text on yellow): Olive #7F7600

Example Component Prompts

• "Create a hero card: white background, 16px radius, 24px padding, 1px solid #EEF0F3 border. Headline 22px Noto Sans KR weight 500, color #060B11, letter-spacing -0.2px. Subtitle 14px weight 300, color #6B7684. Primary CTA: #060B11 background, white text, 16px weight 500, 12px radius, 14px 20px padding, 48px height."
• "Build a Kakao-login button: #FFEB00 background, #060B11 text, 16px weight 700, 12px radius, 48px height, 14px 20px padding. Logo glyph on left at 20px, 8px gap to label. Hover: opacity 0.9."
• "Design a transaction row: 56px height, full-width, 16px h-padding. Left: 32px circle icon. Middle: name 14px weight 500 #060B11 + category 13px weight 300 #6B7684. Right: amount 15px weight 700, #F04452 expense / #03B26C income, right-aligned."
• "Create an inset section: #F8F9FA background, 16px radius, 20px padding, no shadow. Group label 14px weight 500 #060B11. Body 14px weight 400 #374151 line-height 1.50."
• "Design a brand-yellow promotional card: #1A1D24 background, 20px radius, 24px padding. Headline 24px weight 700 #FFFFFF with #FFEB00 word accent. Subtitle 14px weight 400 rgba(255,255,255,0.7). CTA: #FFEB00 bg, #060B11 text, weight 700, 12px radius."

Iteration Guide

1. Always Noto Sans KR with system fallbacks — never substitute a Latin-first display face
2. Use weight 300 / 500 / 700 as hierarchy; weight 400 only for paragraph body
3. Primary CTA defaults to Deep Ink (#060B11) on white surfaces; yellow only when paired with dark text on dark canvas
4. Verify every yellow-adjacent pairing clears 3:1 contrast — this is a stated brand commitment
5. Radius: 8px inputs, 12px buttons, 16px cards, 9999px badges
6. Shadows are single-layer black at ≤0.08 opacity; never tinted, never multi-layer
7. Surface hierarchy: #FFFFFF → #F8F9FA → #F2F4F6 → #1A1D24 for dark brand bands
8. Pick one graphic tier per surface (Icon or 2D or 3D), do not mix
9. Korean and Latin in the same line render in Noto Sans KR; do not split families

---

10. Voice & Tone

KakaoPay speaks like a knowledgeable friend who happens to live inside KakaoTalk — warm, conversational, slightly informal, never officious. Where Toss reads as "calm fiduciary" and Kakao Bank reads as "young but precise bank," KakaoPay's register is closer to "the helpful friend who also handles your bills." The official taglines — "마음 놓고 금융하다" and the English "Effortless finance" — both carry that low-friction promise: the verb is 금융하다 (to do finance) rendered casually, not 금융 서비스 (financial services) rendered formally. The voice rejects two opposite failure modes: the cold institutional Korean of legacy banks (고객님께서는, ~하시기 바랍니다) and the over-friendly emoji-heavy Korean of casual messengers. KakaoPay sits at the middle: polite ~요 endings, exact numerals, no exclamation points on routine actions.

Forbidden phrases. 오류가 발생했습니다 (vague error), 약 ~원 (approximation on money), excessive ~ㅎㅎ/~ㅋㅋ (over-casual on financial context), brand-yellow emoji as ornament, incredible / amazing superlatives in English strings, Oops! in English errors. Toss-style declarative imperatives without ~요 are out of voice — KakaoPay is warmer than Toss by a notch.

11. Brand Narrative

KakaoPay (카카오페이) is operated by Kakao Pay Corp., a subsidiary of Kakao Corp. — the company behind KakaoTalk, the messaging app that effectively is Korean smartphone communication (Kakao Corp service page). KakaoPay launched in 2014 as a money-transfer feature inside KakaoTalk, was spun out into Kakao Pay Corp. in 2017, and listed on KOSPI in November 2021 — at the time, the largest fintech IPO in Korean history. The product's foundational distribution advantage was the same insight that built every Kakao service: the messenger is already open on every Korean phone — make the financial action happen where the conversation already happens.

Where Toss was founded as an explicit rejection of legacy-bank UX (Lee Seung-gun built Viva Republica precisely because Korean banking websites required Active-X plugins and 12-digit account numbers), KakaoPay was founded as an extension of an existing trust relationship. Users were already in KakaoTalk; KakaoPay just added "send money in the chat." That genealogical difference shows up in the design system to this day. Toss's restraint is the restraint of an outsider proving that finance can feel light. KakaoPay's warmth is the warmth of an insider product that inherited 50M+ existing relationships from KakaoTalk — its job is to feel like a natural continuation, not a contrarian alternative.

As of 2025, KakaoPay reports tens of millions of registered users and offers transfer, in-store and online payment, membership and rewards (카카오페이 머니), bill payment, investing (via Kakao Pay Securities), lending, insurance brokerage, and credit scoring — a super-app footprint comparable to Toss's. The company is publicly listed and has an established Information Security Management System (ISMS) certification, a Korean Financial Services Commission license, and ongoing strategic alliances (e.g., the 2025 announcement with HD Hyundai Electric for Kakao Pay Point Integration, surfaced on the Kakao Corp service page).

What KakaoPay refuses: the cold institutional Korean of legacy banks, the high-contrast saturation that makes a fintech app "feel young" but punishes low-vision users, sharp aggressive geometry, and emoji-heavy over-friendliness on money-handling screens. What KakaoPay embraces: Korean-first typography (Noto Sans KR over a proprietary Latin face), three-tier graphic hierarchy (Icon → 2D → 3D), warm-soft palette in service of a stated 3:1 minimum contrast policy, and rounded geometry as a brand-level commitment.

12. Principles

1. Inclusion is the design system. KakaoPay has stated publicly (story.kakaopay.com/225-kakaopay-design/) that "design for everyone" is the brand commitment — not a feature, the brand. The 3:1 minimum contrast on graphics is enforced; legacy yellow palettes that failed it were retired. Accessibility is not a layer applied at the end. It is the constraint that shapes the palette.
2. Warmth, not formality. The voice is ~요 polite-casual, not ~합니다 formal. The geometry is rounded, not orthogonal. The color is warm-soft (Ivory, Wild Willow, Olive) before it is bright. The friendly fintech register is intentional and differentiates KakaoPay from Toss (cool-calm) and Kakao Bank (precise-young).
3. Yellow is anchor, not action. Kakao Yellow #FFEB00 is the brand's ecosystem signal — it tells users "this is part of Kakao." It is not the default CTA color on functional UI, because saturated yellow on white fails accessibility and because the primary action should be the calmest possible target. Yellow gets a moment; it does not get every button.
4. Korean first, Korean always. Noto Sans KR is the primary face, and Korean glyph metrics drive typographic decisions (no aggressive negative tracking, ample line-height). KakaoPay is not a Latin app that ships a Korean translation; it is a Korean app that renders Latin as a courtesy.
5. Hierarchy by weight, not by size. The 14px / 300 vs 14px / 500 pattern is everywhere in the live DOM. Reducing reliance on size differences keeps the page calm and lets density rise in service screens without screaming.
6. Three tiers of graphics, picked by surface. Icon for UI chrome, 2D for empty states and feature cards, 3D for hero and onboarding only. Mixing tiers on a single surface produces visual noise; picking the right tier is itself a design decision.
7. Quiet shadows. Single-layer pure-black at ≤0.08 opacity. Stacking shadows or tinting them adds decoration without earning trust. Background contrast (#FFFFFF → #F8F9FA) does the work of "elevation" wherever possible.
8. Rounded geometry is a brand commitment. "둥글고 부드러운 라인" is the stated principle, and it is held consistently from buttons (12px) to cards (16px) to badges (pill). Sharp 0–4px corners read as competitor brand language; KakaoPay does not borrow it.
9. Density inside, breathing outside. Within a list or transaction row, KakaoPay is dense (56px rows, 4px internal gaps). Between sections, KakaoPay breathes (64px). The rhythm itself is a wayfinding signal.

13. Personas

Personas below are fictional archetypes informed by publicly observable KakaoPay user segments (mass-market Korean smartphone users, KakaoTalk-native communicators, older users brought in through ecosystem familiarity, small-business merchants accepting KakaoPay), not individual people.

현주 (Hyeonju), 33, Suwon. Office worker at a mid-size company. Has had KakaoPay installed since 2018 because her university friends used the KakaoTalk chat-room split-bill feature. Sends money 4–6 times a week (lunch, coffee, monthly rent share with roommate). Has never opened a dedicated banking app to do a transfer — KakaoPay opens directly into the chat where the request came from. Expects the app to feel like a continuation of KakaoTalk, not a separate financial product.

진수 아저씨 (Mr. Jinsu), 58, Daejeon. Runs a 김밥 (kimbap) shop with his wife. His daughter set up KakaoPay for him three years ago specifically so customers could pay by QR code without his shop needing a physical card reader. Uses KakaoPay almost exclusively for receiving payments and checking the daily ledger. Trusts the yellow logo because his customers trust the yellow logo. Would never switch to a payment provider whose brand recognition is lower than Kakao's, regardless of the fees.

서연 (Seoyeon), 24, Seoul. University student, communications major. Has both KakaoPay and Toss installed. Uses Toss for investing (because the investing UI is denser and more powerful) and KakaoPay for daily transfers (because every chat room split-bill goes through KakaoPay). Does not see this as a contradiction — the two apps occupy different mental categories. Notices when a friend's transfer message arrives in a chat and the "Pay" button is one tap away; if she had to open Toss to respond, she'd take three times longer.

민영 어머니 (Mrs. Minyoung), 67, Busan. Retired teacher. Her son installed KakaoPay so she could pay her grandchildren's allowance through the chat. She trusts the yellow logo because she has trusted KakaoTalk for a decade. The 3:1 minimum contrast commitment is invisible to her by design — she only notices that the buttons are large enough to read and the icons don't blur into the background. Has never used the investing surface; the app is correctly invisible to her there because the home screen doesn't push it on her.

14. States

15. Motion & Easing

Durations (named, not raw milliseconds):

Easings:

Explicitly forbidden. No spring with positive overshoot on routine UI. No bounce on payment confirmations. Bounce reads as consumer-app delight; this is money. KakaoPay reserves all "delightful" motion for the success-confirmation graphic, where the 2D check illustration may animate its strokes via SVG path-draw — never via positional overshoot.

Signature motions.

1. Money-moved confirmation. The 2D check graphic draws over motion-slow / ease-soft with stroke-dashoffset animation (0 → full path). The exact amount slides up from y+12px with motion-standard / ease-enter simultaneously. Cross-fade is never used for money values — a flickering amount looks like an integrity bug.
2. Bottom-sheet presentation. Sheets rise from y+40px with motion-standard / ease-soft and synchronized backdrop fade rgba(6,11,17,0) → rgba(6,11,17,0.5). Dismissal uses motion-fast / ease-exit — leaving is faster than arriving (consistent with Toss; the principle is universal in Korean fintech).
3. Inline yellow flash on routine success. Background #FFFBCC for 300ms, fades to default #FFFFFF with ease-standard. This is the one place Kakao Yellow appears as a transient surface tone on functional UI — it earns its brand moment, then disappears.
4. Pull-to-refresh spinner. The yellow wedge in a black circle rotates at linear 1000ms — a steady, non-springy revolution. The black-on-yellow contrast satisfies the 3:1 commitment at small sizes where solid yellow would otherwise fail.
5. Reduce motion. Under prefers-reduced-motion: reduce, all motion-* tokens collapse to motion-instant. The SVG path-draw on the success check becomes an instant full-stroke render. The pull-to-refresh spinner becomes a static yellow-on-black indicator. The app remains fully functional; no kinetic decoration is required to confirm a state.