--- id: kbank name: K bank country: KR category: fintech homepage: "https://www.kbanknow.com" primary_color: "#0046ff" logo: type: favicon slug: "https://www.google.com/s2/favicons?domain=kbanknow.com&sz=256" verified: "2026-05-14" omd: "0.1" tokens: source: prose-derived extracted: "2026-06-09" note: "primary = signature K bank Navy #0114a7 (sole brand primary); lime #b6f23d is the sparing energetic accent" colors: primary: "#0114a7" brand: "#0114a7" accent-lime: "#b6f23d" accent-sell: "#047af1" canvas: "#ffffff" foreground: "#020616" muted: "#67748e" on-primary: "#ffffff" surface: "#f7f9fd" surface-strong: "#edf1f7" hairline: "#e0e6f1" body: "#252b37" info: "#066ae5" action: "#2539e9" error: "#e23a32" warning: "#e46f00" success: "#69a305" typography: family: { sans: "Pretendard K Edition", mono: "SF Mono" } body: { size: 14, weight: 400, lineHeight: "normal", use: "Standard body text" } cta: { size: 18, weight: 500, use: "Button label, medium weight not bold" } spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 24, xxl: 32 } rounded: { sm: 0, md: 0, lg: 12, full: 9999 } shadow: none: "Elevation conveyed through 1px borders and g200/g300 fills, not Z-axis" components_harvested: true components: button-primary: { type: button, bg: "#0114a7", fg: "#ffffff", radius: "12px", height: "56px", font: "18px / 500", use: "Primary CTA, medium weight on navy fill" } listItem-link: { type: listItem, fg: "#020616", use: "Nav/body links, underline on hover, dense 14px" } card-tile: { type: card, bg: "#ffffff", border: "1px solid #e0e6f1", radius: "0px", shadow: "none", use: "Square-cornered product tiles separated by 1px borders" } badge-info: { type: badge, bg: "#d1ecff", fg: "#066ae5", use: "Informational banner state" } badge-action: { type: badge, bg: "#e6ebff", fg: "#2539e9", use: "Promo / opportunity callout" } badge-neutral: { type: badge, bg: "#edf1f7", fg: "#4d596f", use: "Quiet badge / chip" } badge-error: { type: badge, bg: "#ffe5e0", fg: "#e23a32", use: "Failure / fraud alert" } --- # K bank — Design Reference > 케이뱅크 — Korea's first internet-only bank (launched 2017). State-licensed digital-only commercial bank; sibling category to Toss Bank and Kakao Bank, but with the most "traditional bank" posture of the three: navy-led, document-forward, partnership-driven (KT, Woori, Bain, MBK). K bank reads as a **regulated bank that happens to be app-native**, not a fintech wearing a bank licence. The visual signal is conservative, the IA is product-catalog-first, and the language defaults to formal `~합니다` rather than the colloquial `~해요` of Toss. The interesting tension: an otherwise austere navy palette is paired with one shockingly bright lime (`#B6F23D`) reserved as the energetic accent — a calculated rule-breaker. --- ## 1. Visual Theme & Atmosphere **K bank** is South Korea's first internet-only bank (launched 2017, KT-led consortium → 2021 KT Strategic Investment recap → 2024 IPO preparation). The product surface reads as a neobank that refuses both fintech-startup playfulness and legacy-bank gravitas: a near-white canvas anchored by a single signature **K bank Navy `#0114A7`**, an energetic **Lime `#B6F23D`** accent used sparingly on activation states, and a tight Pretendard type ladder. Skip-link primary, body 16px / 400 #1A1A1A on white, fixed 1280px desktop canvas — the chrome is sober, mobile-first-translated-to-desktop, and image-replacement H1 (font-size:0) is still in use, which surfaces concrete a11y debt (`a11y_landmark_violation` documented in §8). Where the prior batch's Toss leans warm-trust and KakaoBank leans playful-yellow, K bank leans **executive-restraint**: the brand is the navy, the navy is the trust, and chrome elsewhere stays out of the way. ## 1.1 Foundation tokens (live-captured) All values pulled from `getComputedStyle(document.documentElement)` on `https://www.kbanknow.com` — see `assets/_reference/tokens.json` for the full machine-readable set and `assets/_reference/.live-inspect-proof.json` for raw samples. ### Color — brand | Token | Value | Role | |---|---|---| | `--color-navy` | `#0114A7` | Signature K bank navy. Sole brand-positive primary. Used on skip-link, CTAs, key labels. | | `--color-lime` | `#B6F23D` | Energetic accent. Sparingly applied — never on body text, never on form chrome. | | `--txt-pri-sell` | `#047AF1` | "Sell" / promo blue — used for product-detail callouts adjacent to navy primary. | ### Color — neutral ramp (11 stops, dual-emitted as `--color-g*` and `--txt-g*`) `g1000 #020616` → `g900 #252B37` → `g800 #3B4659` → `g700 #4D596F` → `g600 #67748E` → `g500 #8694B1` → `g400 #C8D2E4` → `g300 #E0E6F1` → `g200 #EDF1F7` → `g100 #F7F9FD` → `w100 #FFFFFF`. Cool-leaning grayscale (blue-tinted, not neutral) — keeps the ramp coherent with the navy primary. ### Color — semantic state | State | Bg | Txt | Use | |---|---|---|---| | info | `#D1ECFF` | `#066AE5` | informational banner | | action | `#E6EBFF` | `#2539E9` | promo / opportunity callout | | neutral | `#EDF1F7` | `#4D596F` | quiet badge / chip | | error | `#FFE5E0` | `#E23A32` | failure / fraud alert | ### Color — extended palette `bu800 #066AE5` · `re700 #E23A32` · `og600 #E46F00` · `yl600 #B78F01` · `lm600 #69A305` · `in700 #4262FF`. Six muted hues, each kept dark/saturated enough to pass AA against `#FFFFFF`. ### Typography - **Primary**: `Pretendard K Edition` — the Korean-optimised cut of the open-source Pretendard family. Single global family; no serif/display split. - **Stack**: `Pretendard K Edition, -apple-system, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif`. - **Body**: 14px / 400 / line-height `normal`. - **CTA**: 18px / 500 (medium, not bold) / 56px height / 12px radius. This is the only widely-rounded surface — see §3. ### Radius - CTA only: `12px`. - Everything else observed: `0px`. **Sharp orthogonal blocks dominate.** This is a deliberate, conservative-bank signal. ### Shadow - Not used on the marketing root. Elevation conveyed through 1px borders and `--color-g200/g300` background fills, not Z-axis. --- ## 2. Layout & grid - **Fixed 1280px desktop canvas.** No fluid breakpoint observed on the marketing surface; mobile app is the primary product channel, web is the catalog/regulatory mirror. - Body width measured live at `1280px`, height `1126px` above-the-fold for the landing surface. - Three vertical bands: top utility row → primary nav → product-tile grid → 새소식/공지 list → footer-equivalent block. - No `
` / `