KB국민은행 — Design Reference

Overview

Visual Theme & Atmosphere

KB국민은행 is a Korean retail and business bank whose public web presence carries a long institutional role into everyday digital banking. KB Financial Group’s history traces the bank’s modern formation to the Kookmin Bank and Housing & Commercial Bank merger, while the group now positions KB Kookmin Bank as a customer-centred financial platform. Its recognisable expression is not a single app kit: the group’s Star-b symbol and yellow accent signal a forward-looking KB identity, and the public bank routes pair that accent sparingly with white fields, dark text, square utility controls, and dense Korean information. Recent first-party reporting places digital-first core-banking modernisation and consultation-friendly terminal redesign alongside this continuity. The result is a practical visual language whose cues of trust, legibility, and institutional continuity should be kept distinct from unobserved native-app or authenticated banking flows.

Key characteristics:

• White #ffffff public canvas with repeated #333333 and #5a5a5a text hierarchy.
• #ffcc00 is a selector-backed public-home header accent and the catalog identity colour; the packet does not establish it as a universal product fill.
• Product routes retain square (0px) chrome in the measured links, utility controls, cards, and online-banking tabs.
• The supplied capture records three product snapshots, one of which repeats the public home URL; it records no interaction transitions.

Primary tasks

• Read through dense lists of banking information on the public site
• Handle everyday digital banking with a long-established Korean bank
• Open a public online-banking page on the bank’s own site

Brand Narrative

KB Financial Group’s history identifies the Kookmin Bank and Housing & Commercial Bank merger as the formation of KB Kookmin Bank into a larger Korean bank serving people and businesses. That institutional origin is useful context for the bank’s broad public role; it is not evidence for a particular current interface component or app flow.

The group’s current mission is “finance that changes the world,” framed around customers’ happier futures and a better world. Its stated vision is to become the most trusted lifetime financial partner through talent and bold innovation. Those are first-party group declarations, retained here as narrative context rather than attributed as an individual customer promise on any captured page.

The 2024 annual report describes customer-centred digital consultation work, core-banking modernisation, and a planned redesign of branch-terminal screens. This gives the current evolution a practical frame: continuity of trust alongside digitisation and more consultation-friendly service. It does not establish completed 2025 UI values or authorise a broader product design system.

Principles

1. Customer-centred decision-making. KB Financial Group names customer focus as a core value. UI implication: present the financial task, its consequence, and the next action without unnecessary promotional detours.
2. Trust and integrity. The group names trust and integrity among its core values and ethics materials. UI implication: distinguish information, confirmation, and commitment; do not use a decorative cue to imply verification.
3. Professional clarity. The group identifies professionalism as a core value. UI implication: favour legible hierarchy and exact labels over informal shorthand in consequential contexts.
4. Innovation in service of convenience. The group links innovation to more convenient and better customer outcomes. UI implication: introduce new digital paths with plain explanation and preserve an understandable fallback path when one is officially specified.
5. Growing with society. The group describes shared growth as a core value. UI implication: avoid narrowing a general public-service message to an unsupported single audience.

Personas

These are stakeholder categories evidenced by first-party group materials, not synthetic personal profiles or research findings.

Individual banking customer

The group mission and customer-centred language address customers broadly. The supplied capture does not identify a task, device, accessibility need, or journey for this category.

Business customer

KB Financial Group’s history describes KB Kookmin Bank as providing services to people and businesses. The packet does not establish business-banking components, so no workflow or control pattern is assigned.

Branch and consultation service user

The 2024 annual report discusses consultation-friendly branch-terminal redesign using customer and employee feedback. It is evolution context only: no branch-terminal screen, role, or interaction was captured for this reference.

Colors

Selector-backed public product-web colours

• Canvas (#ffffff): repeated background on the public home and online-banking routes.
• Foreground (#333333): repeated online-banking text and selected-item colour.
• Foreground Strong (#000000): observed public utility control text and borders.
• Muted (#5a5a5a): repeated public-home navigation and list text.
• Header Accent (#ffcc00): observed on a public-home link; it is local evidence, not a universal button or error colour.
• Link (#0c4ad1): observed public-home inline link treatment.
• Hairline (#dddddd): observed border on two 28px public-home outline links and on the public-home service cards.
• Component-local colours recorded in §4, not promoted to palette roles: #434343 (header and quick-menu links), #929292 (section more links and the 1px border of the square toggle), #bbbbbb and #666666 (footer select-link borders), #333333 footer links; on online banking, #f1efe9 with #777777 text and #c9c9c2 edges (unselected section tab), a 2px #ffa736 top edge (selected section tab), and a #e5e5e5 product-row divider.

Brand-asset boundary

KB국민은행’s CI guide and KB Financial Group’s CI page present the logo/signature system, Star-b, and image-based colour guidance. They confirm the yellow-and-star identity as brand context, but neither supplies a numeric product token for these bank routes. The only numeric yellow promoted here is the supplied computed #ffcc00 home sample. Corporate CI, bank product web, online banking, and any unauthenticated or native mobile screens remain separate evidence domains.

Typography

Evidence classes

Captured hierarchy

Do not render a system fallback as KB금융체. The official corporate font remains a separately documented brand asset until product-use and loadability are independently evidenced.

Layout

The supplied routes were captured at 1440×900. The evidence supports dense public-web information lists, 14px text roles, and small square controls, but it does not establish a grid, breakpoint, responsive rule, authenticated banking layout, or native mobile layout. The third snapshot repeats the public-home URL, so it must not be treated as a second responsive surface.

Elevation & Depth

The selector-backed canonical samples are flat: box-shadow: none and 0px radius on the measured links and online-banking item. This is a local public-web observation, not a universal KB elevation or card system. No shadow-bearing product component was promoted in July. Corrected 2026-09-30: the certificate shortcut link records rgba(0, 0, 0, 0.05) 0px 0px 5px 0px and carries it as a component value (§4); it stays local to that link.

Values kept in prose

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

• shadow.none: none

Motion & Easing

The captured properties include no duration, easing, transition, or animation value, so the bundle establishes no motion, carousel-movement, or reduced-motion rule. Do not derive motion from the carousel structure; add motion only when a source-specific capture or official specification supports it. Corrected 2026-09-30: the July text derived this from the zero interaction kinds and records, which count menu, dialog, and tab expansions only.

Components

Public-home static list items

Outline anchor item

• Background: #ffffff
• Text: #222222 or #000000
• Border: 1px solid #dddddd
• Radius: 0px
• Padding: 0px 10px
• Height: 28px
• Font: 14px / 400 / unresolved computed stack
• Use: Public-home sibling anchors home::[data-omd-capture="14"] and home::[data-omd-capture="15"]; the two observed text values are retained rather than normalised. The structured token maps these anchors to listItem, because the packet establishes no button semantics or transition.

Inline anchor item

• Text: #0c4ad1
• Radius: 0px
• Padding: 0px 8px 0px 9px
• Height: 24px
• Font: 13px / 400 / unresolved computed stack
• Use: Public-home anchor home::[data-omd-capture="67"], mapped to listItem in the structured token because the packet establishes no button semantics or transition.

Online-banking carousel dot

Recorded item (online-selected-list-item)

• Radius: 0px
• Padding: 0px
• Size: 18px × 28px
• State: aria-selected="true" on surface-2::#slick-slide00; its sibling #slick-slide01 (aria-selected="false") records the same captured values, so the selected look is not among the captured properties.
• Use: a carousel pagination dot (li, role presentation) in ul.slick-dots (role tablist), mapped to listItem.
• Corrected 2026-09-30: July recorded #333333 text and 14px / 400 / 14px type as a selected list item. Those are the page text inherited by the dot’s container; its child button (surface-2::[data-omd-capture="12"]) records browser-default 13.3333px type behind an 18px left padding on an 18px-wide box, so no label style is claimed.

Public-home header and quick menu

Header menu link (header-menu-link)

• Text: #434343; the first three links (home::[data-omd-capture="4"] to "6") record #000000 with the same type
• Padding: 0px 8px (24px right padding on "11", "12")
• Height: 30px
• Font: 14px / 400 / 30px, tracking -1px, unresolved computed stack
• Use: home::[data-omd-capture="7"] to "13"; "13" is a 30px × 30px link whose label is pushed out by 30px left padding

Quick menu link (home-quick-link)

• Text: #000000
• Padding: 0px 19px
• Height: 42px
• Font: 17px / 400 / 42px, tracking -1px
• Row variant: the five links after them ("26" to "30") record #434343, 16px / 400 / 42px, tracking -2px, and 0px 24px padding.
• Use: home::[data-omd-capture="23"] to "25" (a.q1, a.q2)

Top notice link (top-banner-link): #ffcc00 14px / 400 / 21px, tracking -0.5px, 165px × 21px, home::[data-omd-capture="0"]. The notice also holds a checkbox ("1") and a #ffffff 12px / 400 / 18px close link ("2", a.nClose); the notice background is not among the captured elements.

Public-home cards and shortcuts

Certificate shortcut (cert-shortcut-card)

• Background: rgba(255, 255, 255, 0.6)
• Border: 3px #ffffff
• Padding: 9px 17px
• Size: 134px × 110px
• Shadow: rgba(0, 0, 0, 0.05) 0px 0px 5px 0px
• Label: not claimed; its #5a5a5a 14px / 400 / 21px equals the page body text.
• Use: home::[data-omd-capture="22"] (a.go_cert), over the hero banner

Service card (service-card)

• Background: #ffffff
• Border: 1px #dddddd
• Radius: 0px
• Size: 310px × 180px
• Padding: 24px 28px on the full-card link inside
• Label: not claimed; the link records the page body text.
• Use: three cards, links home::[data-omd-capture="39"] to "41"

Section more link (section-more-link): #929292 12px / 400 / 18px, padding 0px 14px 0px 0px, 56px × 18px, beside section headings; home::[data-omd-capture="34"], "38", "53" (a.sub).

Icon service links (quick-service-link, app-service-link): #333333 labels on 78px × 74px links at 16px / 400 / 24px ("45" to "52"), and on 118px × 92px links at 13px / 700 / 19.5px under a 20px / 700 heading ("60" to "63"). The icons are not among the captured properties.

Square toggle (ui-toggle-button): background #ffffff, 1px #929292 border, 0px radius, 14px × 14px; its four-character label is pushed outside the box by 12px left padding, and no aria-checked is recorded. home::[data-omd-capture="59"] (button.ui-toggle).

Public-home footer

Footer link (footer-link): #333333 13px / 400 / 24px, tracking -1px, padding 0px 8px 0px 9px; thirteen of the fourteen links home::[data-omd-capture="64"] to "77". The fourteenth ("67", a.fot_p_txt) is the #0c4ad1 inline item above.

Footer select link (footer-select-link): transparent, #5a5a5a 13px / 400 / 17px, border 1px #bbbbbb, padding 8px 60px 7px 10px, 172px × 37px ("81"); "79" has 8px 30px 7px 10px padding and "78" a 1px #666666 border.

Online-banking section tab and product row

Section tab (online-section-tab)

• Background: #f1efe9
• Text: #777777
• Border: 1px #c9c9c2 on the top and bottom edges ("16" also has the right edge)
• Padding: 0px 10px
• Size: 467px × 55px
• Font: 14px / 400 / 17.5px, tracking -1px, operating-system stack
• Selected: the tab whose li has class on (surface-2::[data-omd-capture="15"]) records background #ffffff, #000000 14px / 700 text, a 2px #ffa736 top border, and a 1px #c9c9c2 right border. No aria-selected is recorded.
• Use: surface-2::[data-omd-capture="16"], "17" (a.tabLink)

Product row (online-product-row): a full-width link with 19px 5px 16px padding, 124px high, in li.pro3; the following row records a 1px #e5e5e5 top border. The link records the page text colour #333333 with its li’s 22.4px line height, so no label style is claimed. surface-2::[data-omd-capture="18"].

How states were read

The bundle holds no ::state-* frame for any KB국민은행 element, so hover, pressed, and focus values are not declared, and no disabled, menu, dialog, toast, validation, error, loading, responsive, authenticated-product, or native-app variant was observed. The one selected variant is the online-banking section tab. Corrected 2026-09-30: the July text gave interactionCount: 0 and interactionKinds: 0 as the reason; those count menu, dialog, and tab expansions only.

States

No product state specification is inferred from this packet, and the bundle holds no ::state-* frame for any element; the only recorded selection is the online-banking section tab in §4. The state headings below preserve the boundary for future source-backed additions; they do not prescribe UI values or microcopy.

Do’s and Don’ts

Do

• Preserve the evidence boundary: use public-web values only on the specific public-web contexts they describe.
• Keep the documented 14px body/list hierarchy and square link/item chrome when recreating a measured sibling.
• Treat #ffcc00 as a sparse observed header accent and retain #0c4ad1 as the separate observed inline-link colour.
• Name KB금융체 as a corporate brand asset only when no loaded product evidence is available.

Don’t

• Don’t turn the group CI yellow, Star-b asset, or corporate typography into a universal online-banking token.
• Don’t substitute Malgun Gothic, Roboto, or a system stack for KB금융체 while labelling it as KB’s proprietary font.
• Don’t invent rounded cards, filled primary buttons, app navigation, or state transitions; the capture holds no state frame for any element.
• Don’t blend corporate, marketing, public web, online banking, and authenticated/native surfaces into one generic banking system.

Voice & Tone

The applicable first-party group-level language is customer-centred, trustworthy, professional, and innovation-oriented. It is context for KB국민은행 as a group subsidiary, not an extracted bank-product copy deck.

Illustrative, not extracted product copy:

• “확인할 내용을 먼저 보여드립니다.” (illustrative; customer-centred clarity)
• “필요한 금융 정보를 차분하게 안내합니다.” (illustrative; trust/professionalism)
• “변경 사항과 다음 단계를 함께 확인하세요.” (illustrative; clear action sequence)

Governance

Accessibility & Content

The capture shows compact 13–14px public text and square utility geometry; it does not provide keyboard, focus, contrast-ratio, error-message, or screen-reader behaviour. Preserve meaningful link text and visible text hierarchy where a captured component is reused, but do not claim WCAG conformance or a KB accessibility contract from the packet. Any new focus, error, or disabled treatment requires source-specific evidence rather than visual extrapolation.

Reference Scope & Evidence

Known Gaps

• Contrast, header-menu-link. Text #434343 on #00000000 measures 2.12:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, home-quick-link. 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, quick-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.
• Contrast, app-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.
• Contrast, footer-select-link. Text #5a5a5a on #00000000 measures 3.04:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, online-section-tab. Text #777777 on #f1efe9 measures 3.89:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.