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

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

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

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.

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.
• 포브스 선정 국내 은행 1위 — trust/credential positioning.
• 오늘 이자 23원이 쌓였어요 — illustrative daily-interest moment.
• 계좌가 만들어졌어요 — illustrative account-created confirmation.

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

15. Motion & Easing

Toss Bank's motion is calm and precise — money should never appear to flicker or bounce.

Durations:

Easings:

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.