KB페이 DESIGN.md

Design System Inspiration of KB Pay

Overview

Visual Theme & Atmosphere

KB Pay (KB페이) is KB국민카드's mobile payment service. Its own introduction page describes it as a service for paying quickly and easily anywhere in Korea or abroad with cards, points and other payment methods, and says the whole range of KB국민카드 services is available inside the KB Pay app. Payment methods registered in KB Pay, family and corporate cards included, can be used at online and offline merchants at home and abroad, and partnerships add financial and membership services. The page organises the app into six areas, each with a one-line promise: 홈 (recommended content), 카드(듀얼홈) (card usage at a glance), 혜택 (new benefits and events every day), 결제 (paying anywhere with KB Pay), 금융 (financial products that fit) and 쇼핑/여행 (shopping through to travel). Its tagline is "한번에, 한손에, 한눈에 KB Pay", and the app has its own customer centre (☎1644-9311).

On the web KB Pay lives inside the KB국민카드 site, and it looks it. The four KB Pay pages share one header, one set of self-hosted KB typefaces and one footer with the card-company home. The KB Pay pages themselves are almost monochrome: white, 87%-black type, KBFGDisplayM titles with -1px tracking, black 3px underline tabs, outlined buttons with 3px to 6px corners, and a grey #ebebeb hover fill. The one saturated colour of the site is its action yellow: #ffcc00 fills the 로그인 button in the login panel of the KB국민카드 home, with #000000 text on a 4px radius. The card-company home also carries the site's soft depth — white 16px cards with a single rgba(0, 0, 0, 0.16) 0px 1px 3px shadow — and pale #f9fafc guide boxes.

Key Characteristics:

• One action yellow, #ffcc00, on the site's filled primary button; the KB Pay pages themselves carry no filled action
• KBFGDisplayM for titles (32px, 24px and 18px at weight 400 with -1px tracking) and KBFGText for everything else
• Body text in rgba(0, 0, 0, 0.87); headings in solid #151515; greys #333333, #444444 and #666666
• Tabs marked by black underlines (3px on page tabs) and outlined segments (2px when current)
• Small radii on controls (3px, 4px, 6px) and 16px on cards; a single light shadow on home cards

Primary tasks

• Learn what KB Pay does before installing the app.
• Check how to use KB Pay and which payment methods it accepts.
• Find out where KB Pay is accepted.
• Sign in to the KB국민카드 site from the header.
• Reach KB Pay customer support.

Brand Narrative

KB Pay is presented by KB국민카드, whose site calls itself "국민의 행복생활 파트너 KB국민카드", as the app that gathers the card company's services in one place: payment with cards and points at home and abroad, card usage at a glance through the 듀얼홈 view, daily benefits and events, financial products, and shopping and travel. Family and corporate cards can be registered alongside personal ones, and partnerships extend it into financial and membership services. The web pages that explain it sit in the 결제서비스 section of card.kbcard.com, with separate pages for introduction, usage, sign-up and merchants.

Principles

1. One saturated action colour. UI implication: the only filled control on the captured pages is the yellow primary button.
2. Titles in the house display face. UI implication: KBFGDisplayM for page titles and headings; KBFGText for everything else.
3. State by line and weight. UI implication: underlines, outlines and weight 600 mark the current item instead of colour.
4. Plain explanation. UI implication: information pages lead with a one-line promise and follow with exact conditions.

Personas

Personas below are fictional archetypes informed by the audiences the KB Pay pages address (KB국민카드 cardholders, family-card and corporate-card users, shoppers and travellers), not individual people.

이지원, 22, 부산. A student with her first KB국민카드 who pays at convenience stores and on the subway with the app.

박민준, 38, 서울. Manages family cards and checks card usage in the 듀얼홈 view.

김순희, 63, 전주. Moved to the app at her children's suggestion and calls the app customer centre when something is unclear.

Colors

Every token below was read on 2026-09-30 from four public, logged-out pages of card.kbcard.com: KB Pay 소개, KB Pay 이용, KB Pay 가맹점 and the KB국민카드 home. All four are one evidence domain, the KB국민카드 website: the header's audience switches, utility links and 로그인 outline compute the same colours, sizes and paddings on every page, and the same KBFG font files load on each. The KB Pay app was not captured and no app value is claimed.

Primary

• KB Yellow (#ffcc00): The fill of 로그인 in the login panel of the KB국민카드 home (344 × 48, #000000 label, 4px radius, 18px / 600 KBFGText). It is the primary because it is the only filled action on the four captured pages: the KB Pay pages render no filled control of their own and use the site's shared header and action system, whose filled primary action is this yellow. The probe found no hover or pressed change on it.
• On Primary (#000000): The solid black label on the yellow button.

Text

• Heading (#151515): Section headings on the KB Pay pages (서비스 특징, 이용전 유의사항).
• Body (rgba(0, 0, 0, 0.87)): The document text colour, page titles, tabs and navigation. It is an alpha colour, so it stays in prose and component fields rather than the colour tokens.
• Text (#333333): The header 로그인 label, the audience switches, the KB Pay tagline and sub-headings.
• Footer Text (#444444): Footer links.
• Muted (#666666): Utility links in the top bar, the copyright line and the family-site box.

Neutral & Surface

• White (#ffffff): The canvas, the header 로그인 button, segment tabs and home cards.
• Hover Fill (#ebebeb): The header 로그인 button's hover and pressed fill.
• Surface (#f9fafc): Guide and notice boxes on the KB국민카드 home.
• Border (#aaaaaa): The header 로그인 outline.
• Select Border (#c2c2c2): The footer family-site box.
• Grid Line (#e1e1e1): The merchant logo grid on KB Pay 가맹점.

Brand assets, not tokens

• The KB국민카드 logo and the phone illustrations on the KB Pay pages were not measured; no logo colour is claimed. The Partial record's #ffe066 nav bar, #faeaad breadcrumb, #614cc2 menu labels and #776c61 skip link were not rendered on any captured page (the labels live in the closed mega-menu).

Typography

Font Family

• Live surface use: KBFGText (584 observed uses) and KBFGDisplayM (17), both loaded / high, self-hosted by KB국민카드 from https://card.kbcard.com/CMN/common/fonts/ (KBFGTextL_subset.woff2, KBFGTextM_subset.woff2, KBFGDisplayM_subset.woff2, with WOFF fallbacks). KBFGDisplayM sets page titles, section headings and sub-headings, and the hero titles of the card home; KBFGText sets body, navigation, buttons and tabs. Footer links name KBFGText, KBFGTextM.
• Official distributed font assets: the files are subset copies served by the card site; no distribution page or licence was opened this session, so none is claimed. The "KBFG" prefix points to KB Financial Group, but no page opened confirms who owns or licenses the faces.
• Official product use: no KB page opened names these typefaces, so no statement of official use is made.
• Declared only (no visible use): none observed. The fixed "top" button computes Arial, a system face, in 3 uses.
• Unresolved: none.

Hierarchy

Principles

• Display face for titles only: KBFGDisplayM at weight 400 with -1px tracking and a line height equal to the size; weight 600 appears only on the card home's hero slides.
• Weight marks the current item: audience switches, segment tabs and merchant categories go from 400 to 600 when current or hovered.
• Dense 15px body: navigation, body and card copy all sit at 15px.

Layout

Spacing System

• Observed paddings rather than a declared scale: navigation 27px vertical in an 80px row, top bar 18px to 22px in a 60px row, page tabs 8px, segment tabs 12px 24px 10px, guide cards 20px 32px, notice boxes 16px 32px, finance tiles 24px top and 32px left.

Grid & Container

• The KB Pay pages use a 960px content column (title, tabs and lists all measure 960px); the card home uses 1080px panels.
• KB Pay 가맹점 lays merchant logos in 192 × 149 cells, five to a row.

Whitespace Philosophy

• The KB Pay pages are information pages: stacked sections under 24px headings, bulleted notes and image-led feature rows.

Border Radius Scale

• 0px: navigation, page tabs, family-site box and grid cells
• 3px: header 로그인
• 4px: primary button, small outlined buttons, notice box
• 6px: segment tabs
• 16px: home cards and guide links

Responsive Behavior

Breakpoints

All four pages were captured at 1440px wide only; no breakpoint was measured.

Touch Targets

• Primary button 48px tall, header 로그인 42px, page tabs 64px, segment tabs 48px, navigation row 80px.

Collapsing Strategy

Not measured.

Image Behavior

Not measured.

Elevation & Depth

Motion & Easing

The probe read transition: all 0s on the yellow primary button; its hover and pressed states show no change. No other transition was read, and no durations or easing curves are declared.

Components

Buttons

Primary button (KB Yellow)

• Background: #ffcc00
• Text: #000000
• Radius: 4px
• Padding: 0px 16px
• Height: 48px
• Font: 18px / 600 KBFGText
• State: the probe found no hover or pressed change (transition all 0s)
• Use: 로그인 in the login panel of the KB국민카드 home

Header 로그인

• Background: #ffffff
• Text: #333333
• Border: 1px solid #aaaaaa
• Radius: 3px
• Height: 42px
• Font: 14px / 400 KBFGText
• Hover: background #ebebeb
• Pressed: background #ebebeb
• Use: header of every captured page

Small outlined button

• Background: #ffffff
• Text: rgba(0, 0, 0, 0.87)
• Border: 1px solid rgba(0, 0, 0, 0.6)
• Radius: 4px
• Padding: 0px 10px
• Height: 32px
• Font: 13px / 400 KBFGText
• Use: links inside the KB Pay 이용 guide

Family-site box

• Text: #666666
• Border: 1px solid #c2c2c2
• Radius: 0px
• Padding: 0px 25px 0px 15px
• Height: 34px
• Font: 14px / 400 KBFGText
• Use: footer of every captured page

Tabs & Navigation

Page tabs

• Text: rgba(0, 0, 0, 0.87)
• Padding: 8px
• Height: 64px
• Font: 15px / 400 KBFGText
• Selected: 3px bottom border rgba(0, 0, 0, 0.87)
• Hover: the same 3px bottom border appears
• Use: KB Pay 소개, 이용, 가입, 가맹점

Segment tabs

• Background: #ffffff
• Text: rgba(0, 0, 0, 0.87)
• Border: 1px solid rgba(0, 0, 0, 0.16)
• Radius: 6px
• Padding: 12px 24px 10px
• Height: 48px
• Font: 15px / 400 KBFGText
• Selected: 2px solid rgba(0, 0, 0, 0.87) border, weight 600
• Hover: 2px solid rgba(0, 0, 0, 0.87) border, weight 600
• Use: second-level tabs on KB Pay 이용

Main navigation

• Text: rgba(0, 0, 0, 0.87)
• Padding: 27px 0px
• Height: 80px
• Font: 15px / 400 KBFGText
• Use: My KB, 혜택, 금융, 카드, 서비스, 라이프

Audience switches

• Background: #ffffff
• Text: #333333
• Padding: 18px 0px 22px
• Height: 60px
• Font: 14px / 400 KBFGText
• Selected: weight 600
• Hover: weight 600
• Use: the three switches at the left of the top bar

Merchant categories

• Text: rgba(0, 0, 0, 0.87)
• Height: 24px
• Font: 17px / 400 KBFGText
• Selected: weight 600 with a 1px bottom border
• Hover: weight 600 with a 1px bottom border
• Use: category links on KB Pay 가맹점

Cards

Recommendation card

• Background: #ffffff
• Radius: 16px
• Shadow: rgba(0, 0, 0, 0.16) 0px 1px 3px 0px
• Use: recommendation panel on the KB국민카드 home

Finance menu card

• Background: #ffffff
• Radius: 16px
• Shadow: rgba(0, 0, 0, 0.16) 0px 1px 3px 0px
• Padding: 24px 0px 0px 32px
• Use: finance menu tiles on the KB국민카드 home

Guide card

• Background: #f9fafc
• Radius: 16px
• Padding: 20px 32px
• Use: customer guide link on the KB국민카드 home

Notice box

• Background: #f9fafc
• Radius: 4px
• Padding: 16px 32px
• Use: notice box on the KB국민카드 home

Merchant cell

• Border: 1px solid #e1e1e1
• Use: merchant logo grid on KB Pay 가맹점, 192 × 149

---

Verified: 2026-09-30 (deterministic collector capture of four public, logged-out pages of card.kbcard.com plus a fixed keyboard-probe state read and first-party context) Tier 1 sources: https://card.kbcard.com/SVC/DVIEW/HSCMCXPRISVC0127 ; https://card.kbcard.com/SVC/DVIEW/HSCMCXPRISVC0128 ; https://card.kbcard.com/SVC/DVIEW/HSCMCXPRISVC0130 ; https://card.kbcard.com/CMN/DVIEW/HOAMCXPRIZZC0002 Tier 2 sources: getdesign.md/kbpay (HTTP 200, 30,781 bytes; the name does not appear in the response) and styles.refero.design/?q=kb%20pay (HTTP 200; "kb pay" occurs 2 times, not inspected further), requested 2026-09-30; no Tier 2 value used Conflicts unresolved: none

States

Live state probe, 2026-10-16 (https://card.kbcard.com/CMN/DVIEW/HOAMCXPRIZZC0002), primary-button: pressed — no visible change (measured 2026-10-16).

Do's and Don'ts

Do

• Use #ffcc00 with a #000000 label for the one filled primary action
• Set titles in KBFGDisplayM at weight 400 with -1px tracking and everything else in KBFGText
• Mark the current tab with a black underline or a 2px black outline and weight 600
• Keep control corners small (3px to 6px) and card corners at 16px
• Use the single light card shadow only on the card-home tiles

Don't

• Don't spread the yellow to tabs, labels or backgrounds; none of the captured pages does
• Don't use the Partial record's purple #614cc2 or yellow tints; they do not render on the captured pages
• Don't substitute another typeface for KBFGText or KBFGDisplayM and present it as KB's
• Don't add a brand focus ring; focus was not measured

Voice & Tone

The KB Pay pages speak in short, parallel promises and plain explanatory sentences.

Voice samples (verbatim from the KB Pay 소개 page, opened 2026-09-30):

• "한번에, 한손에, 한눈에 KB Pay"
• "나에게 꼭 맞는 콘텐츠 추천" (홈)
• "한눈에 확인하는 카드이용정보" (카드(듀얼홈))
• "어디서든 간편하게 KB Pay로 결제" (결제)

Agent Prompt Guide

Quick Color Reference

• Primary action: #ffcc00 with #000000 text
• Text: rgba(0, 0, 0, 0.87); headings #151515; greys #333333, #444444, #666666
• Hover fill: #ebebeb; borders #aaaaaa, #c2c2c2, #e1e1e1
• Surface: #ffffff, tint #f9fafc

Example Component Prompts

• "Primary button: #ffcc00 background, #000000 label '로그인' in KBFGText 18px weight 600, 48px tall, 0 16px padding, 4px radius, no hover change."
• "Page tabs: KBFGText 15px in rgba(0, 0, 0, 0.87), 64px tall; the current tab carries a 3px black bottom border."
• "Card-home tile: white, 16px radius, shadow rgba(0, 0, 0, 0.16) 0 1px 3px, 24px top and 32px left padding."

Iteration Guide

1. Yellow #ffcc00 is for the single filled primary action
2. KBFGDisplayM titles, KBFGText for the rest
3. Current state = black underline or outline plus weight 600
4. Corners 3px to 6px on controls, 16px on cards