---
id: banksalad
name: Banksalad
country: KR
category: fintech
homepage: "https://www.banksalad.com"
primary_color: "#04c584"
logo:
  type: favicon
  slug: "https://www.google.com/s2/favicons?domain=banksalad.com&sz=256"
verified: "2026-05-15"
omd: "0.1"
ds:
  name: Banksalad GitHub
  url: "https://github.com/banksalad"
  type: brand
  description: Banksalad's public GitHub org including styleguide repos and BPL (Banksalad Product Library) reference material.
  og_image: "https://avatars.githubusercontent.com/u/71009899?s=280&v=4"
tokens:
  source: prose-derived
  extracted: "2026-06-08"
  colors:
    primary: "#04c584"
    primary-hover: "#10df99"
    brand: "#04c584"
    canvas: "#ffffff"
    foreground: "#2b2b2b"
    muted: "#7b7b7b"
    on-primary: "#ffffff"
    surface-alt: "#fbfbfb"
    surface-neutral: "#f5f5f5"
    body: "#434444"
    placeholder: "#999999"
    disabled: "#acacac"
    hairline: "#e1e1e1"
    mint-tint: "#f3fdfa"
    error: "#fe493d"
    error-soft: "#ff8a84"
    warning: "#fd8700"
    warning-deep: "#f56200"
    info: "#0099ff"
    success: "#04c584"
    chart-1: "#34464b"
    chart-2: "#5c818a"
    chart-3: "#1c6c73"
    chart-4: "#a7c7cf"
  typography:
    family: { sans: "Pretendard", display: "BM JUA" }
    hero-display:     { size: 52, weight: 700, lineHeight: 1.23, tracking: -1, use: "Largest landing headline; sometimes Jua" }
    display-lg:       { size: 48, weight: 700, lineHeight: 1.2, tracking: -1, use: "Secondary hero" }
    display:          { size: 44, weight: 700, lineHeight: 1.25, tracking: -1, use: "Section-opening figures (balances, scores)" }
    section-heading:  { size: 36, weight: 700, lineHeight: 1.3, tracking: -0.5, use: "Marketing section titles" }
    h1:               { size: 28, weight: 700, lineHeight: 1.14, use: "In-app section titles" }
    h2:               { size: 24, weight: 700, lineHeight: 1.17, use: "Card titles, panel headings" }
    h3:               { size: 20, weight: 700, lineHeight: 1.2, use: "Sub-card headings" }
    subhead:          { size: 18, weight: 700, lineHeight: 1.3, use: "Featured-button text, key callouts" }
    body-lg:          { size: 16, weight: 500, lineHeight: 1.5, use: "Standard reading text on data screens" }
    body:             { size: 14, weight: 500, lineHeight: 1.34, use: "Default body text; 500 not 400" }
    body-tight:       { size: 13, weight: 500, lineHeight: 1.34, use: "Compact labels" }
    caption:          { size: 12, weight: 500, lineHeight: 1.34, use: "Metadata, helper text" }
    caption-sm:       { size: 10, weight: 500, lineHeight: 1, use: "Disclosures, smallest labels" }
    button:           { size: 16, weight: 700, lineHeight: 1, tracking: -1, use: "All CTAs are 700" }
    financial-amount: { size: 24, weight: 700, lineHeight: 1, use: "Comma-grouped, won unit follows in 500" }
  spacing: { xs: 4, sm: 8, md: 16, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
  rounded: { sm: 2, md: 4, lg: 8, full: 9999 }
  shadow:
    soft: "rgba(0,0,0,0.08) 0px 1px 1px 0px"
    standard: "rgba(0,0,0,0.12) 0px 2px 5px 0px"
    elevated: "rgba(0,0,0,0.15) 0px 4px 9px 0px"
    modal: "rgba(0,0,0,0.19) 0px 17px 50px 0px"
  components_harvested: true
  components:
    button-primary: { type: button, bg: "#04c584", fg: "#ffffff", radius: "2px", height: "42px", padding: "12px 24px", font: "16px / 700", hover: "bg #10df99 (lightens)", use: "Primary CTA on data/transactional flows" }
    button-primary-large: { type: button, bg: "#04c584", fg: "#ffffff", radius: "2px", height: "56px", padding: "16px 32px", font: "18px / 700", hover: "bg #10df99", use: "Hero CTA on landing surfaces" }
    button-ghost: { type: button, bg: "#ffffff", fg: "#04c584", border: "1px solid #04c584", radius: "2px", padding: "12px 24px", font: "16px / 700", hover: "bg #f3fdfa mint tint", use: "Secondary action paired with primary" }
    button-neutral: { type: button, bg: "#f5f5f5", fg: "#434444", radius: "2px", padding: "12px 24px", font: "16px / 700", hover: "bg #e1e1e1", use: "Cancel / dismiss" }
    button-disabled: { type: button, bg: "#e1e1e1", fg: "#acacac", radius: "2px", font: "16px / 700", use: "Disabled state" }
    input-text: { type: input, bg: "#ffffff", fg: "#434444", border: "1px solid #e1e1e1", radius: "2px", height: "48px", padding: "0 16px", font: "16px / 500", focus: "border #10df99 + bg #f3fdfa", use: "Default text input" }
    input-amount: { type: input, bg: "#ffffff", fg: "#2b2b2b", border: "2px solid #f5f5f5", radius: "2px", height: "56px", padding: "0 16px", font: "22px / 700", focus: "border #10df99 + bg #f3fdfa", use: "Won-amount input, right-aligned, money as heading" }
    card-data: { type: card, bg: "#ffffff", border: "1px solid #e1e1e1", radius: "2px", padding: "20px 24px", shadow: "rgba(0,0,0,0.12) 0px 2px 5px 0px", use: "Recommendation/transaction/summary cards" }
    card-highlight: { type: card, bg: "#f3fdfa", border: "1px solid #10df99", radius: "2px", padding: "20px 24px", use: "Selected/recommended-pick in comparison lists" }
    status-pill: { type: badge, bg: "#f3fdfa", fg: "#04c584", radius: "41px", padding: "4px 10px", font: "12px / 500", use: "Filter chips on recommendation pages" }
    badge-warning: { type: badge, bg: "#ffffff", fg: "#f56200", border: "1px solid #fd8700", radius: "2px", padding: "2px 8px", font: "12px / 700", use: "Rate-warning, expiry indicators" }
    badge-negative: { type: badge, bg: "#ffffff", fg: "#fe493d", border: "1px solid #fe493d", radius: "2px", padding: "2px 8px", font: "12px / 700", use: "Overdue, declined indicators" }
    table-row: { type: listItem, bg: "#ffffff", fg: "#434444", border: "1px solid #e1e1e1 bottom", padding: "12px 16px", font: "14px / 500", use: "Transaction rows; alternates #fbfbfb, amounts right-aligned 14px/700 #2b2b2b positive #fe493d negative" }
---

# Design System Inspiration of Banksalad

## 1. Visual Theme & Atmosphere

Banksalad (뱅크샐러드) is the design language of a **trustworthy financial advisor that runs on data, not optimism**. Where Toss flattens money into one cheerful gesture and KakaoPay wraps it in Kakao yellow, Banksalad insists that *more information, clearly presented*, is the actual brand promise. The home page opens on a white canvas (`#ffffff`/`#fbfbfb`) with warm near-black text (`#2b2b2b` for headings, `#434444` for body — never pure `#000`), anchored by a saturated mint-green `#04c584` that does all the interactive work. The green is specifically a **salad-leaf green** (the brand name is literally "Bank + Salad" — financial data freshly tossed for you), warmer than Spotify's `#1db954` and far brighter than the corporate teal that legacy Korean banks default to.

The single most distinctive geometric choice is the radius scale. The CSS bundle contains **81 occurrences of `border-radius: 2px`** and only 5 of 8px and 3 of 4px. Banksalad is **almost-flat**: 2px is just enough to take the harshness off a corner without softening anything into "app-friendly" plumpness. This is a deliberate rejection of the Toss/Kakao consumer-app idiom (12–16px). It tells the user: this is data, not a toy. The tabular density follows from the same conviction — cards pack rows of numbers tightly, and the 700-weight Pretendard digits never apologize for taking up space.

Typography pairs **Pretendard** (the de-facto Korean modern sans, designed by Kil Hyun-jin, weight-axis variable) with **BM JUA** ("배민 주아체", Battle Grounds Jua — a rounded, friendly Korean display face) as an accent. Pretendard does 99% of the work; Jua appears only for marketing/landing display moments where Banksalad wants to feel warm rather than clinical. The default weight is **700** (160 of 304 weight declarations) — Banksalad numbers and headings are confident and chunky, with 500 as the secondary "emphasis on body" weight. Light weights (300) appear ~26 times — only for the largest hero numerals where the size carries the authority.

**Key Characteristics:**
- Pretendard + Apple SD Gothic Neo + Noto Sans KR font stack — Korean-native typography first
- "BM JUA" as accent display font for landing/promotional moments only
- Signature green `#04c584` (mint, salad-leaf) for all interactive moments
- Hover/focus green `#10df99` (one shade brighter) — interaction makes things *lighter*, not darker
- 2px radius dominance — the brand reads as data-tool, not consumer-app
- Warm near-black `#2b2b2b`/`#434444` for type instead of `#000000`
- Mint focus tint `#f3fdfa` on input backgrounds — the only branded background tint in the system
- 700 weight as default for headings and financial figures; 500 for body emphasis
- Subtle single-layer shadows `0 2px 5px rgba(0,0,0,.12)` — never colored, never theatrical
- Teal-gray data palette (`#34464b`/`#5c818a`/`#1c6c73`/`#a7c7cf`) for chart series — cool, advisor-grade

## 2. Color Palette & Roles

### Primary
- **Salad Green** (`#04c584`): Primary brand color, CTA backgrounds, links, accent rules, financial-status accents. Mint with a touch of grass — readable on white, energetic but not playful.
- **Hover Green** (`#10df99`): Brighter mint applied on hover, focus border, and the resting state of less-prominent CTAs. Banksalad lightens to indicate interaction (opposite of the conventional darken-on-hover pattern).
- **Mint Tint** (`#f3fdfa`): Focus background on inputs, success surface fill. The only branded tint in the system.

### Heading & Body
- **Heading** (`#2b2b2b`): Warm near-black for headlines, prominent labels, and financial amounts. Never `#000`.
- **Body** (`#434444`): Standard reading text. Filled-input text color.
- **Body Light** (`#7b7b7b`): Captions, secondary descriptions.
- **Placeholder** (`#999999`): Input placeholders, muted metadata.
- **Disabled** (`#acacac` / `#c0c0c0`): Disabled text and icons.

### Surface & Border
- **Page** (`#ffffff`): Default canvas.
- **Surface Light** (`#fbfbfb`): Soft surface alternation, panel fills.
- **Surface Neutral** (`#f5f5f5`): Dividers, separator backgrounds, content shelf fills (most-used neutral after green).
- **Border Input** (`#e1e1e1`): Default input border, divider line.
- **Surface Mint** (`#f3fdfa`): Success-state surface fill.

### Data / Chart Palette (teal-slate family)
- **Deep Slate** (`#0b0c0c`): Maximum-depth axis labels.
- **Teal-Slate 900** (`#333a44`): Primary chart series.
- **Teal-Slate 800** (`#34464b`): Secondary chart series, table headers.
- **Teal-Slate 700** (`#436068`): Tertiary chart.
- **Teal 600** (`#1c6c73`): Highlighted data point.
- **Teal-Gray 500** (`#5c818a`): Subdued data, legend.
- **Teal 400** (`#318b93`): Mid-range fills.
- **Pale Teal** (`#a7c7cf`): Background fills for chart bands.

The teal-slate family is intentionally **cooler than the brand green**, so that chart series read as neutral data rather than as branded surfaces. Banksalad's green is for interaction; teal-slate is for information.

### Semantic
- **Error Red** (`#fe493d`): Strong error states, blocking validation.
- **Error Soft** (`#ff8a84`): Light error tint, secondary error indicators.
- **Warning Orange** (`#fd8700`): Warning emphasis (rate spikes, expiry).
- **Warning Deep** (`#f56200`): Highest-severity warning.
- **Warning Light** (`#ff9900`): Soft warning highlights.
- **Info Blue** (`#0099ff`): External links, info notices (used sparingly — green is the default link color).
- **Success Green** (`#04c584` / `#10df99` / `#13bd7e`): Success uses brand green; there is no separate success hue.

## 3. Typography Rules

### Font Family
- **Primary**: `Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif`
- **Display Accent**: `"BM JUA", sans-serif` — reserved for marketing-landing headlines where a warm, rounded Korean voice is wanted (rare; default to Pretendard)
- Variable-axis Pretendard supplies 300/400/500/700/800/900 weights as needed; subset woff2 files for ExtraBold (800), Bold (700), Medium (500), Regular (400) are preloaded on the home page

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Hero Display | Pretendard | 52px | 700 | 64px (1.23) | -1px | Largest landing headline; sometimes Jua for marketing warmth |
| Display Large | Pretendard | 48px | 700 | 1.2 | -1px | Secondary hero |
| Display | Pretendard | 38–44px | 700 | 1.25 | -1px | Section-opening figures (balances, scores) |
| Section Heading | Pretendard | 32–36px | 700 | 1.3 | -0.5px | Marketing section titles |
| Heading 1 | Pretendard | 28px | 700 | 32px | normal | In-app section titles |
| Heading 2 | Pretendard | 22–24px | 700 | 28px | normal | Card titles, panel headings |
| Heading 3 | Pretendard | 20px | 700 | 24px | normal | Sub-card headings |
| Subhead | Pretendard | 18px | 700 | 1.3 | normal | Featured-button text, key callouts |
| Body Large | Pretendard | 16px | 500 | 1.5 | normal | Standard reading text on data screens (700 for emphasis) |
| Body | Pretendard | 14px | 500 | 1.34 | normal | Default body text; 500 weight, not 400 |
| Body Tight | Pretendard | 13px | 500 | 1.34 | normal | Compact labels |
| Caption | Pretendard | 12px | 500 | 1.34 | normal | Metadata, helper text |
| Caption Small | Pretendard | 10px | 500 | 1 | normal | Disclosures, smallest labels |
| Button | Pretendard | 16–18px | 700 | tight | -1px on display CTAs | All CTAs are 700 |
| Financial Amount | Pretendard | 20–36px | 700 | 1 | normal | Always 700, comma-grouped, won unit follows in 500 |

### Principles
- **700 is the default for everything that matters.** Headings, CTAs, and financial amounts. 500 is for body text. 400 is rare. There is no "400 headline" in Banksalad.
- **Pretendard everywhere.** Banksalad does not mix sans families. Jua is a *single* exception, only for warm marketing display.
- **Korean and Latin are co-equal.** Pretendard's optical metrics align Korean (한글) and Latin in the same line; never assume English is primary.
- **Tight letter-spacing at display.** Hero headlines and 18px+ CTAs use `-1px` tracking to compress for density.
- **Numerals as headings.** Financial amounts at 20–36px / 700 are treated as headings, not body — they get the same hierarchical weight as page titles.
- **Lightweight body is forbidden.** 300 only appears on display sizes where the size itself carries hierarchy (52px hero numerals); never on body text.

## 4. Component Stylings

### Buttons

**Primary CTA (Salad Green)**
- Background: `#04c584`
- Text: `#ffffff`
- Border: none
- Radius: 2px
- Padding: 12px 24px
- Height: 42px (line-height-driven)
- Font: 16px / 700 / Pretendard
- Hover: background `#10df99` (lightens — opposite of convention)
- Use: Primary CTA on data tables, recommendation rows, transactional flows ("내 카드 추천 받기", "신청하기")

**Primary CTA — Large Display**
- Background: `#04c584`
- Text: `#ffffff`
- Border: none
- Radius: 2px
- Padding: 16px 32px
- Height: 56px
- Font: 18px / 700 / Pretendard
- Letter-spacing: -1px
- Hover: `#10df99`
- Use: Hero CTA on landing surfaces ("앱 다운로드", "지금 시작하기")

**Primary CTA — Hover-Inverted (Retry)**
- Background: `#10df99` (default lighter)
- Text: `#ffffff`
- Border: none
- Radius: 2px
- Padding: 10px 20px
- Font: 14px / 500 / Pretendard
- Hover: background `#04c584` (darkens — the one place Banksalad uses the darken pattern)
- Use: Secondary retry / "다시 시도" actions where the resting state is a softer mint

**Ghost / Outlined**
- Background: `#ffffff`
- Text: `#04c584`
- Border: 1px solid `#04c584`
- Radius: 2px
- Padding: 12px 24px
- Font: 16px / 700 / Pretendard
- Hover: background `#f3fdfa` (mint tint)
- Use: Secondary actions paired with a Primary CTA

**Neutral / Cancel**
- Background: `#f5f5f5`
- Text: `#434444`
- Border: none
- Radius: 2px
- Padding: 12px 24px
- Font: 16px / 700 / Pretendard
- Hover: background `#e1e1e1`
- Use: Cancel / "취소" / dismiss actions

**Disabled**
- Background: `#e1e1e1`
- Text: `#acacac`
- Border: none
- Radius: 2px
- Font: 16px / 700 / Pretendard
- Use: Disabled state (form incomplete, retry cooling down)

**Link Button (Inline Text Link)**
- Background: transparent
- Text: `#04c584`
- Border: none
- Padding: 0
- Font: 14px / 500 / Pretendard
- Hover: text-decoration: underline
- Use: Inline links within content ("자세히 보기"), table-row jump links

### Cards & Containers

**Data Card (Default)**
- Background: `#ffffff`
- Border: 1px solid `#e1e1e1` (some surfaces use no border + shadow only)
- Radius: 2px
- Padding: 20px 24px
- Shadow: `0 2px 5px rgba(0, 0, 0, 0.12)`
- Use: Recommendation rows, transaction cards, account summary blocks

**Card — Soft Variant**
- Background: `#fbfbfb`
- Border: none
- Radius: 8px
- Padding: 24px
- Shadow: `0 2px 8px rgba(0, 0, 0, 0.1)`
- Use: Marketing/landing feature cards (the rare 8px-radius case)

**Card — Highlight (Selected)**
- Background: `#f3fdfa`
- Border: 1px solid `#10df99`
- Radius: 2px
- Padding: 20px 24px
- Use: Selected state in product comparison lists (cards/loans), recommended-pick highlight

### Inputs & Forms

**Text Input (Default)**
- Background: `#ffffff`
- Text: `#999999` (placeholder) / `#434444` (filled)
- Border: 1px solid `#e1e1e1`
- Radius: 2px
- Padding: 0 16px
- Height: 48px
- Font: 16px / 500 / Pretendard

**Text Input — Focus**
- Background: `#f3fdfa`
- Text: `#434444`
- Border: 1px solid `#10df99`
- Radius: 2px
- Use: Active typing state — the mint tint is the only branded background fill in the system

**Text Input — Error**
- Background: `#ffffff`
- Text: `#434444`
- Border: 1px solid `#fe493d`
- Radius: 2px
- Error message below: 12px / 500 / `#fe493d`
- Use: Validation failure state

**Amount Input (Financial)**
- Background: `#ffffff`
- Text: `#2b2b2b`
- Border: 2px solid `#f5f5f5`
- Radius: 2px
- Padding: 0 16px
- Height: 56px
- Font: 22px / 700 / Pretendard (right-aligned)
- Use: Specialized input for entering won amounts — heavier border (2px), bigger type, right-aligned, 700 weight; treats money input as a heading not a form field

### Badges & Tags

**Status Pill (Brand)**
- Background: `#f3fdfa`
- Text: `#04c584`
- Border: none
- Radius: 41px (rare pill — used only on tag chips, not buttons)
- Padding: 4px 10px
- Font: 12px / 500 / Pretendard
- Use: Filter chips ("연회비 없음", "주유 할인") on card-recommendation pages

**Status Badge (Warning)**
- Background: `#ffffff`
- Text: `#f56200`
- Border: 1px solid `#fd8700`
- Radius: 2px
- Padding: 2px 8px
- Font: 12px / 700 / Pretendard
- Use: Rate-warning, expiry, attention-needed indicators

**Status Badge (Negative)**
- Background: `#ffffff`
- Text: `#fe493d`
- Border: 1px solid `#fe493d`
- Radius: 2px
- Padding: 2px 8px
- Font: 12px / 700 / Pretendard
- Use: Overdue, declined, blocking-issue indicators

### Tables (Financial Data)

**Table Header Row**
- Background: `#f5f5f5`
- Text: `#7b7b7b`
- Border-bottom: 1px solid `#e1e1e1`
- Padding: 12px 16px
- Font: 13px / 700 / Pretendard / uppercase letter-spacing 0.05em
- Use: Column headers on transaction lists, fee schedules

**Table Body Row**
- Background: `#ffffff` (alternates with `#fbfbfb` on dense tables)
- Text: `#434444`
- Border-bottom: 1px solid `#e1e1e1`
- Padding: 12px 16px
- Font: 14px / 500 / Pretendard
- Amounts right-aligned: 14px / 700 / `#2b2b2b` (positive) or `#fe493d` (negative)
- Use: Transaction rows, line-item displays

### Charts & Data Viz

**Chart Series Tokens**
- Series 1: `#34464b` (primary)
- Series 2: `#5c818a` (secondary)
- Series 3: `#1c6c73` (tertiary)
- Series 4: `#a7c7cf` (quaternary / pale)
- Highlight: `#04c584` (always reserved for "your value" / user's own data point)
- Negative: `#fe493d`
- Positive trend: `#04c584`

**Axis & Gridlines**
- Axis label: 10–12px / 500 / `#7b7b7b`
- Gridline: 1px dashed `#e1e1e1`
- Background: `#ffffff` or `#fbfbfb`

### Navigation

- Header: sticky white (`#ffffff`), no shadow at rest, 1px bottom border `#f5f5f5`
- Logo: left, ~24–28px tall, brand wordmark in `#04c584` (or `#2b2b2b` mono variant)
- Nav links: 14px / 500 / Pretendard / `#434444`, hover `#04c584`
- Sign-in CTA: white background, `#2b2b2b` text, 1px solid `#d8dfe6` border, 16px radius, 6px 14px padding, 14px / 400 (the home-page header uses a softer 16px radius for the auth pill — exception to the 2px default; this is the only 16px-radius live observation in the captured DOM)

### Shadows

| Level | Treatment | Use |
|---|---|---|
| Flat | none | Page background, inline elements |
| Soft (L1) | `0 1px 1px rgba(0,0,0,.08)` | Subtle row separators |
| Standard (L2) | `0 2px 5px rgba(0,0,0,.12)` | Default cards — most common (~38 occurrences) |
| Elevated (L3) | `0 4px 9px rgba(0,0,0,.15)` | Dropdowns, popovers |
| Deep (L4) | `0px 2px 8px rgba(0,0,0,.1)` | Floating panels |
| Modal (L5) | `0 17px 50px rgba(0,0,0,.19)` | Modal dialogs |
| Inset | `inset 0 1px 1px rgba(0,0,0,.12)` | Pressed-button / depressed input feel |

---

**Verified:** 2026-05-13 (omd:add-reference CREATE mode)
**Tier 1 sources:** banksalad.com home (live HTML — Pretendard + Jua preload, 16px-radius sign-in pill via playwright DOM); webview-cdn.banksalad.com/.../v2.5c10981711a65fe446400c6ecec36a221b1c3e9e.bundle.css (865 KB CSS bundle — 81× `border-radius: 2px`, primary CTA `#04c584` rule, input focus `#10df99`/`#f3fdfa`, full color-frequency map); blog.banksalad.com/tech/banksalad-product-language-ios/ (BPL principle quote); github.com/banksalad (styleguide org confirmed).
**Tier 2 sources:** getdesign.md/banksalad — **no record** ("No designs found for 'banksalad'"). styles.refero.design/?q=banksalad — **no record** (search returns no banksalad cards). Tier 2 unavailable; Tier 1 treated as authoritative.
**Conflicts unresolved:** none. (Single playwright DOM observation of 16px-radius on the sign-in header pill is documented as an exception in §4 Navigation rather than treated as a token-system conflict — the bundle's overwhelming 81× 2px frequency is the system default.)
**Earlier gap:** none — this is CREATE.

## 5. Layout Principles

### Spacing System
- Base unit: 4px
- Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px
- Card internal padding: 20px / 24px (slightly tighter than Toss's 20px-horizontal default — Banksalad packs more data)
- Table-row vertical padding: 12px (denser than consumer apps)

### Grid & Container
- Marketing/landing: max content width ~1080–1200px, centered
- App / data surfaces: full-width with 16–24px gutters; tables go edge-to-edge on mobile
- Card-recommendation lists: single-column on mobile, 2–3 column grid on desktop
- Charts: full-width within their card container, never bleed outside

### Whitespace Philosophy
- **Density is the brand.** Where Toss says "breathing room for money", Banksalad says "more facts visible without scrolling". A balance, a comparison rate, an interest rate, and three filter chips can coexist in one card.
- **Section rhythm by surface fill.** White (`#ffffff`) and off-white (`#fbfbfb`) sections alternate quietly — not for drama, but to chunk dense data into scannable bands.
- **Tight gaps inside, generous gaps outside.** Inside a comparison card, rows sit on 12px vertical gaps. Between cards, 24–32px. The hierarchy of grouping is communicated through gap-size alone.

### Border Radius Scale
- **2px (dominant — 81 occurrences in CSS)**: Buttons, inputs, cards, badges, banners. The signature.
- 4px: Small badges, inline pills.
- 8px: Soft marketing cards (rare).
- 10–12px: Promotional banner corners (rare).
- 30–41px: Filter pills, tag chips, avatar circles.
- 50%: Avatars, icon backdrops.

Banksalad's 2px is a typographic-engineering commitment: pixel rounding sharp enough to look engineered, soft enough to not draw blood. Any radius ≥ 12px feels Toss-ish and is reserved for explicitly marketing-warmth contexts.

## 6. Depth & Elevation

| Level | Treatment | Use |
|---|---|---|
| Flat (L0) | No shadow | Page background, inline elements |
| Soft (L1) | `0 1px 1px rgba(0,0,0,.08)` | Subtle row lift, list-item separators |
| Standard (L2) | `0 2px 5px rgba(0,0,0,.12)` | Default cards — by far the most common (~38 occurrences) |
| Elevated (L3) | `0 4px 9px rgba(0,0,0,.15)` | Dropdowns, hover-elevated cards |
| Deep (L4) | `0px 2px 8px rgba(0,0,0,.1)` | Floating action panels |
| Modal (L5) | `0 17px 50px rgba(0,0,0,.19)` | Dialog modals, account-switch overlays |
| Inset (L-1) | `inset 0 1px 1px rgba(0,0,0,.12)` | Pressed button state, depressed input visual |
| Halo | `0 0 2px rgba(0,0,0,.26)` | Thin outline on overlay menus and popovers |

**Shadow Philosophy.** Shadows are **always neutral and single-layer.** No colored shadows, no parallax stacks. Where Stripe brands its shadows in navy and Toss uses near-zero shadows for clinical clarity, Banksalad sits between — visible enough that cards lift off the surface, restrained enough that the data inside is what the eye lands on. The signature `0 2px 5px rgba(0,0,0,.12)` is a small, low-cost lift used 38× in the bundle.

## 7. Do's and Don'ts

### Do
- Use `#04c584` for every interactive moment — CTAs, links, focus accents, "your data point" on charts
- Use `#10df99` for hover (it's *brighter* than `#04c584` — Banksalad lightens on interaction)
- Use `#f3fdfa` mint tint on input focus background — the only branded surface tint in the system
- Keep border-radius at 2px for buttons, inputs, cards, badges — the system's geometric signature
- Use Pretendard with the full Korean fallback stack; 700 as default weight for headings and CTAs
- Use `#2b2b2b`/`#434444` warm near-blacks for type instead of `#000000`
- Use the teal-slate family (`#34464b`/`#5c818a`/`#1c6c73`/`#a7c7cf`) for chart series — cooler than brand green by design
- Use `#04c584` only for "your value" on a chart — never as a generic data fill
- Right-align financial amounts in tables; use 700 weight for amounts even at 14px
- Use comma-separated won amounts with the currency unit in 500 weight (`12,400,000원`)

### Don't
- Don't use Toss's 12px+ rounded corners — Banksalad is 2px; 8px is the soft-marketing exception
- Don't use Kakao yellow, KakaoPay yellow, or any warm accent for primary interaction — green is the sole interactive hue
- Don't use BM JUA inside the app — Jua is for marketing-landing display moments only
- Don't use weight 400 for body — Banksalad's body weight is 500
- Don't apply colored shadows (blue, green, branded) — shadows are always neutral black
- Don't pad financial cards generously like Toss — Banksalad packs density; data is the aesthetic
- Don't approximate currency amounts (`약 120만원`) on primary financial surfaces — bare numerals with commas only
- Don't use `#0099ff` info-blue for default links — green is the default link color; blue is reserved for *external* references
- Don't use Pretendard 300 on body — light weights only at hero display sizes (52px+)
- Don't sprinkle the brand green on chart series — green is for interaction, teal-slate is for data

## 8. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <600px | Single column, full-width tables (horizontal scroll if needed), 16px gutters |
| Tablet | 600–1024px | 2-column card grids, 20px gutters |
| Desktop | 1024–1280px | Full marketing layout, 3-column feature grids |
| Large | >1280px | Centered content max-width ~1200px |

### Touch Targets
- Buttons minimum 42px height (default), 56px for hero display CTAs
- Table rows minimum 44px (slightly denser than 48px standard — Banksalad accepts a tighter tap)
- Filter pill chips: 28–32px height
- Input minimum 48px height; amount-input 56px

### Collapsing Strategy
- Hero: 52px → 36px on mobile, weight 700 maintained
- Marketing 3-col feature grids → 2-col → single column
- Comparison tables: maintain table form on tablet, switch to stacked cards on mobile (each row becomes a card with key/value pairs)
- Charts: full-width, maintain aspect ratio, axis-label font drops 12px → 10px on mobile
- Filter chip rows: horizontal scroll (no wrap) on mobile to preserve the chip rhythm

### Image Behavior
- Card/product logos: 24–40px, consistent square framing within rows
- Chart screenshots in marketing: full-width on mobile, 2-col on desktop
- Decorative illustrations: rare; when used, locked to a single accent illustration per landing surface (no illustration overload — data is the visual)

## 9. Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Salad Green (`#04c584`)
- Hover: Hover Green (`#10df99`)
- Page background: White (`#ffffff`)
- Surface alt: Off-white (`#fbfbfb`)
- Neutral surface: (`#f5f5f5`)
- Heading text: Warm near-black (`#2b2b2b`)
- Body text: (`#434444`)
- Caption: (`#7b7b7b`)
- Placeholder: (`#999999`)
- Border: (`#e1e1e1`)
- Focus background tint: Mint (`#f3fdfa`)
- Chart series: `#34464b` / `#5c818a` / `#1c6c73` / `#a7c7cf`
- Error: `#fe493d`
- Warning: `#fd8700` / `#f56200`

### Example Component Prompts
- "Create a Banksalad-style primary CTA: `#04c584` background, white text, 2px border-radius (not 12px), 700-weight Pretendard at 16px, 12px 24px padding, 42px height. Hover lightens to `#10df99`."
- "Design a card-recommendation row: white background, 1px solid `#e1e1e1` border, 2px radius, 20px 24px padding, shadow `0 2px 5px rgba(0,0,0,.12)`. Card logo 32px left, title 16px/700 `#2b2b2b`, three filter chips below (`#f3fdfa` bg, `#04c584` text, 41px radius, 12px/500), annual-fee figure right-aligned 18px/700 with '원' suffix in 500."
- "Build a focused amount input: 2px border `#f5f5f5`, on focus border `#10df99` and background `#f3fdfa`. Text 22px/700 right-aligned, `#2b2b2b`, won unit in 500 weight following the digits."
- "Create a data chart: white background, axis labels 10px/500 `#7b7b7b`, gridlines 1px dashed `#e1e1e1`. Series 1 `#34464b`, series 2 `#5c818a`, series 3 `#1c6c73`. User's own data point in `#04c584` to make 'your value' pop against neutral teal-slate."
- "Design a transaction table row: alternating `#ffffff` / `#fbfbfb` background, 12px 16px padding, 1px solid `#e1e1e1` bottom border. Date column 14px/500 `#7b7b7b`, merchant 14px/500 `#434444`, amount right-aligned 14px/700 — `#2b2b2b` for positive, `#fe493d` for negative."

### Iteration Guide
1. **Default radius is 2px.** If the AI produces 12px or 16px corners, reject — that's Toss, not Banksalad.
2. **Default weight is 700 for anything important.** Headings, CTAs, financial amounts. 500 for body. Never 400 for body.
3. **Green is for interaction only.** Never use `#04c584` as a generic background fill or decorative element. It always means: the user can tap this, or this is the user's own data.
4. **Hover lightens.** `#04c584` → `#10df99` on hover (the opposite of conventional darken-on-hover). This is a signature.
5. **Shadows are neutral and single-layer.** `0 2px 5px rgba(0,0,0,.12)` is the workhorse. No colored shadows.
6. **Chart series are teal-slate, not green.** `#34464b` / `#5c818a` / `#1c6c73` / `#a7c7cf`. Reserve green for the user's own data point.
7. **Pretendard is non-negotiable.** Always include the full Korean fallback stack. Jua only for marketing display.

---

## 10. Voice & Tone

Banksalad speaks like a **trustworthy financial advisor who happens to read the regulations carefully** — calm, factual, slightly older-feeling than Toss, never the "friend with money" voice that consumer-app fintech defaults to. Where Toss says *"송금 완료"*, Banksalad says *"내 신용점수가 5점 올랐어요. 이번 달 카드 결제 이력이 안정적이었기 때문이에요."* The voice explains *why* the number changed, not just that it changed. Korean is the primary register; English UI strings are translations, not parity.

| Context | Tone |
|---|---|
| CTAs | Imperative, concrete outcome. `내 카드 찾기`, `대출 한도 확인하기`, `신청하기`. Never `시작하기 →` with an arrow flourish. |
| Section headlines | Statement of fact, not a hook. `이번 달 지출 분석` not `이번 달, 얼마나 썼는지 보러 갈까요?`. |
| Recommendations | Justified. Every recommended card or loan has a one-sentence reason next to it (`연 30만원 이상 절약될 수 있어요`). Never a bare ranked list. |
| Financial figures | Bare numerals with commas. `1,240,000원`. Approximations (`약 124만원`) are forbidden on primary surfaces. |
| Success messages | One-line confirmation + the relevant figure. `신용점수가 855점으로 올랐어요.` No emoji, no exclamation. |
| Error / validation | Specific cause + one-line action. `주민등록번호가 일치하지 않아요. 다시 확인해주세요.` Never `오류가 발생했습니다`. |
| Empty states | Explain the *why*, then suggest one next step. `아직 연동된 카드가 없어요. 카드를 연동하면 자동으로 지출 분석이 시작돼요.` |
| Legal / disclosure | Formal `~합니다` endings. Pinned at the bottom of recommendation cards. Treated as part of the product, not a footer afterthought. |
| Health-asset (DNA, screening) | Same calm advisor voice as finance. No marketing exuberance about "discovering your DNA". Just `이번 검사로 18가지 항목을 확인할 수 있어요`. |

**Forbidden phrases.** `오류가 발생했습니다`, `Oops`, `간단하게`, `최고의 ~`, `놓치지 마세요`, exclamation marks on routine CTAs, emoji on financial surfaces, approximations on money (`약 ~원`), `놀라운 절약` / "amazing savings" / superlative-driven recommendations. Banksalad's voice is the opposite of clickbait — the user came here to think about money, and the product should respect the seriousness of that intent.

## 11. Brand Narrative

Banksalad is the consumer brand of **Rainist (레이니스트)**, founded in **2012 by Kim Tae-hoon (김태훈)** — a Sogang University graduate who started the company inside the Smilegate game-studio incubator and whose **founding team manually classified 16 hours a day of Korean financial-product data to build the first comparison database** ([Hankyung 2019-03-12](https://www.hankyung.com/article/2019031275551)). The founding rejection was specific: every legacy Korean financial portal in 2012 (Bankrate-style aggregators, bank-run comparison pages) presented credit cards and loans in alphabetical lists optimized for the issuer, not the user. Kim Tae-hoon's stated thesis was *"정보 비대칭성을 해소해 누구나 똑똑해지는 세상을 만들겠다"* — "resolve information asymmetry so anyone can become smart [about their own money]" (founder interviews, Korean press 2018–2019). The product's design language follows directly from that thesis: **more facts, clearly tiered, with the reason next to every recommendation.**

Banksalad's monthly active users tripled to **1.5M in early 2019** ([Korea Herald 2019-02-22](http://www.koreaherald.com/view.php?ud=20190222000548)). The company raised a **₩45B ($37M USD) Series C at a ₩300B ($247M) valuation in 2019** ([Korea Herald 2019-08-28](https://www.koreaherald.com/article/2087712)) and has raised **$169.96M cumulatively** to date (PitchBook). Today the product spans credit-card recommendation, personal loans, mortgages, deposits/savings, and — uniquely — **a free DNA-based health-screening service** that extends the "manage your assets" framing from financial assets to health assets. The home-page tagline as of 2026-05-13 reads *"뱅크샐러드 \| 금융을 넘어 건강 자산까지"* ("Banksalad — from finance to health assets"), making that extension the brand's current positioning.

The design system is internally called **BPL — Banksalad Product Language**, documented on the official tech blog ([blog.banksalad.com/tech/banksalad-product-language-ios](https://blog.banksalad.com/tech/banksalad-product-language-ios/)). BPL's most-quoted principle is *"Communication cost is most expensive. Code and Show first, argue after that."* BPL is implemented on iOS with LayoutDrivenUI + RxSwift, on Android in Kotlin, on Web through the CSS bundle this DESIGN.md was extracted from. The system explicitly avoids premature component abstraction — similar components stay independent, matching how designers structure their Figma libraries. The mint-green (`#04c584`), the 2px radius, the Pretendard 700 default, the teal-slate chart palette — all are BPL primitives.

What Banksalad refuses: the cheerful consumer-app voice of Toss and KakaoPay (banksalad explains; it does not delight), the institutional-indigo of legacy Korean banks (which is why it picked green, not blue), the playful illustration of Kakao-family products (Banksalad does not use mascot characters), and the data-density of Bloomberg-terminal aesthetics (the tables are dense but the type is human-readable). Banksalad sits in a narrow middle: serious enough to be an advisor, modern enough to be the app a 26-year-old opens between subway stops.

## 12. Principles

1. **Show the number, then show the reason.** Every recommended card, loan, or asset comes with a one-sentence justification next to the figure. A ranked list without reasons is a violation of the brand. UI implication: every recommendation card must have a "justification line" slot in its component contract.
2. **Density is trust.** Where consumer-app fintech treats whitespace as luxury, Banksalad treats density as competence. A user who can see four comparison rows at once is being respected as a researcher. UI implication: card padding 20–24px, not 32px+. Tables ship as tables, not as stacked single-rows.
3. **Green is interaction, not decoration.** `#04c584` only appears where the user can act (CTA, link, focus, selection) or where the user's own data is shown ("your value" on a chart, "your score"). Never on a decorative gradient, never as a page-section background. UI implication: never use brand green as a fill that does not change on hover.
4. **2px is a philosophical commitment.** The sharp corner reads as data-tool; Toss/Kakao's 12–16px reads as consumer-toy. Banksalad chooses to look engineered. UI implication: do not import any consumer-app card with rounded corners as-is; re-corner to 2px.
5. **Numerals are headings.** Financial amounts at 20px+ are styled with the same hierarchical weight (700) as page titles. Money is information of the highest priority — it gets the typographic treatment of a heading, never of body. UI implication: amounts use heading-class typography tokens.
6. **The reason for the recommendation is part of the product.** Disclaimers, comparison criteria, and rate sources are not legal footers — they are pinned inside the recommendation card, in the same visual frame as the recommendation itself. UI implication: every recommendation component reserves a `disclosure` slot that is always rendered, not collapsed-by-default.
7. **Korean and Latin numerals must align.** Pretendard's optical alignment between 한글 and Latin numerals is non-negotiable — a column of `1,240,000원` and `$1,240` should read as one column, not two scripts arguing. UI implication: never substitute a Latin-only font for numeric display; Pretendard handles both.
8. **Charts use teal-slate, not brand green, for the field.** Reserving green for the user's own value makes the user's position immediately legible against neutral series. UI implication: chart `seriesColors` defaults to `[#34464b, #5c818a, #1c6c73, #a7c7cf]`; user's series defaults to `#04c584`.
9. **Approximations are a betrayal.** `약 ~원` on a primary money surface tells the user the product does not actually know the number. Banksalad's brand promise is information clarity; rounded figures are forbidden where the precise figure exists. UI implication: financial-amount components do not accept a `round: true` flag.

## 13. Personas

*Personas below are fictional archetypes informed by publicly observable Banksalad user segments (Korean millennials managing credit-card portfolios, freelancers comparing loan products, mid-life users tracking health-and-finance side by side), not individual people.*

**박지혜 (Park Ji-hye), 31, Seoul.** Senior designer at a Seoul-based scaleup. Opens Banksalad once a week to scan her credit-card spend-by-category report. Switches cards every 18 months based on whichever one Banksalad's recommendation engine surfaces with the best annual-savings figure for her actual usage pattern — *not* the one with the flashiest sign-up bonus. Reads the one-sentence justification under every recommendation before tapping; would close the app permanently if it ever shipped a "best card 🔥" list without reasons.

**김상민 (Mr. Kim), 47, Daegu.** Self-employed, runs a small import business. Uses Banksalad primarily for comparing business-friendly credit cards and tracking interest-rate movements on his three commercial loans. Trusts the product because the rate comparison shows the source date and the underlying assumption (`연 환산 기준`). Pays attention to the disclosure text inside each recommendation card — would lose trust immediately if a recommendation appeared without its rate basis.

**이수연 (Lee Su-yeon), 28, Seongnam.** UX researcher. Uses Banksalad for two unrelated reasons: monthly spend analysis, and the free DNA-based health screening. Finds the same voice across both surfaces (calm, factual, advisor-tone) reassuring — it makes the health-screening feel like an extension of "manage your assets" rather than a sudden pivot. Compares Banksalad's spend analysis to Toss's and prefers Banksalad's because *"Toss는 다 정리되어 있고 깔끔한데, 뱅크샐러드는 왜 그런지를 알려줘요"* (illustrative paraphrase) — Toss tidies, Banksalad explains.

**조현우 (Cho Hyun-woo), 39, Busan.** Mid-career operations manager. Reviews Banksalad's monthly credit-report widget — has been watching his credit score climb from 820 to 868 over 14 months. Doesn't tap CTAs; uses Banksalad strictly as a dashboard. Trusts the green `#04c584` "your score" indicator on the score-trend chart because it always shows him *his* position against the teal-slate distribution of the population — the green-vs-teal distinction tells him at a glance which data is about him.

## 14. States

| State | Treatment |
|---|---|
| **Empty (no linked accounts)** | White canvas. Single short paragraph in `#434444` body text explaining why the screen is empty (`아직 연동된 카드가 없어요. 카드를 연동하면 자동으로 지출 분석이 시작돼요.`). One primary CTA in Salad Green (`#04c584`, 2px radius). No illustration. |
| **Empty (filter cleared)** | Single line of `#7b7b7b` caption (`조건에 맞는 결과가 없어요. 필터를 조정해주세요.`). No CTA — user adjusts filters themselves. |
| **Empty (no transactions this period)** | Two-line message in `#434444` explaining the filter scope (`선택한 기간에 거래 내역이 없어요. 다른 기간을 선택하거나 카드 연동을 확인해보세요.`). |
| **Loading (first paint)** | Skeleton blocks at `#f5f5f5` matching the final layout exactly. Financial amounts render as `--원` placeholders rather than skeleton bars — a skeleton bar that resolves to a number is disorienting; `--` is honest. 1s shimmer with 8% white highlight using a `linear-gradient` sweep. |
| **Loading (refresh / in-place)** | Subtle `#04c584` 2px progress bar at top of the section. Previous values stay visible. Never block the table during refresh. |
| **Error (inline field)** | `#fe493d` 1px border on the input, 12px error text below in `#fe493d` weight 500. One actionable sentence (`주민등록번호가 일치하지 않아요. 다시 확인해주세요.`). |
| **Error (recommendation fetch failed)** | Inline banner inside the recommendation card area. `#fe493d` left border, white background, 14px `#434444` text explaining what failed + a `다시 시도하기` button in the retry-button style (`#10df99` resting → `#04c584` on hover). Never a generic toast. |
| **Error (data freshness warning)** | Soft warning banner with `#fd8700` left accent bar, white background, 13px `#7b7b7b` text noting the data is N hours stale. Non-blocking — the user can still see the (possibly stale) figures. |
| **Success (action confirmed)** | Inline confirmation row in `#f3fdfa` mint-tint background, `#04c584` 16px / 700 confirmation text, the relevant figure in 22px / 700 `#2b2b2b` below. No toast for important actions — they get their own confirmation surface. |
| **Success (passive update)** | 3s auto-dismiss toast at top-right. `#2b2b2b` background (NOT brand green — green is reserved for interactive surfaces), white 14px / 500 text, 2px radius, shadow `0 2px 5px rgba(0,0,0,.12)`. No emoji. |
| **Skeleton** | `#f5f5f5` blocks at exact final dimensions, 2px radius matching the component being loaded. 1s shimmer. Financial-amount slots show `--원`, not a bar. |
| **Disabled** | Background `#e1e1e1`, text `#acacac`, 2px radius preserved. Cursor `not-allowed`. The geometry stays identical to the enabled state so re-enabling does not shift layout. |
| **Pressed (button)** | Inset shadow `inset 0 1px 1px rgba(0,0,0,.12)` + background shifts by ~5% darker for the press duration. Returns instantly on release (no spring). |

## 15. Motion & Easing

**Durations:**

| Token | Value | Use |
|---|---|---|
| `motion-instant` | 0ms | State commits, checkbox flips, focus ring appearance |
| `motion-fast` | 150ms | Hover, focus, button press overlays, inline value updates |
| `motion-standard` | 250ms | Card expand, dropdown open, tab content switch, modal open |
| `motion-slow` | 400ms | Page-level transitions, recommendation-card reveal animation |
| `motion-data` | 600ms | Chart series draw-in, score-bar count-up — slower because the user needs time to read the number |

**Easings:**

| Token | Curve | Use |
|---|---|---|
| `ease-enter` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Arriving — modals, dropdowns, sheets |
| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals |
| `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Two-way transitions, chart draw-in |
| `ease-data` | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | Score count-up, chart series — eases out gradually so the final value is the calm resting state |

**Explicitly forbidden.** No spring overshoot anywhere. No bounce. No `cubic-bezier` with a middle control above `1.0`. Banksalad's voice is *advisor*, not *delighter* — spring-easing reads as a consumer app celebrating a transaction, which is the opposite of the brand promise. Where Toss licenses spring easing only for the money-moved checkmark, Banksalad does not license it at all.

**Signature motions.**

1. **Score count-up.** When a credit-score or asset-total updates, the number animates from the previous value to the new value across `motion-data` (600ms) with `ease-data`. The duration is deliberately slow — the user is supposed to read the change, not see it flash. The Korean numeric separators (`,`) re-flow correctly during the count.
2. **Chart series draw-in.** Time-series charts draw left-to-right in `motion-data` with `ease-standard`. The user's own series (`#04c584`) is drawn *last*, so the eye lands on the user's own data after the surrounding distribution has been established.
3. **Recommendation card reveal.** When a fresh recommendation set loads, cards fade in with `motion-standard / ease-enter` from `opacity: 0; translateY(4px)`. Translate is intentionally small (4px, not 20px) — the cards arrive, they do not fly in.
4. **Reduce motion.** Under `prefers-reduced-motion: reduce`, all `motion-*` tokens collapse to `motion-instant`. Score count-ups become instant value swaps. Chart draw-ins render their final state immediately. Banksalad remains fully usable; nothing in the product is information-dependent on motion.

<!--
OmD v0.1 Sources — Philosophy Layer (sections 10–15)

Direct verification via WebFetch + curl (2026-05-13):
- https://www.banksalad.com/ — confirms current tagline "뱅크샐러드 | 금융을 넘어 건강 자산까지"
  and the Pretendard + BM JUA font stack via preload <link> tags.
- https://webview-cdn.banksalad.com/banksalad-web/static/dist/v2.5c10981711a65fe446400c6ecec36a221b1c3e9e.bundle.css
  (865 KB) — all token-level claims (#04c584 primary green, 2px dominant radius,
  Pretendard with full Korean fallback, 700 default weight, 0 2px 5px rgba(0,0,0,.12)
  standard shadow, input focus border #10df99 / background #f3fdfa).
- https://blog.banksalad.com/tech/banksalad-product-language-ios/ — confirms
  the design system is internally called "BPL" (Banksalad Product Language)
  and the quoted principle "Communication cost is most expensive. Code and Show
  first, argue after that."
- https://github.com/banksalad — confirms the official org and the
  banksalad/styleguide public repo.

Brand facts via WebSearch (2026-05-13):
- Hankyung 2019-03-12 — manual 16-hour/day data classification origin
- Korea Herald 2019-02-22 — 1.5M MAU early 2019
- Korea Herald 2019-08-28 — ₩45B Series C at ₩300B valuation
- PitchBook — $169.96M total raised

Founder mission quote "정보 비대칭성을 해소해 누구나 똑똑해지는 세상을 만들겠다"
is attributed to Kim Tae-hoon per multiple Korean press interviews summarized
in the WebSearch result; the exact phrasing is widely cited in Korean fintech
coverage of Banksalad.

Personas (§13) are fictional archetypes informed by publicly described
Banksalad user segments (Korean millennials managing credit-card spend,
self-employed users comparing rates, UX researchers using the health-asset
extension, mid-career users using Banksalad as a passive dashboard). Names
are illustrative; they do not refer to real people. Yi Su-yeon's paraphrase
of Toss-vs-Banksalad voice in §13 is explicitly marked illustrative.

Interpretive claims (e.g., "2px is a philosophical commitment", "green is for
interaction, not decoration", "approximations are a betrayal") are editorial
readings of BPL's observable design choices, not directly sourced Banksalad
statements. They are anchored in the principle quote from BPL_iOS
("Communication cost is most expensive...") and the founder's mission
("resolve information asymmetry").
-->


---
Source: https://oh-my-design.kr/design-systems/banksalad · Raw twin of references/banksalad/DESIGN.md
Install 356 verified references for your AI coding agent: npx oh-my-design-cli install-skills