oh-my-design-cli 1.3.9 → 1.5.1

package/web/references/tossbank/DESIGN.md

@@ -0,0 +1,519 @@
+---
+id: tossbank
+name: Toss Bank
+country: KR
+category: fintech
+homepage: "https://www.tossbank.com"
+primary_color: "#0064FF"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=tossbank.com&sz=128"
+verified: "2026-05-27"
+omd: "0.1"
+---
+
+# Design System Inspiration of Toss Bank (토스뱅크)
+
+## 1. Visual Theme & Atmosphere
+
+Toss Bank is the licensed internet-only bank inside the Toss universe — the moment the calm, blue-accented Toss design language stops being a money-transfer convenience and becomes an actual chartered bank holding your deposits. Where the parent Toss app feels like a friend who happens to handle money, Toss Bank carries a slightly heavier responsibility: this is a *bank*, regulated, FSS-supervised, holding real balances and issuing real cards. The design resolves that tension by doubling down on the same calm-confident minimalism rather than reaching for institutional gravitas. The canvas is clean white (`#ffffff`), headings are a warm near-black charcoal (`#191f28`), and a single confident blue does all the interactive work. The atmosphere is "trustworthy because it's clear, not because it's stern."
+
+The brand color is the official Toss blue `#0064FF` (Pantone 2175 C) — the same cerulean that anchors the entire Viva Republica family. On marketing and brand surfaces it appears as that saturated `#0064FF`; in the running product UI, interactive elements lean on the slightly softer, more legible `#3182f6` (blue500) inherited from the shared Toss design language. This brand-vs-UI blue split is deliberate and load-bearing: `#0064FF` is the logo and the promise, `#3182f6` is the tappable surface. The optimism of the color is the entire thesis — money at a bank can feel light, not bureaucratic.
+
+Typography is **Toss Product Sans**, the custom typeface developed with Sandoll and Leedotype for financial contexts, where numerals and Latin characters are optically balanced against Korean hangul and financial symbols (`%`, comma separators, `±`) are tuned for small-size legibility. Toss Bank leans hard on tabular (fixed-width) numerals — a bank is, at its core, a column of numbers, and those numbers must never jitter.
+
+**Key Characteristics:**
+- Toss brand blue `#0064FF` (Pantone 2175 C) for logo/marketing; UI blue `#3182f6` for interactive surfaces
+- Clean white canvas (`#ffffff`) with warm charcoal text (`#191f28`) — trust through clarity, not weight
+- Toss Product Sans with Korean-Latin optical balancing and tabular numerals for balances and rates
+- Minimal, single-layer black shadows — visual noise reads as a credibility tax in banking
+- "이자 every day" product story: interest accruing daily is a recurring hero motif
+- 375px mobile-first baseline; spacious summary screens, dense detail screens
+- Blue is interaction, never decoration — illustrations and ornaments stay neutral
+
+## 2. Color Palette & Roles
+
+Toss Bank reuses the shared Toss design-language palette. Brand-tier `#0064FF` is verified from the official Toss brand resource center (brand.toss.im, Pantone 2175 C); UI-tier blues follow the documented Toss Product/TDS scale.
+
+### Brand (Logo / Marketing)
+- **Toss Brand Blue** (`#0064FF`): Pantone 2175 C. Logo lockup, marketing hero blocks, app icon. The promise color.
+- **Brand Gray** (`#202632`): Secondary brand color (Pantone 433 C). Corporate, legal, and footer contexts.
+
+### Primary (UI Interactive)
+- **Toss Blue** (`#3182f6`): `blue500`. Primary interactive color — CTAs, links, active states, selection. The workhorse of every tappable element in-product.
+- **Blue Hover** (`#2272eb`): `blue600`. Hover / pressed state for blue500 elements.
+- **Blue Light** (`#e8f3ff`): `blue50`. Informational backgrounds, subtle blue-tinted surfaces, "이자 받기" highlight blocks.
+
+### Surfaces
+- **Pure White** (`#ffffff`): Page background, card surfaces.
+- **Grey 50** (`#f9fafb`): Lightest gray surface, section backgrounds.
+- **Grey 100** (`#f2f4f6`): Secondary background, card fills, disabled surfaces, skeleton blocks.
+
+### Text
+- **Dark Charcoal** (`#191f28`): `grey900`. Primary headings, balances, strongest text. Warm near-black.
+- **Grey 800** (`#333d4b`): Strong labels, navigation text.
+- **Grey 700** (`#4e5968`): Emphasized body text, sub-headings.
+- **Grey 600** (`#6b7684`): Body text, descriptions, metadata.
+- **Grey 500** (`#8b95a1`): Caption text, secondary labels.
+- **Grey 400** (`#b0b8c1`): Placeholder text, disabled icon fills.
+
+### Borders
+- **Border Default** (`#e5e8eb`): grey200. Standard card borders, dividers, input outlines.
+- **Border Strong** (`#d1d6db`): grey300. Emphasized borders, active input outlines.
+
+### Semantic
+- **Error Red** (`#f04452`): `red500`. Errors, destructive actions, negative balance/expense indicators.
+- **Success Green** (`#03b26c`): `green500`. Positive indicators, interest earned, confirmations.
+- **Warning Orange** (`#fe9800`): `orange500`. Pending states, attention-needed.
+- **Caution Yellow** (`#ffc342`): `yellow500`. Soft warnings, highlight moments.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `"Toss Product Sans", "Tossface", "SF Pro KR", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", Roboto, "Noto Sans KR", sans-serif`
+- **Monospace**: `"SF Mono", SFMono-Regular, Menlo, Consolas, monospace`
+- **Emoji**: `Tossface` — Toss's custom emoji font, decorative only, never on balance-handling screens
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Notes |
+|------|------|------|--------|-------------|-------|
+| Display Hero | Toss Product Sans | 30px | 700 | 40px (1.33) | Onboarding, hero moments |
+| Display Large | Toss Product Sans | 26px | 700 | 36px (1.38) | Section headers, key metrics |
+| Heading Large | Toss Product Sans | 22px | 700 | 30px (1.36) | Feature titles, modal headers |
+| Heading | Toss Product Sans | 20px | 600 | 28px (1.40) | Card headings, sub-sections |
+| Subtitle | Toss Product Sans | 16px | 600 | 24px (1.50) | List headers, nav titles |
+| Body Large | Toss Product Sans | 16px | 400 | 24px (1.50) | Descriptions, explanations |
+| Body | Toss Product Sans | 14px | 400 | 22px (1.57) | Standard reading text |
+| Caption | Toss Product Sans | 12px | 400 | 18px (1.50) | Timestamps, fine print, rate disclaimers |
+| Balance Display | Toss Product Sans | 30px+ | 700 | tight | Account balance — tabular numerals |
+
+### Principles
+- **Three weights from eight**: ships 300–950, UI uses 400 (body), 600 (emphasis), 700 (balances + headings).
+- **Tabular numerals for money**: balances, interest rates, transaction amounts all use fixed-width digits so columns never shift.
+- **Korean-Latin optical balance**: hangul and Latin/numerals independently weighted so mixed text reads harmoniously.
+- **Rate legibility**: `%` and decimal points (interest is sold in 0.1% increments) get enhanced small-size clarity.
+
+## 4. Component Stylings
+
+### Buttons
+
+Toss Bank reuses the TDS `<Button>` system — variant × color × size, default `xlarge` (56px). Geometry follows the shared Toss Product Sans / TDS Mobile scale.
+
+**Fill / Primary**
+- Background: `#3182f6`
+- Text: `#ffffff`
+- Border: none
+- Radius: 16px
+- Padding: 0 20px
+- Font: 17px / 600 / Toss Product Sans
+- Pressed: dim overlay via `--button-pressed-opacity`
+- Disabled: bg opacity scaled by `--button-disabled-opacity-color`
+- Use: Primary CTA (계좌 만들기, 이자 받기, 송금하기) — 56px tall
+
+**Fill / Dark**
+- Background: `#4e5968`
+- Text: `#ffffff`
+- Border: none
+- Radius: 16px
+- Padding: 0 20px
+- Font: 17px / 600 / Toss Product Sans
+- Use: Strong neutral action (설정 저장, 본인인증 진행)
+
+**Fill / Danger**
+- Background: `#f04452`
+- Text: `#ffffff`
+- Border: none
+- Radius: 16px
+- Padding: 0 20px
+- Font: 17px / 600 / Toss Product Sans
+- Use: Destructive confirmation (계좌 해지, 카드 분실신고)
+
+**Weak / Primary**
+- Background: `rgba(100, 168, 255, 0.15)`
+- Text: `#2272eb`
+- Border: none
+- Radius: 16px
+- Padding: 0 20px
+- Font: 17px / 600 / Toss Product Sans
+- Use: Secondary action paired with Fill / Primary on the same screen
+
+**Weak / Dark**
+- Background: `rgba(2, 32, 71, 0.05)`
+- Text: `#4e5968`
+- Border: none
+- Radius: 16px
+- Padding: 0 20px
+- Font: 17px / 600 / Toss Product Sans
+- Use: Cancel / neutral secondary (취소, 닫기, 나중에 하기)
+
+Size scale (height · font · radius): `small` 32px · 13px/600 · 8px; `medium` 38px · 15px/600 · 10px; `large` 48px · 17px/600 · 14px; `xlarge` (default) 56px · 17px/600 · 16px. Display modes: `inline`, `block`, `full`.
+
+### Inputs
+
+Toss Bank reuses TDS `<TextField>` (`box` default, plus `line` / `big` / `hero`). `SecureKeypad` (randomised-position PIN) and `SplitTextField` (OTP / 인증번호) are first-class for the banking flows.
+
+**Box (default)**
+- Background: `rgba(0, 23, 51, 0.02)`
+- Text: `#333d4b`
+- Border: 1px solid `rgba(2, 32, 71, 0.05)`
+- Radius: 14px
+- Padding: 14px 16px
+- Font: 17px / 400 / Toss Product Sans
+- Placeholder: `#b0b8c1`
+- Focus: border `#3182f6`
+- Use: Standard form input — account name, memo
+
+**Hero (amount entry)**
+- Background: transparent
+- Text: `#333d4b`
+- Border: 1px solid `#e5e8eb` (bottom only)
+- Radius: 0px
+- Padding: 0px 0px 4px
+- Font: 30px / 600 / Toss Product Sans
+- Use: Large transfer/deposit amount entry — tabular numerals
+
+**Error**
+- Background: `rgba(0, 23, 51, 0.02)`
+- Text: `#333d4b`
+- Border: 1px solid `#f04452`
+- Radius: 14px
+- Padding: 14px 16px
+- Font: 17px / 400 / Toss Product Sans
+- Use: `hasError` state — paired with inline help in `#f04452`
+
+### Cards
+
+**Account / Balance Card**
+- Background: `#ffffff`
+- Border: none
+- Radius: 16px
+- Padding: 24px
+- Shadow: `0px 2px 8px rgba(0,0,0,0.08)`
+- Use: The hero surface — account name, balance (30px/700, tabular), "이자 매일 받기" affordance
+
+**Standard Card**
+- Background: `#ffffff`
+- Border: none
+- Radius: 12px
+- Padding: 20px
+- Shadow: `0px 2px 8px rgba(0,0,0,0.08)`
+- Use: Transaction summary, product cards
+
+**Compact (list row)**
+- Background: `#ffffff`
+- Border: 1px solid `#e5e8eb`
+- Radius: 8px
+- Padding: 12px
+- Shadow: none
+- Use: Transaction list rows where a soft 1px edge replaces shadow
+
+### Badges
+
+**Fill / Blue**
+- Background: `#3182f6`
+- Text: `#ffffff`
+- Border: none
+- Radius: 12px
+- Padding: 3px 7px
+- Font: 13px / 700 / Toss Product Sans
+- Use: Status emphasis ("NEW", "한도 상향")
+
+**Weak / Green**
+- Background: `rgba(34, 197, 94, 0.15)`
+- Text: `#16a34a`
+- Border: none
+- Radius: 12px
+- Padding: 3px 7px
+- Font: 13px / 700 / Toss Product Sans
+- Use: Interest-earned / completed state (입금 완료)
+
+**Weak / Elephant**
+- Background: `rgba(2, 32, 71, 0.05)`
+- Text: `#4e5968`
+- Border: none
+- Radius: 12px
+- Padding: 3px 7px
+- Font: 13px / 700 / Toss Product Sans
+- Use: Neutral metadata badge (적금, 입출금)
+
+### Tabs
+
+**Bottom Tab (Active)**
+- Background: `#ffffff`
+- Text: `#191f28`
+- Border: 1px solid `#e5e8eb` (top border only)
+- Active: `#3182f6` icon + label
+- Font: 11px / 500 / Toss Product Sans
+- Use: Bottom navigation — fixed white, no shadow
+
+**Segmented**
+- Background: `#f2f4f6`
+- Text: `#8b95a1`
+- Border: none
+- Radius: 12px
+- Padding: 8px 16px
+- Active: `#ffffff` bg + `#191f28` text + `0px 2px 4px rgba(0,0,0,0.06)` shadow
+- Font: 14px / 600 / Toss Product Sans
+- Use: 입금/출금 내역 switching, 월/주 전환
+
+### Toasts
+
+**Default**
+- Background: `#191f28`
+- Text: `#ffffff`
+- Border: none
+- Radius: 8px
+- Padding: 12px 16px
+- Shadow: `0px 4px 12px rgba(0,0,0,0.12)`
+- Font: 14px / 500 / Toss Product Sans
+- Use: Transient feedback ("복사되었어요"). Money-moved success is a dedicated screen, never a toast.
+
+### Dialogs
+
+**Bottom Sheet**
+- Background: `#ffffff`
+- Text: `#191f28`
+- Border: none
+- Radius: 16px (top corners only)
+- Padding: 24px 20px
+- Shadow: `0px -4px 12px rgba(0,0,0,0.08)`
+- Use: Selection, picker, secondary form (account picker, 송금 확인)
+
+### Toggles
+
+**Default**
+- Background: `#3182f6` (on) / `#d1d6db` (off)
+- Border: none
+- Radius: 9999px
+- Thumb: `#ffffff` 18px circle, `0px 1px 2px rgba(0,0,0,0.1)` shadow
+- Use: 매일 이자 받기 자동화, 알림 설정
+
+---
+
+**Verified:** 2026-05-27
+**Tier 1 sources:** tossbank.com (live WebFetch — confirmed clean white canvas, minimal text-link CTAs `자세히 보기`, benefit-driven Korean copy `이자 2배 쌓여요`, "Forbes 국내 은행 1위" positioning); brand.toss.im (Toss brand resource center — `#0064FF` Pantone 2175 C confirmed). Component geometry inherited from the documented TDS Mobile / Toss Product Sans design language (shared across the Viva Republica family).
+**Tier 2 sources:** getdesign.md/tossbank — not checked. styles.refero.design — not checked.
+**Conflicts unresolved:** Brand blue `#0064FF` (logo/marketing, verified) vs. UI blue `#3182f6` (in-product interactive, inherited from shared Toss design language) — treated as distinct surfaces per Toss brand-vs-UI-blue precedent.
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Common values: 4, 8, 12, 16, 20, 24, 32, 40, 48
+- Horizontal padding: 20px (slightly wider than typical 16px)
+- Financial data grids: tighter 4px internal spacing
+
+### Grid & Container
+- Design baseline: 375px mobile width
+- Content: full-width with 20px horizontal padding
+- Single-column, mobile-first — no explicit multi-column grid
+- Transaction lists: full-width rows, amounts right-aligned
+
+### Whitespace Philosophy
+- **Breathing room for money.** A balance at 30px with 32px margins communicates security through spaciousness.
+- **Progressive density.** Summary screens are spacious; detail / transaction screens are dense.
+- **Grouped by function.** Deposit / transfer / card actions separated by 24px+; related data within a group uses 8–12px gaps.
+
+### Border Radius Scale
+- Compact (8px): inputs, small buttons, compact cards
+- Comfortable (12px): standard cards, dialog corners
+- Large (16px): account cards, buttons, bottom-sheet top corners
+- Pill (9999px): toggles, chips
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (0) | No shadow | Page background, inline elements |
+| Subtle (1) | `0px 1px 3px rgba(0,0,0,0.06)` | List item separation |
+| Standard (2) | `0px 2px 8px rgba(0,0,0,0.08)` | Cards, account/balance panels |
+| Elevated (3) | `0px 4px 12px rgba(0,0,0,0.12)` | Dropdowns, floating buttons |
+| Modal (4) | `0px 8px 24px rgba(0,0,0,0.16)` | Bottom sheets, dialogs |
+
+**Shadow philosophy.** Single-layer, pure black, low opacity. No colored shadows. In a chartered bank's UI, visual noise undermines trust — elevation is communicated through subtle opacity, not drama. Restraint *is* the brand statement.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use UI blue `#3182f6` for every interactive element; reserve `#0064FF` for logo/marketing
+- Use tabular numerals for all balances, rates, and transaction amounts
+- Use 700 weight for balances and headings, 400 for body, 600 for emphasis
+- Show interest earned / income in green (`#03b26c`), expenses in red (`#f04452`)
+- Use blue50 (`#e8f3ff`) for "이자 받기" and informational highlight blocks
+- Keep money-moved confirmation as a dedicated screen, never a toast
+
+### Don't
+- Don't confuse brand blue `#0064FF` with UI blue `#3182f6`
+- Don't use heavy or colored shadows — depth comes from layering, not drama
+- Don't use bold (700) for body text — reserved for headings and amounts
+- Don't approximate money (`약 120만원`) on primary surfaces — exact numerals only
+- Don't decorate financial data displays — clarity is the aesthetic
+- Don't introduce a second saturated accent hue; blue is the sole interactive color
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile (Primary) | <480px | Full fidelity, 375px baseline |
+| Tablet | 480–768px | Expanded cards, optional side margins |
+| Desktop (Web) | >768px | Centered column, max-width ~480px for mobile-web parity |
+
+### Touch Targets
+- Buttons: xlarge ~56px, large ~48px, medium ~38px
+- List rows: minimum 52px height for financial actions
+- SecureKeypad: large 56–64px targets
+
+### Collapsing Strategy
+- Desktop web mirrors mobile in a centered column
+- Bottom sheet → centered modal on larger screens
+- Sticky bottom CTA bar with safe-area insets
+
+### Image Behavior
+- Card art / product imagery: consistent sizing within context
+- Charts (interest history): full-width, responsive, aspect-ratio preserved
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA: UI Blue `#3182f6` (hover `#2272eb`)
+- Brand / logo only: `#0064FF`
+- Background: White `#ffffff`; surface `#f2f4f6`
+- Heading: Charcoal `#191f28`; body `#6b7684`; caption `#8b95a1`
+- Placeholder: `#b0b8c1`; border `#e5e8eb`
+- Success/interest: Green `#03b26c`; error/expense: Red `#f04452`
+
+### Example Component Prompts
+- "Create a Toss Bank account card: white bg, 16px radius, 24px padding, shadow 0px 2px 8px rgba(0,0,0,0.08). Account name 14px/400 #8b95a1, balance 30px/700 #191f28 tabular numerals + '원' 20px/400. A blue50 (#e8f3ff) pill below reading '이자 받기' in #2272eb."
+- "Build a send-money button: #3182f6 bg, white 17px/600 text, 56px tall, 16px radius, full-width. Pressed: dim overlay. Disabled: opacity drop."
+- "Design a transaction row: full-width, 16px h-padding, 52px min-height. Left: 32px circle icon + counterparty (14px/600 #191f28) + category (12px/400 #8b95a1). Right: amount 14px/600, #f04452 expense / #03b26c income, tabular."
+- "Create a SecureKeypad-style PIN entry: randomised digit grid, 6 dots above, each key 56px, 14px digit #191f28."
+
+### Iteration Guide
+1. Full Toss Product Sans stack with Korean fallbacks
+2. Interactive = `#3182f6`; brand `#0064FF` is logo/marketing only
+3. Money = 700 weight, tabular numerals, right-aligned in lists
+4. Radius: 8px inputs, 12px cards, 16px account cards/sheets, pill toggles
+5. Single-layer pure-black shadows, no tints
+6. Mobile-first 375px, 20px h-padding
+
+---
+
+## 10. Voice & Tone
+
+Toss Bank speaks like Toss — calm, unhurried, zero jargon — but with one extra ounce of fiduciary care, because it actually holds your deposits. The default register is soft-polite `해요체` (`이자가 매일 쌓여요`, `계좌가 만들어졌어요`), the friendly-but-respectful Korean ending, never the cold `~습니다` corporate voice except in regulated disclosure. Korean is the unquestioned primary voice; English appears only in product names. Sentences end in periods; buttons do not. No emoji on money-handling screens.
+
+| Context | Tone |
+|---|---|
+| CTAs | Imperative short Korean verb (`계좌 만들기`, `이자 받기`, `송금하기`, `확인`). |
+| Success toasts | Past-tense single sentence, soft ending (`송금이 완료되었어요`). No emoji. |
+| Interest moments | Warm, concrete (`오늘 이자 23원이 쌓였어요`). Exact numerals, never rounded. |
+| Error messages | Specific + blameless + actionable. Never `문제가 발생했습니다`. |
+| Onboarding | Second-person, one idea per screen, no bullet lists. |
+| Balances | Bare numerals with comma separators + 원. `1,240,000원`, never `₩1.24M`. |
+| Legal / disclosure | Formal `합니다` register — the single exception. FSS-required rate and risk copy. |
+
+**Forbidden phrases.** `불편을 드려 죄송합니다`, `Oops`, `죄송하지만`, `약 ~원` (approximation on money), rounded currency (`약 120만원`) on primary surfaces, English-first strings on Korean surfaces.
+
+**Voice samples.**
+- `이자 2배 쌓여요` — benefit-led product copy. <!-- verified: tossbank.com via WebFetch 2026-05-27 -->
+- `포브스 선정 국내 은행 1위` — trust/credential positioning. <!-- verified: tossbank.com via WebFetch 2026-05-27 -->
+- `오늘 이자 23원이 쌓였어요` — illustrative daily-interest moment. <!-- illustrative: follows Toss Bank's documented daily-interest product; not verified verbatim -->
+- `계좌가 만들어졌어요` — illustrative account-created confirmation. <!-- illustrative: not verified as live copy -->
+
+## 11. Brand Narrative
+
+Toss Bank (토스뱅크) is the internet-only bank of **Viva Republica** (비바리퍼블리카), the company behind Toss, founded by **Lee Seung-gun (이승건)**. It received its banking license and launched in **October 2021** as Korea's third internet-only bank, after Kakao Bank and K Bank. Where the Toss app had spent years making money *move* easily, Toss Bank set out to make a chartered bank *feel* easy — challenging the legacy KB / Shinhan / Woori / Hana incumbents not on rates alone but on the entire experience of holding an account.
+
+The signature product story is **daily interest** — `이자 매일 받기` — where interest accrues and can be claimed each day rather than at term's end. It is a financial-product feature, but it's also a design thesis: it turns a passive, invisible bank balance into something you check, tap, and feel good about every morning. The blue `#0064FF` optimism carries straight through: a bank does not have to feel like filing taxes.
+
+What Toss Bank refuses: the institutional-indigo seriousness of legacy banking (Active-X plug-ins, 12-digit account numbers, forms that look like government paperwork), and equally the cartoonish playfulness of some consumer fintech. It occupies the same narrow middle as Toss — calm but optimistic, regulated but light. Every ornamental move costs clarity, and clarity is the trust.
+
+## 12. Principles
+
+1. **Clarity is the trust signal.** A bank earns confidence by being legible, not stern. *UI implication:* white canvas, single-layer shadows, one interactive hue. If a screen looks "serious" through visual weight, simplify it instead.
+2. **Numbers are typography.** Balances, rates, and amounts use 700 weight and tabular numerals with display-heading care. *UI implication:* never let a balance jitter between values or inherit body weight; right-align amounts in lists.
+3. **Blue is interaction, not decoration.** UI `#3182f6` appears only where the user can tap. *UI implication:* illustrations, borders, and headers stay neutral; brand `#0064FF` is logo/marketing only.
+4. **Exactness over approximation.** Money is never `약` (about). *UI implication:* show exact won amounts with comma separators; rounding is forbidden on primary surfaces.
+5. **One action per screen.** Two primary buttons means two screens. *UI implication:* secondary actions are fine; two primaries are never.
+6. **Daily delight, regulated honesty.** The daily-interest warmth lives beside FSS-required disclosure in formal `합니다`. *UI implication:* keep the two registers visually separate — warm `해요체` for product, formal for legal.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by publicly described Korean internet-bank user segments, not individual people.*
+
+**현우 (Hyun-woo), 31, Seoul.** Product designer at a startup. Moved his salary account to Toss Bank for the daily interest and checks the `이자 받기` tap each morning like a tiny game. Expects the balance to paint in under 1s and the app to never make him feel like he's at a bank counter.
+
+**김여사 (Mrs. Kim), 58, Daejeon.** Runs a small flower shop. Her son set up Toss Bank for her. Uses it to receive customer transfers and pay suppliers. Trusts it because the numbers are big, clear, and exact — and because it never shows her anything that looks like a confusing form.
+
+**서연 (Seo-yeon), 24, Gwangju.** First job, first real savings. Opened her account entirely on her phone in minutes. Treats the daily-interest screen as a habit and tells friends "it actually feels good to check your bank app," which she'd never say about a legacy bank.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no transactions)** | Single `grey700` line explaining why (`아직 거래내역이 없어요`) + one secondary action (blue50 bg, blue500 text). Never an illustration, never `데이터가 없습니다`. |
+| **Empty (filter cleared)** | Single `grey500` caption (`조건에 맞는 내역이 없어요`). No button. |
+| **Loading (first paint)** | Skeleton blocks at `#f2f4f6` matching final layout. Balances render as `--`, never as skeleton blocks. |
+| **Loading (refresh)** | Top pull-down spinner in blue500. No overlay; previous values stay visible. |
+| **Error (inline field)** | `#f04452` 2px border + red500 13px error text below. One actionable sentence (`계좌번호를 다시 확인해주세요`). |
+| **Error (toast)** | `#191f28` bg, white 14px/400, 3s auto-dismiss, one sentence, bottom 20px inset. |
+| **Error (screen-blocking)** | Server outage only. White screen, centered `grey900` 16px/600 line + retry in blue500. No illustration. |
+| **Success (money moved)** | Dedicated screen, not a toast. `#03b26c` checkmark top-center, exact amount 30px/700, recipient + timestamp, single `확인`. |
+| **Success (interest claimed)** | Brief blue50 flash behind the balance + `오늘 이자 N원이 쌓였어요` toast. |
+| **Skeleton** | `#f2f4f6` blocks at exact final dimensions, ~1.2s shimmer with 8% white highlight, component-radius rounding. Never on balances (show `--`). |
+| **Disabled** | Button opacity drops per `--button-disabled-opacity-color`; input borders stay `grey200` so geometry is stable. |
+
+## 15. Motion & Easing
+
+Toss Bank's motion is calm and precise — money should never appear to flicker or bounce.
+
+**Durations:**
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Toggle flips, checkbox states |
+| `motion-fast` | 150ms | Hover, focus, button press overlay |
+| `motion-standard` | 250ms | Default — sheet open, card expand, tab switch |
+| `motion-slow` | 400ms | Emphasized — success checkmark, onboarding advance |
+| `motion-page` | 350ms | Full-screen route transitions |
+
+**Easings:**
+
+| Token | Curve | Use |
+|---|---|---|
+| `ease-enter` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Sheets, toasts, screen pushes appearing |
+| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals, pops |
+| `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Two-way transitions |
+| `ease-spring` | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Reserved — money-moved / interest-claimed checkmark only |
+
+**Signature motions.**
+1. **Balance update.** The old number slides up 20px and fades (`motion-fast / ease-exit`); the new number slides in from below (`motion-standard / ease-enter`). Never cross-fade money — flicker reads as a bug.
+2. **Daily-interest claim.** Tapping `이자 받기` triggers a brief blue50 flash behind the balance and a small spring-eased number tick-up — the one routine place a touch of delight is licensed.
+3. **Success checkmark.** Money-moved confirmation draws the checkmark over `motion-slow` with `ease-spring`. The only standard spring outside interest.
+4. **Reduce motion.** Under `prefers-reduced-motion: reduce`, all tokens collapse to instant; cross-fades replace slides. No exceptions.
+
+<!--
+OmD v0.1 Sources — Philosophy Layer (sections 10–15)
+
+Tier 1 (UI tokens, §1–9): tossbank.com live WebFetch 2026-05-27 (clean white
+canvas, minimal text-link CTAs, benefit Korean copy `이자 2배 쌓여요`, Forbes
+top-bank positioning). Brand blue `#0064FF` Pantone 2175 C confirmed via
+brand.toss.im. Component geometry inherited from the shared documented TDS
+Mobile / Toss Product Sans design language used across the Viva Republica
+family; not independently re-inspected on tossbank.com surfaces.
+
+Tier 2 (founding/narrative): Toss Bank launched Oct 2021 as Korea's third
+internet-only bank under Viva Republica (이승건). Daily-interest (`이자 매일
+받기`) is its signature documented product. Legacy-bank context (KB/Shinhan/
+Woori/Hana) is general industry knowledge.
+
+Voice samples: `이자 2배 쌓여요`, `포브스 선정 국내 은행 1위` verified live.
+`오늘 이자 23원이 쌓였어요`, `계좌가 만들어졌어요`, `송금이 완료되었어요`
+are ILLUSTRATIVE patterns following Toss Bank's `해요체` register and daily-
+interest product; not confirmed verbatim.
+
+Personas (§13) are fictional archetypes. Any resemblance to specific users is
+unintended.
+-->