Design System Inspiration of Korea Credit Data

Overview

Visual Theme & Atmosphere

Korea Credit Data (한국신용데이터, KCD) builds software and data services for Korean small-business owners (사장님). Its /about/ page gives the founding and the product in the company’s own words. CEO 김동호 co-founded KCD in 2016. He is a serial founder who co-founded 아이디인큐 (now 오픈서베이) in 2011 while at Yonsei University. The first product answered one question owners ask every day, “그래서 오늘 통장에 돈이 얼마 들어올까?”. In 2017 “카카오톡 챗봇 기반의 캐시노트가 탄생했습니다”. CashNote (캐시노트) is still the company’s service. KCD’s /service/ page presents it with 캐시노트 바로가기, and cashnote.kr’s footer links back to 한국신용데이터. The mission line is “우리는 사업을 시작하고 운영하고 성장시키는 모든 과정이 쉬워지도록 돕습니다”. The company now describes itself as a group, the KCD 공동체: 한국평가정보 (KCS, a sole-proprietor credit bureau licensed in July 2022), 한국결제네트웍스 (KPN, payments), 아임유 (IMU, POS hardware and software), 한국사업자경험 (KMX, owner support) and 바틀드 (BOTTLED, a store near 강남역 where staff “become owners” and new CashNote features are tried first).

This reference covers two evidence domains. The corporate site (kcd.co.kr) is a white, editorial page system. Large white 52px headlines sit over full-bleed imagery. Section heads are 46px/700 in an ink (#1e2137), with navy (#192d82) eyebrows. Actions are quiet 6px-radius ghost buttons outlined in ink that fill navy on hover. The product site (cashnote.kr) is a different register. A blue hero band carries a 72px headline in #f3faff, and headings run in navy. Every action is a soft grey (#f4f7f9) button with a blue (#2d91ff) label. The two domains share Pretendard and one blue. On kcd.co.kr the blue marks where you are: the current header item, the current menu section, the 바로가기 links. On cashnote.kr it is the action label.

Key Characteristics:

• One blue, #2d91ff: the selected state on kcd.co.kr and the action label on cashnote.kr
• Navy #192d82 for eyebrows, the ghost-button hover fill, the carousel arrows and CashNote headings
• Ink #1e2137 for corporate text, menu items and ghost-button outlines; ghost labels in #000000
• Quiet corporate actions: 6px ghost buttons, 15px 32px padding, a navy fill on hover
• CashNote soft buttons: #f4f7f9 fill, #2d91ff label, 12px and 16px radii
• Pretendard throughout, 300–700; the corporate button elements fall back to Arial

Primary tasks

• Check consolidated card sales each morning without opening a spreadsheet
• Connect a sales source so the figures start arriving
• Work out how settlements run before opening a new business
• Take payments and buy supplies from the same place

Brand Narrative

The /about/ page argues that owners miss decisions because the information they need never reaches them. It names how to manage cash flow, how to win regulars, where to borrow more cheaply and which government support applies. KCD answers in three beliefs, each on its own row: every moment of a business can be easier; every owner should get the right information at the right time; and owners need a trustworthy data and business ecosystem, built with partners vetted to a high standard.

CashNote was the first answer. In 2017 it launched as a KakaoTalk chatbot that told owners what would land in their account that day. The group grew around it: a credit bureau (KCS, licensed for sole-proprietor credit in July 2022), payments (KPN), POS (IMU), owner support (KMX), and a working store (BOTTLED) where every employee goes through a “사장님 되어보기” onboarding. CTO 임정기, formerly of 우아한형제들, 쿠팡 and 네이버, has led technology since September 2022. 김동호 was named a World Economic Forum Young Global Leader in 2025. The home page’s news list carries the current framing, for example “AI 승부는 모델보다 데이터… 220만 자영업 고객이 경쟁력” (매일경제). Headquarters: 서울특별시 강남구 테헤란로 127.

Principles

1. Start from the owner’s question. UI implication: lead with the number or answer an owner wants today.
2. Make every step easier. UI implication: one quiet action per section; large, plain headings.
3. Blue shows where you are. UI implication: keep #2d91ff for selection and product actions, not decoration.
4. Trust through restraint. UI implication: ink outlines, navy hover, no shadows.

Personas

Fictional archetypes informed by the owners KCD serves; not real people.

박은정, 47, 대구. Runs a neighbourhood bakery and checks yesterday’s card sales in CashNote each morning.

김상호, 39, 인천. Preparing to open a restaurant; wants to understand settlements before launch.

이지연, 52, 부산. Runs two shops and handles payments and supplies from one place.

Colors

Why #2d91ff is the primary

• Blue (#2d91ff): the one colour KCD renders in a primary role on both domains. On kcd.co.kr it is the selected state: the current item in the header navigation and in the full-screen menu (/about/ and /service/), plus the four 바로가기 links on the KCD 공동체 cards. On cashnote.kr it is the label of every captured action (캐시노트 시작하기, both 앱 다운로드 buttons). The corporate site has no chromatic action fill; its actions are ink outlines that fill navy on hover. Navy is therefore recorded as navy, the hover and heading colour, and blue as the primary.

Navy & Ink

• Navy (#192d82): section eyebrows on light bands, the hover and pressed fill of the ghost buttons (probe), the leadership tab’s selected border, the /service/ chip outline and carousel arrows, and CashNote section and feature headings.
• Ink (#1e2137): the corporate body colour, headings, menu items and ghost outlines.
• Ink Deep (#0c1120): CashNote footer headings.
• Ink Black (#000000): the label colour the ghost buttons compute.

Neutrals

• Body (#44546f): footer details on both domains and CashNote body copy.
• Gray (#666666): card descriptions on the corporate pages.
• Muted (#728094): the footer legal line and CashNote legal links.
• Grey (#9f9f9f): secondary menu links and the unselected leadership tab.
• Faint (#a4aeba): two secondary header links (one is 데이터 랩).
• Hairline (#d9d9d9): menu-row and leadership-tab borders.

Surface & Light

• White (#ffffff): canvas, hero headlines, labels on navy.
• Surface (#f4f7f9): the CashNote soft-button fill.
• Sky (#57a8ff): eyebrows and card titles on the corporate site’s dark bands.
• On Blue (#f3faff): the CashNote hero headline and lead on the blue band.

Brand assets outside the tokens

• /about/ offers a media kit (KCD 공동체 브랜드 가이드 and 로고, 캐시노트 브랜드 가이드 and 로고). The files were not opened, so nothing is taken from them. A supplementary survey read the CashNote hero band as the primary blue behind a background image, and the corporate dark band as a deep navy. Neither band was recorded by the collector, so neither is a token.

Typography

Font Family

• Sans: Pretendard. Loaded and in use on 467 recorded elements across both domains (body, headings, cards, list items). The survey’s document.fonts lists weights 400–700 on kcd.co.kr (300 on /service/) and 400, 600 and 700 on cashnote.kr. Distributed under the SIL Open Font License 1.1. No KCD or CashNote page opened names its typeface, so there is no official product-use claim.
• Arial (live surface use, not a brand face): 20 recorded elements compute the system Arial. They are the corporate site’s button elements, which do not inherit Pretendard. The leadership tabs (C-level, Advisor) and the media-kit row headings render in Arial for that reason. It is a CSS inheritance gap, not a typeface choice.
• Declared only: Plipop-Social-Icons and swiper-icons (icon fonts, 0 text uses).

Hierarchy

Principles

• Bold display, light introductions. Headlines run at 700; /service/ switches its long introductions to Pretendard 300.
• Eyebrow, heading, lead. Each corporate section stacks an 18px/600 navy eyebrow, a 46px/700 heading and an 18px/400 lead with a 30px line.

Layout

Spacing

• Ghost buttons 15px 32px; menu rows 25px bottom padding; leadership tabs 0 23px; service chips 3px 25px
• CashNote soft buttons 0 12px (header), 0 16px (hero), 12px 28px (footer)

Grid & Container

• kcd.co.kr: full-bleed hero image with a 52px white headline; sections of eyebrow, heading, lead and a ghost button at 1280px; a dark band for recruiting; a full-screen menu of 1380px rows
• /about/: mission stories as expandable 620px rows; four KCD 공동체 cards with 바로가기 links; the leadership switch; the media kit
• cashnote.kr: a blue hero band with the download button, then navy-headed feature sections and a closing download band

Border Radius Scale

• 6px ghost buttons · 12px CashNote header and footer buttons · 16px CashNote hero button · 100px tabs and chips · 50% carousel arrows

Responsive Behavior

Only the 1440px desktop layout was captured; no breakpoint table is given.

Touch Targets (measured at 1440px)

• Ghost buttons 48–59px tall; menu rows 44px; leadership tabs 44px; CashNote buttons 40–48px; carousel arrows 56px

Elevation & Depth

The supplementary survey read one soft shadow on /service/ and one on cashnote.kr, on elements the collector did not record. Their values are in .verification.md; no shadow token is declared.

Motion & Easing

Measured transitions only:

• all 0.2s ease on the ghost buttons and ghost link (hover fill)
• all 0s ease 0.2s on the selected leadership tab
• transform 0.5s, height 0.2s on a 40 × 40 icon button present on every corporate page
• opacity 1s, transform 1s fade-up on CashNote’s consultant button and 0.3s on CashNote links, from the supplementary survey
• all 0s on the CashNote soft buttons

No durations or easings beyond these are declared.

<!– Sources (2026-09-30): artifacts/reference-evidence/kcd.json (capturedAt 2026-09-30T11:08:27.287Z, four surfaces, coverage 66); docs/research/2026-09-29-growth/raw/kcd-states-home.json, kcd-states-about.json, kcd-states-cashnote.json (fixed keyboard probe). Narrative from kcd.co.kr/about/ (mission, 지나온 길, KCD 공동체, leadership, media kit, footer) and kcd.co.kr/service/. Personas are fictional. Details in .verification.md. –>

Components

Corporate buttons (kcd.co.kr)

Ghost Button: transparent, 1px #1e2137 outline, #000000 label, 6px radius, 15px 32px padding, 51px tall (59px on /service/), 16px/700. Hover and pressed: #192d82 fill, #ffffff label, #192d82 border, after a 0.2s transition (probe). Use: 서비스 보기, 자세히 보기, 캐시노트 바로가기, Google Play, Apple Store.

Ghost Link: the same shape as an anchor, label #1e2137, 48px tall; the same navy hover (probe). Use: 더보기.

Ghost Inverse: #ffffff outline and label on dark bands (데이터 랩 바로가기, 인재영입 중); rest only.

Entity Link: #2d91ff at 18px/700 with an arrow icon; no hover change (probe). Use: 바로가기 on the KCD 공동체 cards.

Navigation & tabs (kcd.co.kr)

Header Item: white at 16px/400 over the hero; the current page’s item is #2d91ff.

Menu Item: #1e2137 at 18px/700, 25px bottom padding over a 1px #d9d9d9 rule; the current section is #2d91ff.

Leadership Tab: 100px radius, padding 0 23px, 44px tall, 18px/500; unselected #9f9f9f label with a #d9d9d9 border. Selected: #ffffff label with a #192d82 border; its fill was not measurable, so it is not declared. No change on hover, pressed or focus (probe).

Service Chip: #192d82 outline and label, 100px radius, 3px 25px padding, 38px tall, 18px/400.

Carousel Arrow: a 56 × 56 #192d82 circle with a #ffffff arrow (/service/).

CashNote buttons (cashnote.kr)

Start Button: #f4f7f9 fill, #2d91ff label, 12px radius, padding 0 12px, 40px tall, 16px/600 (header). Download Button: #f4f7f9 fill, #2d91ff label, 16px radius, padding 0 16px, 48px tall, 19px/700 (hero). Footer Download: #f4f7f9 fill, #2d91ff label, 12px radius, 12px 28px padding, 40px tall. None changes on hover, pressed or focus (probe on the first two).

States

Observed only:

• Hover / pressed: ghost button and ghost link fill #192d82 with a #ffffff label; the entity link, leadership tabs and CashNote buttons show no change.
• Selected: #2d91ff on the current header item and menu section; the leadership tab’s #ffffff label and #192d82 border.
• Focus: no authored focus style. 더보기 and 바로가기 draw only the browser’s default ring.

Empty, loading, error and success states belong to the CashNote app, which was not captured.

Do’s and Don’ts

Do

• Use #2d91ff for where-you-are on kcd.co.kr and for action labels on CashNote
• Outline corporate actions in #1e2137 and fill them #192d82 on hover
• Put CashNote actions on a #f4f7f9 fill with a #2d91ff label
• Stack eyebrow (#192d82, 18px/600), heading (46px/700) and lead (18px/400/30px)
• Set text in Pretendard, and give buttons the family explicitly (the site’s own buttons fall back to Arial)

Don’t

• Don’t mix the domains’ button styles: ghost outlines belong to kcd.co.kr, soft grey buttons to CashNote
• Don’t fill corporate actions blue at rest; the site keeps blue for selection and links
• Don’t add drop shadows to controls

Voice & Tone

KCD talks about owners’ days, not about finance. The /about/ page opens with “사업의 모든 순간 — 더 쉽게, 더 빠르게, 더 똑똑하게” and states the mission as helping every stage of starting, running and growing a business get easier. Its mission stories are plain first-person beliefs: “우리는 사업의 모든 순간이 지금보다 더 쉬워질 수 있다고 믿습니다.” CashNote’s page title keeps the same register: “사장님의 모든 순간 캐시노트로 쉽고 빠르고 똑똑하게”.

Forbidden register: sales urgency, unexplained financial jargon, fear-based pitching, talking down to 사장님.

Agent Prompt Guide

Quick Color Reference

• Primary (selected state, CashNote action label): #2d91ff
• Navy (eyebrows, hover fill, CashNote headings): #192d82
• Ink #1e2137; ghost label #000000; deep #0c1120
• Text ladder: #44546f, #666666, #728094, #9f9f9f, #a4aeba
• CashNote button fill #f4f7f9; hero text #f3faff; dark-band eyebrow #57a8ff; hairline #d9d9d9; white #ffffff

Example Component Prompts

• “Corporate section: 18px/600 eyebrow in #192d82, 46px/700 heading in #1e2137 with a 62px line, 18px/400 lead with a 30px line, then a ghost button: transparent, 1px #1e2137 border, 6px radius, 15px 32px padding, 16px/700 label; on hover fill #192d82 with a #ffffff label.”
• “CashNote header action: #f4f7f9 fill, #2d91ff label at 16px/600 Pretendard, 12px radius, 0 12px padding, 40px tall.”
• “Full-screen menu: 18px/700 Pretendard items in #1e2137 with 25px bottom padding over a 1px #d9d9d9 rule; the current section in #2d91ff.”

Iteration Guide

1. Blue marks selection on kcd.co.kr and labels actions on CashNote
2. Navy is the hover fill and the heading colour on CashNote
3. Ghost 6px outlines for corporate; soft grey 12–16px buttons for CashNote
4. Pretendard everywhere, set explicitly on buttons

Governance

Known Gaps

• Contrast, ghost-button. 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, ghost-link. Text #1e2137 on #00000000 measures 1.33:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, cashnote-start-button. Text #2d91ff on #f4f7f9 measures 2.95:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, cashnote-download-button. Text #2d91ff on #f4f7f9 measures 2.95:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, cashnote-footer-download. Text #2d91ff on #f4f7f9 measures 2.95:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.