zugzbot 1.0.21 → 1.0.23

package/.opencode/oh-my-design/web/references/banksalad/DESIGN.md

@@ -1,688 +0,0 @@
----
-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").
--->