kb-bank-styles

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

KB Bank Style Guide (KB국민은행 / KB스타뱅킹 UI)

KB Bank Style Guide (KB国民银行 / KB Star Banking UI)

이 스킬은 KB금융그룹 / KB국민은행 / KB스타뱅킹의 시각 언어를 토대로 한국형 인터넷뱅킹 UI를 빠르게 구축하기 위한 가이드와 토큰·컴포넌트 모음이다.

本工具是基于KB金融集团/KB国民银行/KB Star Banking的视觉语言，用于快速搭建韩国互联网银行UI的指南、token及组件集合。

1. 디자인 정체성

1. 设计调性

요소	톤
인상	신뢰감 있고 명료한 / 정보 밀도가 높지만 답답하지 않은
분위기	화이트 캔버스 + 강한 옐로우 포인트 + 진한 본문 그레이
형태	큰 라운딩(12–20px), 옅은 그림자, 카드 단위 정보 그룹화
모션	과하지 않게. 누름 상태(scale 0.98) + 토글 트랜지션 위주
보이스	"○○님, ~하세요/했어요" 친근한 존댓말. 숫자는 천단위 콤마 + "원"

KB의 시각적 코어는 단 두 가지다:

스타-비(Star-b) 옐로우 — 단일 강한 액센트
두꺼운 본문 그레이/블랙 — 가독 중심 정보

→ 이 두 개를 깨지 않고 보조 컬러(민트·코랄·앰버)는 거래 분류용으로만 절제 사용.

元素	风格
观感	可靠清晰/信息密度高但不压抑
视觉氛围	白色画布 + 强黄色点缀 + 深正文灰色
形态	大圆角(12–20px)，浅阴影，卡片式信息分组
动效	不宜过度，以点击状态(scale 0.98)+切换过渡为主
文案语气	"○○님, ~하세요/했어요" 亲切敬语，数字添加千位分隔符+"元"后缀

KB的核心视觉元素仅有两个：

Star-b黄 —— 唯一强强调色
粗体正文灰/黑 —— 以可读性为核心的信息呈现

→ 不要破坏上述两个核心规范，辅助色（薄荷绿、珊瑚色、琥珀色）仅可克制用于交易分类场景。

2. 분기: 모바일 앱 vs 웹

2. 分支：移动端APP vs 网页端

이 스킬은 두 프리셋을 제공한다.

항목	모바일 (KB스타뱅킹 톤)	웹 (kbstar.com 톤)
배경	`#FFFFFF` 또는 `#F7F8FA`	`#F4F6F9`
카드	그림자 있는 화이트 카드	보더 위주, 그림자 약함
본문 폰트 크기	15–17px	14–15px
정보 밀도	낮음 (큰 잔액·큰 버튼)	높음 (테이블·폼·탭 많음)
헤더	콤팩트 + 검색/알림/MY	GNB 2단(상단 유틸 + 메인 메뉴)
주 사용처	홈/송금/카드/자산	조회/거래/상품가입/고객센터

요청에 "앱"/"모바일"/"스타뱅킹" 키워드가 있으면 모바일 프리셋, "웹"/"인터넷뱅킹"/"홈페이지"이면 웹 프리셋을 우선 사용한다. 명시 없으면 모바일을 기본으로 한다.

本工具提供两套预设：

项目	移动端（KB Star Banking风格）	网页端（kbstar.com风格）
背景	`#FFFFFF` 或 `#F7F8FA`	`#F4F6F9`
卡片	带阴影的白色卡片	以边框为主，阴影较浅
正文字号	15–17px	14–15px
信息密度	低（大余额展示、大按钮）	高（多表格、表单、标签页）
头部	紧凑布局 + 搜索/通知/我的入口	两层全局导航（顶部工具区 + 主导航）
主要适用场景	首页/转账/卡片/资产页	查询/交易/产品开通/客服中心

若需求中包含「APP」「移动端」「Star Banking」关键词则优先使用移动端预设，包含「网页」「互联网银行」「官网」则优先使用网页端预设，无明确说明默认使用移动端预设。

3. 컬러 토큰

3. 颜色token

KB의 정확한 브랜드 컬러는 KB금융그룹 CI 가이드(별색 기준)에 정의되어 있으며, 공개 자료 기반의 가장 널리 알려진 근사값은 다음과 같다.

css

/* assets/tokens.css 와 동일 */
@theme {
  /* Brand */
  --color-kb-yellow:        #FFBC00;  /* Star-b Yellow (KB 시그니처) */
  --color-kb-yellow-strong: #FFCC00;  /* 강조/상태(클릭) */
  --color-kb-yellow-soft:   #FFF7DB;  /* 노랑 톤 배경 */
  --color-kb-dark:          #60584C;  /* KB 보조 다크 (스톤 그레이) */
  --color-kb-black:         #1A1A1A;  /* 본문 강조 블랙 */

  /* Surface (Mobile preset) */
  --color-bg:        #F7F8FA;
  --color-surface:   #FFFFFF;
  --color-line:      #EEF0F3;
  --color-line-2:    #E5E8EC;

  /* Text — 한국 금융권 표준 그레이 스케일 */
  --color-ink:    #191F28;  /* 본문 강조 */
  --color-ink-2:  #4E5968;  /* 본문 보조 */
  --color-ink-3:  #8B95A1;  /* 캡션/메타 */
  --color-ink-4:  #B0B8C1;  /* placeholder/disabled */

  /* Semantic */
  --color-positive: #1EC894;  /* 입금/상승 */
  --color-negative: #F04452;  /* 출금/하락 (위험·삭제 전용) */
  --color-warn:     #FFB020;
  --color-info:     #3182F6;  /* 링크·정보 */

  /* Category (거래/소비 차트용 절제 팔레트) */
  --color-cat-1: #FFBC00;
  --color-cat-2: #FF8A3D;
  --color-cat-3: #1EC894;
  --color-cat-4: #5D7BFF;
  --color-cat-5: #B795FF;
}

사용 규칙

주 액션 버튼: KB옐로우 배경 + 검정 텍스트. 옐로우 위 흰색 텍스트는 가독성이 부족하며 KB의 실제 패턴도 검정.
보조 액션:
```
--color-line
```
배경 +
```
--color-ink
```
텍스트
링크/정보:
```
--color-info
```
(파란색은 거래내역 입금 표시에도 쓰임)
빨강은 위험·삭제·하락에만. 출금 거래는 빨강이 아니라 본문 그레이(
```
--color-ink
```
)로 표시 (KB스타뱅킹 패턴)

KB的官方品牌色定义见KB金融集团CI指南（专色标准），基于公开资料的通用近似值如下：

css

/* 与assets/tokens.css内容一致 */
@theme {
  /* Brand */
  --color-kb-yellow:        #FFBC00;  /* Star-b Yellow (KB品牌色) */
  --color-kb-yellow-strong: #FFCC00;  /* 强调/点击状态 */
  --color-kb-yellow-soft:   #FFF7DB;  /* 黄色调背景 */
  --color-kb-dark:          #60584C;  /* KB辅助深色（石灰色） */
  --color-kb-black:         #1A1A1A;  /* 正文强调黑色 */

  /* Surface (移动端预设) */
  --color-bg:        #F7F8FA;
  --color-surface:   #FFFFFF;
  --color-line:      #EEF0F3;
  --color-line-2:    #E5E8EC;

  /* Text — 韩国金融圈标准灰度体系 */
  --color-ink:    #191F28;  /* 正文强调 */
  --color-ink-2:  #4E5968;  /* 正文辅助 */
  --color-ink-3:  #8B95A1;  /* 说明/元信息 */
  --color-ink-4:  #B0B8C1;  /* placeholder/禁用状态 */

  /* Semantic */
  --color-positive: #1EC894;  /* 入账/上涨 */
  --color-negative: #F04452;  /* 出账/下跌（仅用于风险、删除场景） */
  --color-warn:     #FFB020;
  --color-info:     #3182F6;  /* 链接、信息提示 */

  /* Category (仅用于交易/消费图表的克制配色） */
  --color-cat-1: #FFBC00;
  --color-cat-2: #FF8A3D;
  --color-cat-3: #1EC894;
  --color-cat-4: #5D7BFF;
  --color-cat-5: #B795FF;
}

使用规则

主操作按钮: KB黄色背景 + 黑色文字，黄色背景配白色文字可读性差，KB实际规范也使用黑色文字。
辅助操作:
```
--color-line
```
背景 +
```
--color-ink
```
文字
链接/信息提示:
```
--color-info
```
（蓝色也可用于交易明细的入账标记）
红色仅用于风险、删除、下跌场景，出账交易不要用红色，使用正文灰色(
```
--color-ink
```
)展示（符合KB Star Banking规范）

4. 타이포그래피

4. 排版规范

이 스킬은 KB금융그룹 내부 사용을 전제로 하며, KB금융체(KBFG Display / KBFG Text)를 기본 폰트로 사용한다.

KBFG Display (제목): Bold / Medium / Medium Italic / Light
KBFG Text (본문): Bold / Medium / Light — 본문/숫자/UI 전반의 표준

폰트는

examples/tokens.css

안에서

assets/fonts.css

(KBFG 웹폰트

@font-face

)를 자동 import하며,

--font-sans

--font-display

토큰이 KBFG를 직접 가리킨다. 폴백은 시스템 폰트만 둔다.

css

@theme {
  --font-sans:    'KBFG Text', -apple-system, system-ui, sans-serif;
  --font-display: 'KBFG Display', 'KBFG Text', -apple-system, system-ui, sans-serif;
}

타입 스케일 (모바일 프리셋)

토큰	크기 / 줄간 / 굵기	용도
display-1	36 / 1.1 / 700	큰 잔액 ("12,442,910원")
display-2	28 / 1.2 / 700	페이지 헤딩 ("안녕하세요, 이수진님")
heading	18 / 1.4 / 700	섹션 타이틀
body	15 / 1.55 / 500	본문
body-strong	15 / 1.55 / 700	거래 금액·계좌명
caption	12 / 1.4 / 500	메타·시간·계좌번호
micro	11 / 1.4 / 600	배지·태그

숫자는 항상

tabular-nums

. 금액은

font-bold

+ 천단위 콤마 +

원

접미사.

本工具默认面向KB金融集团内部使用场景，默认字体为KB金融体(KBFG Display / KBFG Text)。

KBFG Display (标题): Bold / Medium / Medium Italic / Light
KBFG Text (正文): Bold / Medium / Light —— 正文、数字、UI全场景通用标准

字体在

examples/tokens.css

中会自动引入

assets/fonts.css

(KBFG web字体

@font-face

定义)，

--font-sans

--font-display

token直接指向KBFG字体，降级方案仅保留系统字体。

css

@theme {
  --font-sans:    'KBFG Text', -apple-system, system-ui, sans-serif;
  --font-display: 'KBFG Display', 'KBFG Text', -apple-system, system-ui, sans-serif;
}

字号体系（移动端预设）

token	字号 / 行高 / 字重	用途
display-1	36 / 1.1 / 700	大额余额展示（"12,442,910元"）
display-2	28 / 1.2 / 700	页面标题（"您好，李女士"）
heading	18 / 1.4 / 700	区块标题
body	15 / 1.55 / 500	正文
body-strong	15 / 1.55 / 700	交易金额、账户名
caption	12 / 1.4 / 500	元信息、时间、账号
micro	11 / 1.4 / 600	徽章、标签

数字始终使用

tabular-nums

，金额需搭配

font-bold

+千位分隔符+「元」后缀。

5. 스페이싱·라운딩·그림자

5. 间距、圆角、阴影

토큰	값	용도
`--radius-sm`	`8px`	칩, 작은 버튼
`--radius-md`	`12px`	입력, 중간 카드
`--radius-lg`	`16px`	표준 카드
`--radius-xl`	`20px`	메인 잔액 카드
`--radius-full`	`9999px`	필터 칩, 아바타
`--shadow-card`	`0 2px 10px rgba(25,31,40,0.04)`	표준 카드
`--shadow-pop`	`0 8px 24px rgba(25,31,40,0.08)`	모달, 토스트

레이아웃 거터: 모바일 24px, 웹 데스크톱 max-width 1200px + 24~32px 패딩. 세로 간격은 24px(섹션 간) / 16px(카드 내부) / 12px(리스트 행) 기준.

token	值	用途
`--radius-sm`	`8px`	标签、小按钮
`--radius-md`	`12px`	输入框、中等尺寸卡片
`--radius-lg`	`16px`	标准卡片
`--radius-xl`	`20px`	主余额卡片
`--radius-full`	`9999px`	筛选标签、头像
`--shadow-card`	`0 2px 10px rgba(25,31,40,0.04)`	标准卡片
`--shadow-pop`	`0 8px 24px rgba(25,31,40,0.08)`	模态框、Toast提示

布局边距：移动端24px，网页端桌面版max-width 1200px + 24~32px内边距。垂直间距基准：24px（区块间隔）/16px（卡片内间距）/12px（列表行间距）。

6. 컴포넌트 라이브러리 (

examples/

)

6. 组件库 (

examples/

)

이 스킬은 다음 React + Tailwind v4 컴포넌트 예시를 포함한다.

기본 (홈/리스트)

파일	설명
`examples/tokens.css`	`@theme` 토큰 (앱에 그대로 import 가능)
`examples/Button.tsx`	Primary(KB옐로우) / Secondary / Ghost / Danger 변형
`examples/AccountCard.tsx`	계좌 잔액 카드 (송금/내역/ATM 액션 버튼 포함)
`examples/TransactionItem.tsx`	거래 1행 (입금·출금·자동이체)
`examples/QuickMenuGrid.tsx`	자주 쓰는 메뉴 4×N 그리드
`examples/HomePage.tsx`	모바일 프리셋 홈 페이지 풀 템플릿

송금·인증 (Transfer / Auth)

파일	설명
`examples/AmountInput.tsx`	금액 입력 + 천단위 콤마 + 빠른 추가 칩
`examples/NumericKeypad.tsx`	숫자/보안 키패드 (shuffle 옵션)
`examples/PINInput.tsx`	간편비밀번호 도트 표시
`examples/BottomSheet.tsx`	모바일 표준 바텀시트 (dim·body 잠금)
`examples/TransferConfirmSheet.tsx`	"정말 보낼까요?" 송금 확인
`examples/ReceiptCard.tsx`	송금 영수증 (캡처/공유용, 톱니 디테일)

카드·차트 (Card / Insights)

파일	설명
`examples/VirtualCard.tsx`	가상 카드 (번호 마스킹 토글)
`examples/SpendingBar.tsx`	멀티 세그먼트 소비 바 + 카테고리 범례
`examples/CategoryDonut.tsx`	SVG 도넛 차트 (의존성 없음)

상태·약관 (Feedback / Forms)

파일	설명
`examples/Feedback.tsx`	`EmptyState` , `Skeleton` , `AccountCardSkeleton` , `Toast` 묶음 export
`examples/TermsAccordion.tsx`	약관 동의 (필수/선택, 전체동의 토글)

각 파일은 최소 의존성으로 작성되어 있고,

examples/tokens.css

만 import하면 그대로 동작한다.

本工具包含以下React + Tailwind v4组件示例：

基础组件（首页/列表）

文件	说明
`examples/tokens.css`	`@theme` token（可直接引入项目使用）
`examples/Button.tsx`	主按钮(KB黄)/次按钮/幽灵按钮/危险按钮变体
`examples/AccountCard.tsx`	账户余额卡片（包含转账/明细/ATM操作按钮）
`examples/TransactionItem.tsx`	单条交易记录（入账/出账/自动转账）
`examples/QuickMenuGrid.tsx`	常用菜单4×N网格
`examples/HomePage.tsx`	移动端预设首页完整模板

转账、认证相关（Transfer / Auth）

文件	说明
`examples/AmountInput.tsx`	金额输入框 + 千位分隔符 + 快捷金额标签
`examples/NumericKeypad.tsx`	数字/安全键盘（支持乱序选项）
`examples/PINInput.tsx`	简易密码点展示
`examples/BottomSheet.tsx`	移动端标准底部弹窗（带蒙层、背景锁定）
`examples/TransferConfirmSheet.tsx`	「确认转账吗？」转账确认弹窗
`examples/ReceiptCard.tsx`	转账凭证（支持截图/分享，带锯齿边细节）

卡片、图表相关（Card / Insights）

文件	说明
`examples/VirtualCard.tsx`	虚拟卡（支持卡号 masking 切换）
`examples/SpendingBar.tsx`	多段消费进度条 + 分类图例
`examples/CategoryDonut.tsx`	原生SVG环形图表（无额外依赖）

状态、表单相关（Feedback / Forms）

文件	说明
`examples/Feedback.tsx`	统一导出 `EmptyState` 、 `Skeleton` 、 `AccountCardSkeleton` 、 `Toast` 组件
`examples/TermsAccordion.tsx`	协议同意组件（必选/可选、全选切换）

所有文件均为最小依赖实现，仅需引入

examples/tokens.css

即可直接运行。

7. 동작 흐름 (스킬 사용 시)

7. 使用流程（调用本工具时）

요청이 들어오면 다음 순서로 동작한다.

收到需求后按以下步骤执行：

1단계 — 컨텍스트 파악

第一步 — 上下文判断

요청에 "앱/모바일/스타뱅킹" → 모바일 프리셋
요청에 "웹/인터넷뱅킹/홈페이지" → 웹 프리셋
명시 없음 → 모바일 프리셋

需求含「APP/移动端/Star Banking」→ 移动端预设
需求含「网页/互联网银行/官网」→ 网页端预设
无明确说明 → 移动端预设

2단계 — 토큰 주입

第二步 — token注入

프로젝트의 메인 CSS 파일(예:

src/index.css

)에

examples/tokens.css

의 내용을 머지한다. 이미

@theme

블록이 있으면 토큰 키를 추가만 하고, 충돌하는 키는 건드리지 않고 사용자에게 차이만 보고한다.

将

examples/tokens.css

内容合并到项目主CSS文件（例如

src/index.css

）中，若项目已有

@theme

块则仅追加token键，若存在冲突的键不要修改，仅告知用户差异即可。

3단계 — 폰트 주입

第三步 — 字体注入

KBFG 웹폰트는

examples/tokens.css

에서 자동으로 import된다. 별도 작업 불필요. (KBFG 로드 실패 시에는 시스템 기본 sans 폰트로 자연 대체된다.)

KBFG web字体已在

examples/tokens.css

中自动引入，无需额外操作。 (KBFG字体加载失败时会自动降级为系统默认无衬线字体)

4단계 — 컴포넌트 생성

第四步 — 组件生成

요청한 페이지/컴포넌트에 따라

examples/

의 파일들을

src/components/kb/

또는 사용자가 지정한 경로로 복사한다. 이미 같은 이름의 컴포넌트가 있으면 덮어쓰지 않고 충돌을 보고한다.

根据需求的页面/组件类型，将

examples/

下的对应文件复制到

src/components/kb/

或用户指定路径，若已存在同名组件则不要覆盖，告知用户冲突即可。

5단계 — 사용 가이드 출력

第五步 — 输出使用指南

어떤 토큰/컴포넌트가 추가됐는지 요약
라이선스 주의사항 (KB CI 사용 금지, 폰트 라이선스 확인)

汇总新增的token/组件清单
提示许可注意事项（禁止商用KB CI、确认字体授权）

8. 작성 규칙 (체크리스트)

8. 开发规范（检查清单）

KB 스타일로 UI를 작성할 때 항상 지킬 것:

강조 색은 KB옐로우 1개. 보조 액션은 회색.
옐로우 위 텍스트는 흰색 ❌ → 검정 또는 진한 그레이 ⭕
출금 거래는 빨강 ❌ → 본문 그레이 ⭕ (입금만 파란색·민트로 강조)
금액 표기:
```
12,442,910원
```
(콤마 + "원" 접미사 + tabular-nums)
본문은 KBFG Text, 절대 시스템 기본 sans 노출 금지
카드 라운딩 16~20px, 그림자는 매우 옅게 (
```
rgba(25,31,40,0.04)
```
)
친근 존댓말: "안녕하세요, ○○님 / ~했어요 / ~하세요"
정보 단위는 카드로 그룹. 카드 간 충분한 세로 간격(24px)
모바일은 최대 너비 480px 가정, 웹은 1200px 가정

使用KB风格开发UI时必须遵守以下规则：

强调色仅使用KB黄，辅助操作用灰色
黄色背景不要配白色文字 ❌ → 黑色或深灰色 ⭕
出账交易不要用红色 ❌ → 正文灰色 ⭕（仅入账用蓝色、薄荷绿强调）
金额格式：
```
12,442,910元
```
（千位分隔符 +「元」后缀 + tabular-nums）
正文使用KBFG Text，禁止直接展示系统默认无衬线字体
卡片圆角16~20px，阴影极浅(
```
rgba(25,31,40,0.04)
```
)
文案使用亲切敬语：「您好，○○님 / 已完成~ / 请~」
信息按卡片分组，卡片间保留足够垂直间距(24px)
移动端默认最大宽度480px，网页端默认最大宽度1200px

kb-bank-styles

Original

Translation

KB Bank Style Guide (KB국민은행 / KB스타뱅킹 UI)

KB Bank Style Guide (KB国民银行 / KB Star Banking UI)

1. 디자인 정체성

1. 设计调性

2. 분기: 모바일 앱 vs 웹

2. 分支：移动端APP vs 网页端

3. 컬러 토큰

3. 颜色token

4. 타이포그래피

4. 排版规范

5. 스페이싱·라운딩·그림자

5. 间距、圆角、阴影

6. 컴포넌트 라이브러리 (
`examples/`
)

6. 组件库 (
`examples/`
)

7. 동작 흐름 (스킬 사용 시)

7. 使用流程（调用本工具时）

1단계 — 컨텍스트 파악

第一步 — 上下文判断

2단계 — 토큰 주입

第二步 — token注入

3단계 — 폰트 주입

第三步 — 字体注入

4단계 — 컴포넌트 생성

第四步 — 组件生成

5단계 — 사용 가이드 출력

第五步 — 输出使用指南

8. 작성 규칙 (체크리스트)

8. 开发规范（检查清单）

kb-bank-styles

Original

Translation

KB Bank Style Guide (KB국민은행 / KB스타뱅킹 UI)

KB Bank Style Guide (KB国民银行 / KB Star Banking UI)

1. 디자인 정체성

1. 设计调性

2. 분기: 모바일 앱 vs 웹

2. 分支：移动端APP vs 网页端

3. 컬러 토큰

3. 颜色token

4. 타이포그래피

4. 排版规范

5. 스페이싱·라운딩·그림자

5. 间距、圆角、阴影

6. 컴포넌트 라이브러리 (examples/)

6. 组件库 (examples/)

7. 동작 흐름 (스킬 사용 시)

7. 使用流程（调用本工具时）

1단계 — 컨텍스트 파악

第一步 — 上下文判断

2단계 — 토큰 주입

第二步 — token注入

3단계 — 폰트 주입

第三步 — 字体注入

4단계 — 컴포넌트 생성

第四步 — 组件生成

5단계 — 사용 가이드 출력

第五步 — 输出使用指南

8. 작성 규칙 (체크리스트)

8. 开发规范（检查清单）

6. 컴포넌트 라이브러리 (
`examples/`
)

6. 组件库 (
`examples/`
)