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

Overview

Visual Theme & Atmosphere

KakaoBank is an internet bank that presents financial services as part of ordinary mobile life. Its public story spans deposits, savings, loans, investment, foreign exchange, cards, business banking, youth products, and newer AI-led service exploration. The corporate site expresses that breadth with unusually little banking ornament: a white canvas, black type, pale-gray sections, very large Korean headings, and only selective use of the protected KakaoBank Yellow. The result feels digitally accessible while retaining the clarity and restraint expected from a regulated financial institution.

That restraint is the distinctive system. The official brand resource defines KakaoBank Yellow as #FFE300, alongside black, white, and a narrow neutral palette, and warns against nearby substitute yellows. Yet the current public corporate surface is mostly monochrome. Yellow identifies KakaoBank; it is not proof that every banking CTA, card, success state, or app control uses yellow. The current product page organizes the catalog through large editorial sections and simple service tabs, while the brand-resource page explains the symbol, wordmark, and color system as protected identity assets.

Pretendard Variable carries all visible public UI and editorial roles. It loaded from KakaoBank’s own domain and appeared across 645 elements, from the 90px home hero to 14px navigation and 16px body text. Brand character comes from scale, disciplined yellow, and product imagery rather than a proprietary display face.

Key Characteristics:

• Official single-yellow identity: #FFE300, not neighboring Kakao-family yellows
• White and pale-gray corporate canvas with black-first typography
• Pretendard Variable loaded across every observed text role
• 90px/800 home hero and 42px/700 service-page title
• Flat public components with 0px navigation/tab geometry and 6px black actions
• Explicit separation between public corporate evidence and native banking-product UI

Primary tasks

• Compare everyday banking services across deposits, loans, and cards
• Browse the service catalog one category tab at a time
• Look into products for youth, business, or investment needs
• Find official company, ESG, or investor information about the bank

Brand Narrative

KakaoBank positions banking as a digital product embedded in everyday routines. The official symbol explains a bank centered on the individual, while the service catalog shows continuous expansion from basic accounts into youth, business, investment, global, and AI-related offerings. The visual identity balances Kakao-family recognition with the restraint expected of a bank: one unmistakable yellow, then a large field of neutral structure. This system allows the company to speak both as a consumer product and as a financial institution. Large Korean headings make service categories approachable; monochrome navigation and pale-gray sections keep attention on information rather than decoration. The protected wordmark and exact yellow establish ownership, but they do not dictate the geometry of native transfers, account cards, or compliance flows. Those product layers require their own evidence.

Principles

1. Put the individual at the center. Organize information around the user’s task, not the bank’s internal structure.
2. Use yellow with discipline. Exact brand recognition is stronger than broad decorative use.
3. Make finance readable. Strong Korean typography and generous rhythm should reduce cognitive load.
4. Do not confuse brand with product evidence. A CI guide cannot authorize native transfer controls.

Personas

First-party material establishes task contexts only:

• An individual comparing everyday banking services.
• A young user or guardian exploring KakaoBank mini.
• A business owner reviewing business banking options.
• A visitor seeking official company, ESG, investor, or brand information.

Project-specific names, ages, balances, credit profiles, income, risk tolerance, and success metrics are intentionally unspecified and must come from the product brief.

Colors

• KakaoBank Yellow (#ffe300): official primary identity color and protected brand specification.
• Canvas (#ffffff) and foreground (#000000): dominant current public pairing.
• Secondary (#888888): repeated supporting navigation and footer text.
• Body gray (#444444): service and brand-resource explanatory text.
• Section surface (#f7f7f7): current quiet public section fill.
• Divider (#e6e6e6): public service and brand-spec boundaries.

Earlier #E02000, #0FBE6C, #FF9800, input, placeholder, and native state roles are not retained. The live public site exposed #007AFF on small web controls, but its semantic product role was not clear enough to promote.

The keyboard focus ring is a different blue, #007bff (rgb(0, 123, 255)), drawn as a 2px solid outline on every control probed on 2026-09-29 (§14). It is recorded in each component’s focus state, not as a palette role: it is neither KakaoBank Yellow nor part of the official brand resource.

Typography

Font evidence boundary

Brand face, substitute, safe default

• Brand face: Pretendard Variable. Its author publishes it under the SIL Open Font License 1.1 (github.com/orioncactus/pretendard), and KakaoBank serves the public v1.3.9 variable file unmodified, so it can be installed as itself.
• Substitute: none needed; the brand face is installable.
• Safe default (not the brand face): none listed; install Pretendard Variable itself.

Layout

• Use large type and generous vertical rhythm to explain complex financial categories.
• Keep public navigation and tabs geometrically flat; hierarchy comes from placement and weight.
• Use #f7f7f7 for section-level grouping instead of elevated cards.
• Apply KakaoBank Yellow at verified identity moments, not as ambient chrome.
• Keep official brand-resource layouts separate from banking-task layouts.

Responsive Behavior

The public routes preserve their typographic hierarchy and section grouping while content reflows. Exact mobile-app navigation, banking-task breakpoints, device safe areas, and native keyboard behavior remain unresolved.

Elevation & Depth

The promoted public system is shadow-free. Separation comes from white/pale-gray surfaces, #e6e6e6 rules, and typographic scale. No sheet, card, or focus shadow is promoted for native banking UI. On the public site, keyboard focus is an outline, not a shadow (§14).

Motion & Easing

No reusable duration or easing curve is promoted. Public interaction capture establishes state presence, not native banking motion behavior. Per-control transitions read on 2026-09-29: the top navigation link all 0.4s ease-in-out, the two black buttons all 0.35s ease, the service category pills all 0.5s ease; the link rows and the accordion trigger change instantly (0s). These are individual observations, not a duration scale.

Components

Current public components

Rest values come from the 2026-07-12 capture unless marked. Hover, pressed and keyboard focus come from a live probe on 2026-09-29 (real :hover, :active, and Tab to :focus-visible). Every control probed draws the same authored keyboard ring, outline: 2px solid #007bff with a 2px offset.

Top navigation

• Transparent / black, 0px radius, 62px height, 0 20px
• Pretendard Variable 14px/600
• Hover and pressed: the text settles at #444444 after a 0.4s ease-in-out colour transition; pressed equals hover
• Focus: outline 2px solid #007bff, offset 2px; text and background unchanged
• The July capture’s near-black hover, pressed and focus samples were early frames of that transition, not states (§14)

Service-category accordion trigger

• Transparent / black, 1px #e6e6e6 bottom rule
• 0px radius, 62px height, 16px 0
• Label: a 20px/700 heading inside the button (measured 2026-09-29); the button’s own computed font is 16px/400
• A button with aria-expanded and no role=tab: it opens a category panel. It was typed as a tab until 2026-09-29; the token name service-tab is kept
• Hover and pressed: no change among the compared properties (measured 2026-09-29)
• Focus: outline 2px solid #007bff, offset 2px
• The expanded state was not opened

Corporate black action

• Black / white, 6px radius, 42px height, 9.5px 18px
• Pretendard Variable 15px/600
• Hover and pressed: the fill settles at #444444 after a 0.35s transition; pressed equals hover
• Focus: outline 2px solid #007bff, offset 2px

Brand-resource download

• Black / white, 6px radius, 43px height, 10px 16px 10px 20px
• Label: 15px/600 (the visible span, measured 2026-09-29); the anchor’s own computed font is 16px/400
• Hover and pressed: the fill settles at #444444; pressed equals hover
• Focus: outline 2px solid #007bff, offset 2px

Brand specification row

• Transparent / black, 1px #e6e6e6 top rule
• 10px 0, 16px/400/24px
• Not interactive; not probed

Link rows, pills and page furniture (captured 2026-07-12; states measured 2026-09-29 where noted)

Link row

• #f7f7f7 fill, 16px radius, 22px 24px, 72px tall; six rows, 672px wide, on the home page
• Label: #000000, a 16px/600 heading (measured 2026-09-29); the anchor’s own computed font is 16px/400
• Hover and pressed: the label turns #444444; the fill stays #f7f7f7, with no lift or shadow
• Focus: outline 2px solid #007bff, offset 2px
• Use: 금융기술연구소 and the other related-service rows; opens in a new window

Service category pill

• Transparent, text #222222, 50px radius, 10px 22px, 38px tall, 16px/600, -0.16px tracking
• The selected pill reads text #ffffff on a transparent background of its own; the black fill behind it is painted by another element that was not identified, so no selected fill is declared
• Hover and pressed: no change among the compared properties (measured 2026-09-29)
• Focus: outline 2px solid #007bff, offset 2px
• Use: sticky in-page pills on the service page (청소년 …)

Brand section pill

• Transparent, text #000000, 30px radius, 8px 17px, 40px tall, 16px/600, -0.16px tracking
• Selected: fill #000000, text #ffffff
• No pointer-state sample
• Use: brand-resource section pills (로고, 앱 아이콘, 색상, 미디어 패키지); the 2026-09-29 survey reads the same four

Footer link

• Text #888888, 14px/500, 16px tall, no fill
• No pointer-state sample
• Use: footer related-service and channel links (카카오뱅크 AD, 금융기술연구소, 기술블로그, 인스타그램 …), 18 on each captured page

Back-to-top button

• #e6e6e6 fill, 50% radius, 52px × 52px, icon only
• No pointer-state sample
• Use: the floating 맨 위로 이동 button on all three captured pages

Yellow native CTAs, account cards, transfer inputs, status badges, notifications, bottom sheets, and app tabs are intentionally absent until a current inspectable native-product path establishes them.

States

A live probe on 2026-09-29 measured hover, pressed and keyboard focus on six controls across the home, service and brand-resource pages (real :hover, :active, and Tab to :focus-visible).

• Keyboard focus: all six draw the same authored ring, outline: 2px solid #007bff, offset 2px, and nothing else changes. outline-style is solid, not the browser’s auto. The value matches a common framework default, but the site’s stylesheet was not read, so the ring is recorded per component and not promoted to a token.
• Hover and pressed: the top navigation text and the link-row label settle at #444444; the two black buttons’ fill settles at #444444. Pressed equals hover on all four.
• The accordion trigger and the service category pill: no change among the compared properties on hover or press (measured 2026-09-29).

Correction (2026-09-29): this section previously said the top navigation exposed focus, hover and pressed states, and the reference declared pressed #141414 and focus #131313 from the 2026-07-12 capture. The link has a 0.4s ease-in-out colour transition from #000000 to #444444. A frame sample during a live hover passes #141414 at 363 ms, and both July values lie on the grey line between rest and the settled colour (the July hover sample read #141414 as well). They were early transition frames, not states; the settled values are above.

One current service control exposed a disabled state in the July capture, but its semantic role was insufficient for promotion. Native loading, empty, transfer success, transfer failure, identity verification, and destructive states remain absent.

Do’s and Don’ts

Do

• Use exact #FFE300 when the role is an official KakaoBank identity role.
• Preserve Pretendard Variable’s observed Korean-first metrics and tracking.
• Keep the corporate web surface restrained and largely monochrome.
• Distinguish official identity, public service marketing, and native banking evidence.

Don’t

• Do not substitute #FEE500, #FAE100, or another Kakao-family yellow.
• Do not infer a Yellow CTA or transfer component from a brand swatch.
• Do not fabricate app error, success, account, badge, or sheet components.
• Do not turn the public corporate site into a Kakao Friends-heavy app mockup.

Voice & Tone

KakaoBank’s public voice makes finance feel ordinary and useful. It favors direct Korean nouns and verbs, names the service category clearly, and explains benefits without institutional ceremony. Service descriptions should state who a product is for, what financial task it supports, and what the visitor can learn next. Corporate and brand material may be more declarative, while compliance or Help content must stay precise and unambiguous. Avoid playful copy where money movement, identity, or risk is involved. Do not invent rates, user counts, or performance claims.

Agent Prompt Guide

Build a restrained Korean financial information surface with a white canvas, black-first type, pale #f7f7f7 section fills, Pretendard Variable, very large bold headings, flat navigation, and 6px black public actions. Use #FFE300 only for verified KakaoBank identity roles and omit unverified native banking components.

Governance

Known Gaps

• Contrast, top-navigation. Text #000000 on #00000000 measures 1.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, service-tab. Text #000000 on #00000000 measures 1.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, brand-spec-row. Text #000000 on #00000000 measures 1.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, service-pill-tab. Text #222222 on #00000000 measures 1.32:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, brand-section-tab. Text #000000 on #00000000 measures 1.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.