oh-my-design-cli 1.8.7 → 1.9.0

package/web/references/toss/DESIGN.md

@@ -8,691 +8,349 @@ primary_color: "#0064ff"
 logo:
   type: favicon
   slug: "https://static.toss.im/icons/png/4x/icon-toss-logo.png"
-verified: "2026-05-15"
+verified: "2026-07-11"
 omd: "0.1"
 ds:
-  name: TDS
+  name: TDS Mobile
   url: "https://tossmini-docs.toss.im/tds-mobile/"
   type: system
-  description: Toss's mobile design system — 40+ components, tokens, and hooks.
+  description: Toss's public mobile design-system documentation.
+verification_v2:
+  schema: 2
+  checked: "2026-07-11"
+  surfaces:
+    - { id: marketing-home, kind: marketing, url: "https://toss.im/", inspected: "2026-07-11" }
+    - { id: marketing-story, kind: marketing, url: "https://toss.im/docs/10290", inspected: "2026-07-11" }
+    - { id: tds-button, kind: design-system, url: "https://tossmini-docs.toss.im/tds-mobile/components/button/", inspected: "2026-07-11" }
+    - { id: tds-agreement-v3, kind: design-system, url: "https://tossmini-docs.toss.im/tds-mobile/components/Agreement/v3/", inspected: "2026-07-11" }
+    - { id: tds-agreement-v4, kind: design-system, url: "https://tossmini-docs.toss.im/tds-mobile/components/Agreement/v4/", inspected: "2026-07-11" }
+  sources:
+    - { id: toss-live, kind: product-surface, url: "https://toss.im/", captured: "2026-07-11" }
+    - { id: tds-button-live, kind: official-doc, url: "https://tossmini-docs.toss.im/tds-mobile/components/button/", captured: "2026-07-11" }
+    - { id: tds-text-field, kind: official-doc, url: "https://tossmini-docs.toss.im/tds-mobile/components/TextField/text-field/", captured: "2026-07-11" }
+    - { id: tds-badge, kind: official-doc, url: "https://tossmini-docs.toss.im/tds-mobile/components/badge/", captured: "2026-07-11" }
+    - { id: tds-agreement, kind: official-doc, url: "https://tossmini-docs.toss.im/tds-mobile/components/Agreement/v4/", captured: "2026-07-11" }
+  claims:
+    "tokens.colors.primary": &tds_button { surface_id: tds-button, source_id: tds-button-live, method: computed-style-and-official-doc, captured: "2026-07-11" }
+    "tokens.colors.primary-hover": *tds_button
+    "tokens.colors.canvas": &toss_live { surface_id: marketing-home, source_id: toss-live, method: computed-style, captured: "2026-07-11" }
+    "tokens.colors.foreground": *toss_live
+    "tokens.colors.body": *toss_live
+    "tokens.colors.muted": *toss_live
+    "tokens.colors.surface": *toss_live
+    "tokens.colors.border": *toss_live
+    "tokens.colors.on-primary": *tds_button
+    "tokens.colors.weak-background": *toss_live
+    "tokens.colors.weak-foreground": *toss_live
+    "tokens.colors.danger": *tds_button
+    "tokens.typography.family.sans": *tds_button
+    "tokens.typography.h1.size": *tds_button
+    "tokens.typography.h1.weight": *tds_button
+    "tokens.typography.h1.lineHeight": *tds_button
+    "tokens.typography.h2.size": *tds_button
+    "tokens.typography.h2.weight": *tds_button
+    "tokens.typography.h2.lineHeight": *tds_button
+    "tokens.typography.h3.size": *tds_button
+    "tokens.typography.h3.weight": *tds_button
+    "tokens.typography.h3.lineHeight": *tds_button
+    "tokens.typography.h4.size": *tds_button
+    "tokens.typography.h4.weight": *tds_button
+    "tokens.typography.h4.lineHeight": *tds_button
+    "tokens.typography.body.size": *tds_button
+    "tokens.typography.body.weight": *tds_button
+    "tokens.typography.body.lineHeight": *tds_button
+    "tokens.typography.body-small.size": *tds_button
+    "tokens.typography.body-small.weight": *tds_button
+    "tokens.typography.body-small.lineHeight": *tds_button
+    "tokens.spacing.xs": *tds_button
+    "tokens.spacing.sm": *tds_button
+    "tokens.spacing.md": *tds_button
+    "tokens.spacing.lg": *tds_button
+    "tokens.spacing.xl": *tds_button
+    "tokens.spacing.xxl": *tds_button
+    "tokens.rounded.sm": *tds_button
+    "tokens.rounded.md": *tds_button
+    "tokens.rounded.button-small": *tds_button
+    "tokens.rounded.button-medium": *tds_button
+    "tokens.rounded.button-large": *tds_button
+    "tokens.rounded.button-xlarge": *tds_button
+    "tokens.components.tds-button.type": *tds_button
+    "tokens.components.tds-button.bg": *tds_button
+    "tokens.components.tds-button.fg": *tds_button
+    "tokens.components.tds-button.radius": *tds_button
+    "tokens.components.tds-button.height": *tds_button
+    "tokens.components.tds-button.padding": *tds_button
+    "tokens.components.tds-button.font": *tds_button
+    "tokens.components.tds-button.states": *tds_button
+    "tokens.components.tds-button.use": *tds_button
+    "tokens.components.text-field.type": &tds_field { surface_id: tds-button, source_id: tds-text-field, method: official-doc, captured: "2026-07-11" }
+    "tokens.components.text-field.states": *tds_field
+    "tokens.components.text-field.use": *tds_field
+    "tokens.components.badge.type": &tds_badge_claim { surface_id: tds-button, source_id: tds-badge, method: official-doc, captured: "2026-07-11" }
+    "tokens.components.badge.states": *tds_badge_claim
+    "tokens.components.badge.use": *tds_badge_claim
+    "tokens.components.agreement.type": &tds_agreement_claim { surface_id: tds-agreement-v4, source_id: tds-agreement, method: computed-style-and-official-doc, captured: "2026-07-11" }
+    "tokens.components.agreement.states": *tds_agreement_claim
+    "tokens.components.agreement.use": *tds_agreement_claim
+    "tokens.components.marketing-primary.type": *toss_live
+    "tokens.components.marketing-primary.bg": *toss_live
+    "tokens.components.marketing-primary.fg": *toss_live
+    "tokens.components.marketing-primary.radius": *toss_live
+    "tokens.components.marketing-primary.height": *toss_live
+    "tokens.components.marketing-primary.padding": *toss_live
+    "tokens.components.marketing-primary.font": *toss_live
+    "tokens.components.marketing-primary.states": *toss_live
+    "tokens.components.marketing-primary.use": *toss_live
+    "tokens.components.marketing-dark.type": *toss_live
+    "tokens.components.marketing-dark.bg": *toss_live
+    "tokens.components.marketing-dark.fg": *toss_live
+    "tokens.components.marketing-dark.radius": *toss_live
+    "tokens.components.marketing-dark.height": *toss_live
+    "tokens.components.marketing-dark.padding": *toss_live
+    "tokens.components.marketing-dark.font": *toss_live
+    "tokens.components.marketing-dark.states": *toss_live
+    "tokens.components.marketing-dark.use": *toss_live
+  conflicts: []
 tokens:
   source: reconciled
-  extracted: "2026-06-08"
-  note: "primary = live Toss Blue blue500 (#3182f6); brand = official Pantone 2175C (#0064ff)"
+  extracted: "2026-07-11"
+  note: "TDS Mobile product tokens and toss.im marketing variants are intentionally separate."
   colors:
     primary: "#3182f6"
     primary-hover: "#2272eb"
-    brand: "#0064ff"
-    brand-gray: "#202632"
     canvas: "#ffffff"
     foreground: "#191f28"
-    grey-700: "#333d4b"
-    grey-600: "#4e5968"
+    body: "#4e5968"
     muted: "#8b95a1"
     surface: "#f2f4f6"
     border: "#e5e8eb"
     on-primary: "#ffffff"
-    error: "#f04452"
-    success: "#03b26c"
-    warning: "#fe9800"
+    weak-background: "#e8f3ff"
+    weak-foreground: "#1b64da"
+    danger: "#e42939"
   typography:
-    family: { sans: "Toss Product Sans", emoji: "Tossface" }
-    display-hero: { size: 30, weight: 700, lineHeight: 1.33, use: "Splash screens, hero moments" }
-    display-lg:   { size: 26, weight: 700, lineHeight: 1.38, use: "Section headers, key metrics" }
-    heading-lg:   { size: 22, weight: 700, lineHeight: 1.36, use: "Feature titles, modal headers" }
-    heading:      { size: 20, weight: 600, lineHeight: 1.40, use: "Card headings, sub-sections" }
-    subtitle:     { size: 16, weight: 600, lineHeight: 1.50, use: "Navigation titles, list headers" }
-    body-lg:      { size: 16, weight: 400, lineHeight: 1.50, use: "Descriptions, explanations" }
-    body:         { size: 14, weight: 400, lineHeight: 1.57, use: "Standard reading text" }
-    body-sm:      { size: 13, weight: 400, lineHeight: 1.54, use: "Secondary information" }
-  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48 }
-  rounded: { sm: 4, md: 8, lg: 16, full: 9999 }
-  shadow:
-    subtle: "0px 1px 3px rgba(0,0,0,0.06)"
-    standard: "0px 2px 8px rgba(0,0,0,0.08)"
-    elevated: "0px 4px 12px rgba(0,0,0,0.12)"
+    family: { sans: "Toss Product Sans" }
+    h1: { size: 36, weight: 700, lineHeight: "54px" }
+    h2: { size: 30, weight: 600, lineHeight: "45px" }
+    h3: { size: 24, weight: 600, lineHeight: "36px" }
+    h4: { size: 22, weight: 600, lineHeight: "33px" }
+    body: { size: 16, weight: 400, lineHeight: "24px" }
+    body-small: { size: 14, weight: 400, lineHeight: "21px" }
+  spacing: { xs: 4, sm: 6, md: 8, lg: 16, xl: 24, xxl: 32 }
+  rounded: { sm: 4, md: 6, button-small: 8, button-medium: 10, button-large: 14, button-xlarge: 16 }
   components_harvested: true
   components:
-    button-fill-primary: { type: button, bg: "#3182f6", fg: "#ffffff", radius: 16, padding: "0 20px", font: "17/600", use: "Primary CTA on light surfaces, 56px tall" }
-    button-fill-dark: { type: button, bg: "#4e5968", fg: "#ffffff", radius: 16, padding: "0 20px", font: "17/600", use: "Strong action where blue too playful" }
-    button-fill-danger: { type: button, bg: "#f04452", fg: "#ffffff", radius: 16, padding: "0 20px", font: "17/600", use: "Destructive confirmation" }
-    input-box: { type: input, fg: "#333d4b", radius: 14, padding: "14px 16px", font: "17/400", use: "Standard form input, most-used variant" }
-    card: { type: card, bg: "#ffffff", radius: 16, use: "White surface with standard shadow" }
+    tds-button: { type: button, bg: "#3182f6", fg: "#ffffff", radius: "16px", height: "56px", padding: "0 20px", font: "17px / 600", states: "fill or weak; primary, danger, light, or dark; loading, disabled, pressed, and keyboard focus", use: "TDS Mobile xlarge primary action" }
+    text-field: { type: input, states: "box, line, big, hero; focus, error, disabled, read-only", use: "TDS Mobile text entry with help or error text" }
+    badge: { type: badge, states: "fill or weak; xsmall, small, medium, large; semantic color variants", use: "TDS Mobile status or category label; not an action" }
+    agreement: { type: toggle, states: "checked, unchecked, disabled, and nested agreement hierarchy", use: "TDS Mobile terms selection in v3 and v4 surfaces" }
+    marketing-primary: { type: button, bg: "#e8f3ff", fg: "#1b64da", radius: "7px", height: "40px", padding: "11px 16px", font: "15px / 600", states: "default observed; hover not captured in the retained evidence bundle", use: "toss.im light-blue marketing CTA" }
+    marketing-dark: { type: button, bg: "rgba(0, 12, 30, 0.8)", fg: "#ffffff", radius: "7px", height: "46px", padding: "11px 16px", font: "17px / 600", states: "default observed; hover not captured in the retained evidence bundle", use: "toss.im app-store style CTA" }
 ---
 
 # Design System Inspiration of Toss (토스)
 
 ## 1. Visual Theme & Atmosphere
 
-Toss is Korea's fintech super-app that redefined what a financial interface could feel like -- calm, confident, and deceptively simple. The page opens on a clean white canvas (`#ffffff`) with deep charcoal headings (`#191f28`) and a signature blue (`#3182f6`) that functions as the universal interactive accent. This isn't the cold, institutional blue of legacy banking; it's a bright, optimistic cerulean that says "your money is in good hands, and we'll make it easy."
+Toss is a unified financial platform that tries to make consequential money decisions feel answerable, immediate, and visually calm. Its public design spans two related but distinct systems: TDS Mobile documents product UI with large, touch-oriented controls and explicit state contracts, while `toss.im` uses a tighter marketing-web button system. Across both, a strong blue action color, plain language, generous hierarchy, and purpose-built typography reduce the institutional distance people often feel around finance. This reference keeps product and marketing surfaces separate instead of forcing their geometry into one false universal component.
 
-The custom **Toss Product Sans** typeface is the quiet hero. Developed with Korean type foundries Sandoll and Leedotype, it was purpose-built for financial contexts: numerals and Latin characters are optically weighted to match Korean hangul proportions, and financial symbols (%, commas, ±) are given enhanced legibility. The font ships in 8 weights (300-950) but the UI exercises restraint, primarily using 400, 600, and 700. The system supports both variable-width numerals for display and fixed-width (tabular) numerals for data tables -- context determines mode.
-
-What defines Toss visually is its OKLCH-based color system, rebuilt from scratch for perceptual uniformity. Colors at the same scale level appear equally bright regardless of hue, enabling consistent semantic coloring where blue-500, red-500, and green-500 carry identical visual weight without manual tuning.
+The verified common language is Toss Product Sans, a bright blue interaction accent, warm blue-grey neutrals, and direct hierarchy. Exact values below are limited to current computed styles or current official TDS documentation.
 
 **Key Characteristics:**
-- Toss Blue (`#3182f6`) as the primary interactive color -- bright, optimistic, trustworthy
-- Toss Product Sans with Korean-Latin optical balancing and tabular numeral support
-- OKLCH color space for perceptual uniformity across all hue scales
-- 10-step grey scale (grey50-grey900) with warm undertones
-- Three-tier token architecture: primitive → semantic → component
-- Minimal shadow system -- trust comes from clarity, not depth
-- Mobile-first at 375px design baseline with accessibility scaling up to 310%
+- Product primary `#3182f6`; marketing weak CTA `#e8f3ff` / `#1b64da`
+- Toss Product Sans loaded and used across all 810 visible TDS observations
+- Four documented TDS button sizes with explicit loading and disabled behavior
+- Surface-specific component geometry rather than one blended “Toss style”
 
 ## 2. Color Palette & Roles
 
-### Primary
-- **Toss Blue** (`#3182f6`): `blue500`. Primary interactive color -- CTAs, links, active states, selection highlights. The workhorse of every tappable element.
-- **Blue Hover** (`#2272eb`): `blue600`. Hover/pressed state for blue500 elements.
-- **Blue Light** (`#e8f3ff`): `blue50`. Informational backgrounds, subtle blue-tinted surfaces.
-- **Pure White** (`#ffffff`): `background`, `layeredBackground`. Page background, card surfaces.
-- **Dark Charcoal** (`#191f28`): `grey900`. Primary heading color, strongest text. Warm near-black with subtle blue undertone.
-
-### Brand (Logo/Marketing Only)
-- **Brand Blue** (`#0064FF`): Official Toss brand color (Pantone 2175 C). Logo and marketing materials only -- distinct from UI blue500.
-- **Brand Gray** (`#202632`): Official secondary brand color (Pantone 433 C). Corporate contexts.
-
-### Semantic
-- **Error Red** (`#f04452`): `red500`. Error states, destructive actions, negative financial indicators.
-- **Success Green** (`#03b26c`): `green500`. Positive financial indicators, confirmations.
-- **Warning Orange** (`#fe9800`): `orange500`. Pending states, attention-needed indicators.
-- **Caution Yellow** (`#ffc342`): `yellow500`. Soft warnings, highlight moments.
-- **Info Teal** (`#18a5a5`): `teal500`. Informational accent, alternative categorization.
-- **Premium Purple** (`#a234c7`): `purple500`. Premium features, special offers.
-
-### Neutral Scale
-- **Grey 50** (`#f9fafb`): Lightest gray, `greyBackground` surface.
-- **Grey 100** (`#f2f4f6`): Secondary background, card fills, disabled surfaces.
-- **Grey 200** (`#e5e8eb`): Default border color, dividers, input backgrounds.
-- **Grey 400** (`#b0b8c1`): Placeholder text, disabled icon fills.
-- **Grey 500** (`#8b95a1`): Caption text, secondary labels.
-- **Grey 600** (`#6b7684`): Body text, descriptions, metadata.
-- **Grey 700** (`#4e5968`): Emphasized body text, sub-headings.
-- **Grey 800** (`#333d4b`): Strong labels, navigation text.
-
-### Surface & Borders
-- **Border Default**: `#e5e8eb` (grey200). Standard card borders, input borders, dividers.
-- **Border Strong**: `#d1d6db` (grey300). Emphasized borders, active input outlines.
-- **Background Float**: `#ffffff`. `floatBackground`. Floating elements -- tooltips, dropdowns.
-- **Overlay Scrim**: `rgba(2,9,19,0.5)` to `rgba(2,9,19,0.91)`. `greyOpacity` scale. Blue-tinted dark overlays.
+### Product and shared roles
+- **Primary** (`#3182f6`): TDS interaction blue and primary action reference.
+- **Primary Hover / Strong Blue** (`#2272eb`): stronger blue visible in current TDS documentation.
+- **Canvas** (`#ffffff`): principal light background.
+- **Foreground** (`#191f28`): strongest product text.
+- **Body** (`#4e5968`): emphasized body and neutral action text.
+- **Muted** (`#8b95a1`): secondary product text.
+- **Surface** (`#f2f4f6`): quiet neutral layer.
+- **Border** (`#e5e8eb`): light divider or outline reference.
+- **On Primary** (`#ffffff`): text on filled primary actions.
+- **Danger** (`#e42939`): destructive/error text observed in the current TDS page.
+
+### Marketing-web roles
+- **Weak Background** (`#e8f3ff`) and **Weak Foreground** (`#1b64da`): current light-blue `toss.im` CTA pair.
+- The official logo/brand blue in frontmatter is catalog identity metadata; do not substitute it for the verified UI primary `#3182f6`.
 
 ## 3. Typography Rules
 
 ### Font Family
-- **Primary**: `"Toss Product Sans", "Tossface", "SF Pro KR", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Basier Square", "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 (3500+ emojis, open-source on GitHub)
-
-### Hierarchy
-
-| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
-|------|------|------|--------|-------------|----------------|-------|
-| Display Hero | Toss Product Sans | 30px | 700 | 40px (1.33) | normal | Splash screens, hero moments |
-| Display Large | Toss Product Sans | 26px | 700 | 36px (1.38) | normal | Section headers, key metrics |
-| Heading Large | Toss Product Sans | 22px | 700 | 30px (1.36) | normal | Feature titles, modal headers |
-| Heading | Toss Product Sans | 20px | 600 | 28px (1.40) | normal | Card headings, sub-sections |
-| Subtitle | Toss Product Sans | 16px | 600 | 24px (1.50) | normal | Navigation titles, list headers |
-| Body Large | Toss Product Sans | 16px | 400 | 24px (1.50) | normal | Descriptions, explanations |
-| Body | Toss Product Sans | 14px | 400 | 22px (1.57) | normal | Standard reading text |
-| Body Small | Toss Product Sans | 13px | 400 | 20px (1.54) | normal | Secondary information |
-| Caption | Toss Product Sans | 12px | 400 | 18px (1.50) | normal | Timestamps, fine print |
-| Number Display | Toss Product Sans | 30px+ | 700 | tight | normal | Financial amounts -- tabular nums |
-
-### Principles
-- **Eight weights, three used**: Ships 300-950, but UI uses 400 (body), 600 (emphasis), 700 (headings). Restraint over variety.
-- **Dual numeral modes**: Variable-width for display, fixed-width (tabular) for financial tables and stock tickers. Context determines mode.
-- **Korean-Latin optical balance**: Korean characters and Latin/numerals are independently weighted so mixed text looks harmonious without manual kerning.
-- **Financial symbol optimization**: %, comma separators, ±, currency symbols, and directional arrows given enhanced legibility at small sizes.
+- **Canonical visible UI family**: `Toss Product Sans`. The collector found 810 visible first-family uses backed by loaded FontFace resources.
+- **Tossface status**: declared in FontFace resources but not observed as the first family on a visible element. It is therefore context, not a canonical UI token.
+- **Monospace**: no current canonical monospace claim.
 
-## 4. Component Stylings
+### Current TDS documentation hierarchy
 
-### Buttons
+| Role | Size | Weight | Line Height | Evidence |
+|---|---:|---:|---:|---|
+| H1 | 36px | 700 | 54px | computed TDS documentation style |
+| H2 | 30px | 600 | 45px | computed TDS documentation style |
+| H3 | 24px | 600 | 36px | computed TDS documentation style |
+| H4 | 22px | 600 | 33px | computed TDS documentation style |
+| Body | 16px | 400 | 24px | dominant visible role |
+| Body Small | 14px | 400 | 21px | secondary visible role |
 
-Toss `<Button>` is a 2-axis component: **variant** × **color** × size. Default size is `xlarge` (the values below); see the size-scale paragraph at the end for `small`/`medium`/`large`. Verified against `tossmini-docs.toss.im/tds-mobile/components/button` (TDS Mobile, public docs).
+These are evidence-backed public-document roles, not a claim that every native Toss product screen uses this exact hierarchy.
 
-**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-background-color` + `--button-pressed-opacity`
-- Disabled: bg opacity scaled by `--button-disabled-opacity-color`
-- Loading: 3-dot indicator replacing label, button width preserved
-- Use: Primary CTA on light surfaces (송금하기, 확인) — 56px tall
+| Evidence class | Toss status |
+|---|---|
+| **Official product-use** | Toss Product Sans was designed for financial symbols and mobile, desktop, and offline product contexts |
+| **Live surface-use** | Toss Product Sans is loaded and visibly used throughout the inspected TDS documentation surfaces |
+| **Official distributed asset** | No general redistribution right is asserted by the current official sources |
+| **Declared-only** | Tossface is declared in captured FontFace resources but was not observed as the visible first family |
+| **Unresolved** | Public redistribution/license terms and exact native-screen type metrics beyond documented TDS roles |
 
-**Fill / Dark**
-- Background: `#4e5968`
-- Text: `#ffffff`
-- Border: none
-- Radius: 16px
-- Padding: 0 20px
-- Font: 17px / 600 / Toss Product Sans
-- Use: Strong action where blue would feel too playful (admin/settings CTA)
+## 4. Component Stylings
 
-**Fill / Danger**
-- Background: `#f04452`
+### TDS Mobile Button
+- Background: `#3182f6` for the canonical primary reference
 - Text: `#ffffff`
-- Border: none
-- Radius: 16px
+- Radius: 16px at xlarge
+- Height: 56px at xlarge
 - Padding: 0 20px
 - Font: 17px / 600 / Toss Product Sans
-- Use: Destructive confirmation (계좌 삭제, 거래 취소)
-
-**Fill / Light**
-- Background: `#ffffff`
+- Size scale: small 32px / 8px radius; medium 38px / 10px; large 48px / 14px; xlarge 56px / 16px
+- States: fill or weak; primary, danger, light, or dark; loading, disabled, pressed, and keyboard focus
+- Use: primary and secondary mobile actions; preserve width while loading
+
+### TDS Mobile Text Field
+- Variants: box, line, big, hero
+- States: focus, error, disabled, read-only
+- Use: text entry with label, help text, and error text. Do not transfer undocumented page-chrome colors into the product field token.
+
+### TDS Mobile Badge
+- Variants: fill or weak; xsmall, small, medium, large; semantic colors
+- States: semantic and size variants; badge is descriptive rather than interactive
+- Use: compact status or category label
+
+### TDS Mobile Agreement
+- States: checked, unchecked, disabled, and nested agreement hierarchy
+- Use: terms selection; v3 and v4 are retained as separate official surfaces because both are publicly documented
+
+### toss.im Marketing Primary
+- Background: `#e8f3ff`
 - Text: `#1b64da`
-- Border: none
-- Radius: 16px
-- Padding: 0 20px
-- Font: 17px / 600 / Toss Product Sans
-- Use: CTA on dark / colored surfaces (sits on non-white bg to be legible)
-
-**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: Neutral / cancel-style secondary (취소, 닫기)
-
-**Weak / Danger**
-- Background: `rgba(251, 136, 144, 0.15)`
-- Text: `#e42939`
-- Border: none
-- Radius: 16px
-- Padding: 0 20px
-- Font: 17px / 600 / Toss Product Sans
-- Use: Subtle destructive action (archive instead of delete)
-
-**Weak / Light**
-- Background: `rgba(255, 255, 255, 0.15)`
+- Radius: 7px
+- Height: 40px
+- Padding: 11px 16px
+- Font: 15px / 600 / Toss Product Sans
+- States: default observed; hover not captured in the retained evidence bundle
+- Use: light-blue marketing CTA
+
+### toss.im Marketing Dark
+- Background: `rgba(0, 12, 30, 0.8)`
 - Text: `#ffffff`
-- Border: none
-- Radius: 16px
-- Padding: 0 20px
+- Radius: 7px
+- Height: 46px
+- Padding: 11px 16px
 - Font: 17px / 600 / Toss Product Sans
-- Use: Secondary on dark / colored surfaces
-
-Display modes — `inline` (auto-width), `block` (full-width with line break), `full` (fills parent). 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. CSS-var customization: `--button-color`, `--button-background-color`, `--button-pressed-background-color`, `--button-pressed-opacity`, `--button-disabled-opacity-color`, `--button-loader-color`, `--button-loading-background-color`, `--button-gradient-color`.
-
-### Inputs
-
-Toss `<TextField>` has 4 variants: `box` (default), `line`, `big`, `hero`. `hasError` toggles error state. Verified at `tossmini-docs.toss.im/tds-mobile/components/TextField/text-field`.
-
-**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 — most-used variant
-
-**Line**
-- Background: transparent
-- Text: `#333d4b`
-- Border: 1px solid `#e5e8eb` (bottom only)
-- Radius: 0px
-- Padding: 0px 0px 4px
-- Font: 17px / 400 / Toss Product Sans
-- Use: Underline-style input on dense forms
-
-**Big**
-- Background: transparent
-- Text: `#333d4b`
-- Border: 1px solid `#e5e8eb` (bottom only)
-- Radius: 0px
-- Padding: 0px 0px 4px
-- Font: 22px / 600 / Toss Product Sans
-- Use: Highlighted single-line input (amount, name)
-
-**Hero**
-- Background: transparent
-- Text: `#333d4b`
-- Border: 1px solid `#e5e8eb` (bottom only)
-- Radius: 0px
-- Padding: 0px 0px 4px
-- Font: 30px / 600 / Toss Product Sans
-- Use: Eye-catching hero input — large amount entry, sign-up moment
-
-**Error**
-- Background: `rgba(0, 23, 51, 0.02)` (box variant base)
-- Text: `#333d4b`
-- Border: 1px solid `#f04452`
-- Radius: 14px
-- Padding: 14px 16px
-- Font: 17px / 400 / Toss Product Sans
-- Use: `hasError` state — paired with inline help message in `#f04452`
-
-`SplitTextField` (OTP), `SecureKeypad` (financial PIN with randomised digit positions), and `TextArea` are documented separately under TDS but reuse the same focus ring and base radii.
-
-### Cards
-
-**Standard**
-- Background: `#ffffff`
-- Border: none
-- Radius: 12px
-- Padding: 20px
-- Shadow: `0px 2px 8px rgba(0,0,0,0.08)`
-- Use: Account, transaction, balance — the workhorse surface
-
-**Featured**
-- Background: `#ffffff`
-- Border: none
-- Radius: 16px
-- Padding: 24px
-- Shadow: `0px 2px 8px rgba(0,0,0,0.08)`
-- Use: Hero/promotional cards on the home tab
-
-**Compact**
-- Background: `#ffffff`
-- Border: 1px solid `#e5e8eb`
-- Radius: 8px
-- Padding: 12px
-- Shadow: none
-- Use: Inline list items where a softer 1px edge replaces shadow
-
-### Badges
-
-Toss `<Badge>` is a 3-axis component: **variant** × **color** × **size**. Variants `fill | weak`. Colors `blue | teal | green | red | yellow | elephant`. Sizes `xsmall | small | medium | large` (each shifts radius/font/padding). Verified at `tossmini-docs.toss.im/tds-mobile/components/badge`.
-
-**Fill / Blue (medium default)**
-- Background: `#3182f6`
-- Text: `#ffffff`
-- Border: none
-- Radius: 12px
-- Padding: 3px 7px
-- Font: 13px / 700 / Toss Product Sans
-- Use: Primary status / category emphasis ("NEW", "BEST")
-
-**Fill / Green**
-- Background: `#22c55e`
-- Text: `#ffffff`
-- Border: none
-- Radius: 12px
-- Padding: 3px 7px
-- Font: 13px / 700 / Toss Product Sans
-- Use: Success / completion state (입금 완료, 송금 성공)
-
-**Fill / Red**
-- Background: `#ef4444`
-- Text: `#ffffff`
-- Border: none
-- Radius: 12px
-- Padding: 3px 7px
-- Font: 13px / 700 / Toss Product Sans
-- Use: Negative / blocking state (실패, 차단)
-
-**Fill / Yellow**
-- Background: `#eab308`
-- Text: `#ffffff`
-- Border: none
-- Radius: 12px
-- Padding: 3px 7px
-- Font: 13px / 700 / Toss Product Sans
-- Use: Caution / pending (검토 중, 보류)
-
-**Weak / Blue**
-- Background: `rgba(100, 168, 255, 0.15)`
-- Text: `#2272eb`
-- Border: none
-- Radius: 12px
-- Padding: 3px 7px
-- Font: 13px / 700 / Toss Product Sans
-- Use: Subtle informational badge
-
-**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: Subtle success state
-
-**Weak / Red**
-- Background: `rgba(239, 68, 68, 0.15)`
-- Text: `#dc2626`
-- Border: none
-- Radius: 12px
-- Padding: 3px 7px
-- Font: 13px / 700 / Toss Product Sans
-- Use: Subtle negative 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
-
-Size scale (height · font · radius · padding): `xsmall` 21px · 10px / 600 · 9px · 3px 7px; `small` 24px · 12px / 700 · 11px · 3px 7px; `medium` 26px · 13px / 700 · 12px · 3px 7px; `large` 29px · 14px / 700 · 13px · 4px 8px. Color also supports `teal` and full mapping for each color name; values above show the most-used 4 fills + 4 weaks at medium size.
-
-### Tabs
-
-**Bottom Tab (Active)**
-- Background: `#ffffff`
-- Text: `#191f28`
-- Border: 1px solid `#e5e8eb` (top border only)
-- Active: `#3182f6` (icon and label)
-- Disabled: `#b0b8c1` (icon) + `#8b95a1` (label)
-- Font: 11px / 500 / Toss Product Sans
-- Use: Bottom navigation bar — fixed white background, no shadow
-
-**Segmented**
-- Background: `#f2f4f6`
-- Text: `#8b95a1`
-- Border: none
-- Radius: 12px
-- Padding: 8px 16px
-- Active: `#ffffff` background + `#191f28` text + `0px 2px 4px rgba(0,0,0,0.06)` shadow
-- Font: 14px / 600 / Toss Product Sans
-- Use: Section switching within a screen (월/주/일 전환)
-
-### 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: Auto-dismissing transient notification ("복사되었습니다"). Money-moved success is a dedicated screen, never a toast.
-
-### Dialogs
-
-**Centered Modal**
-- Background: `#ffffff`
-- Text: `#191f28`
-- Border: none
-- Radius: 16px
-- Padding: 24px
-- Shadow: `0px 4px 12px rgba(0,0,0,0.12)`
-- Use: AlertDialog / ConfirmDialog for confirmation prompts
-
-**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: Bottom-attached overlay for selection, picker, secondary form (managed via `overlay-kit`)
-
-### Toggles
-
-**Default**
-- Background: `#3182f6` (on) / `#d1d6db` (off)
-- Border: none
-- Radius: 9999px
-- Thumb: `#ffffff` 18px circle with `0px 1px 2px rgba(0,0,0,0.1)` shadow
-- Use: Boolean settings (알림 켜기, 자동 송금)
+- States: default observed; hover not captured in the retained evidence bundle
+- Use: app-store style marketing CTA
 
 ---
 
-**Verified:** 2026-05-08 (full-depth, A1 loop)
-**Tier 1 sources:** tossmini-docs.toss.im/tds-mobile (TDS Mobile spec docs — Button/TextField/Badge), toss.im (live DOM via playwright — `.p-button` web variants `#3182f6` / 7px radius / 15px / 600, distinct from TDS Mobile geometry; nav links `#4e5968` 8px transparent; App Store/Play CTA `rgba(0,12,30,0.8)` / 7px / 17px·600)
-**Tier 2 sources:** getdesign.md/toss — no record. styles.refero.design — no record (?q=Toss returns 0 hits).
-**Tier 2b status:** unavailable; Tier 1 (TDS Mobile docs + live web inspect) treated as authoritative per pipeline.
-**Surface split:** §4 above documents the **TDS Mobile (app)** system. The marketing web (toss.im) uses a **distinct `.p-button` system** — Primary `#3182f6` / 7px / 15px·600 / 11×16 / 40px height; Secondary Light Blue `#e8f3ff` bg / `#1b64da` text / 7px (parallel geometry). Both retained as parallel systems.
-**Conflicts unresolved:** none. TDS Mobile geometry (16px radius, 17px·600) and web `.p-button` (7px, 15px·600) coexist on different surfaces and were not in conflict.
+**Verified:** 2026-07-11 (verification v2, live computed-style capture + current official TDS docs)
+**Tier 1 sources:** https://toss.im/ https://toss.im/docs/10290 https://tossmini-docs.toss.im/tds-mobile/components/button/ https://tossmini-docs.toss.im/tds-mobile/components/TextField/text-field/ https://tossmini-docs.toss.im/tds-mobile/components/badge/
+**Tier 2 sources:** https://getdesign.md/toss produced no importable Toss record; https://styles.refero.design/?q=Toss produced no importable result through the available fetch path.
+**Surface split:** TDS Mobile xlarge uses 56px height and 16px radius; `toss.im` marketing actions observed here use 40–46px height and 7px radius.
+**Conflicts unresolved:** none
 
 ## 5. Layout Principles
 
 ### Spacing System
-- Base unit: 8px
-- Common values: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px
-- Horizontal padding: 20px (slightly wider than typical 16px)
-- Financial data grids: tighter 4px internal spacing
+- Captured TDS documentation clusters: 4px, 6px, 8px, 16px, 24px, and 32px.
+- Treat those values as a compact working scale, not proof of every native product layout token.
 
 ### Grid & Container
-- Design baseline: 375px mobile width
-- Content: full-width with 20px horizontal padding
-- No explicit multi-column grid -- single-column, mobile-first
-- Transaction lists: full-width rows with consistent left-align for amounts
-
-### Whitespace Philosophy
-- **Breathing room for money**: Financial numbers get extra surrounding space. A balance at 30px with 32px margins communicates security through spaciousness.
-- **Progressive density**: Summary screens are spacious; detail/transaction screens are denser. The deeper you go, the more information-dense.
-- **Grouped by function**: Send/receive/invest actions separated by 24px+ gaps; related data within a group uses 8-12px gaps.
+- TDS component documentation is mobile-oriented; its xlarge button is designed as a strong touch action.
+- The public marketing site uses a distinct responsive web composition and should not inherit mobile component geometry wholesale.
 
 ### Border Radius Scale
-- Compact (4px): Small badges, inline elements
-- Standard (8px): Inputs, small buttons, compact cards
-- Comfortable (12px): Standard cards, dialog corners
-- Large (16px): Featured cards, bottom sheet top corners
-- Pill (9999px): Toggle switches, floating chips
+- Documentation chrome and components cluster around 4px and 6px for small surfaces.
+- Button sizes use 8px, 10px, 14px, and 16px radii from small through xlarge.
 
 ## 6. Depth & Elevation
 
-| Level | Treatment | Use |
-|-------|-----------|-----|
-| Flat (Level 0) | No shadow | Page background, inline elements |
-| Subtle (Level 1) | `0px 1px 3px rgba(0,0,0,0.06)` | Slight lift, list item separation |
-| Standard (Level 2) | `0px 2px 8px rgba(0,0,0,0.08)` | Cards, content panels |
-| Elevated (Level 3) | `0px 4px 12px rgba(0,0,0,0.12)` | Dropdowns, popovers, floating buttons |
-| Modal (Level 4) | `0px 8px 24px rgba(0,0,0,0.16)` | Bottom sheets, dialogs, modals |
-
-**Shadow Philosophy**: Toss keeps shadows minimal and neutral. In a financial app, visual noise undermines trust -- elevation is communicated through subtle opacity differences rather than dramatic depth. Pure black with low opacity creates clinical precision matching the fintech context. Where Stripe uses brand-colored shadows, Toss uses restraint as its brand statement.
-
-### Blur Effects
-- Menu components use backdrop blur for lightweight floating panels
-- Navigation bar applies subtle blur on scroll for the sticky header
+No canonical shadow token is promoted in this revision. The inspected evidence contains documentation-site chrome as well as TDS examples, so treating every computed shadow as a Toss product token would overstate the source. Use flat color layering until a component-specific official source verifies elevation.
 
 ## 7. Do's and Don'ts
 
 ### Do
-- Use Toss Blue (`#3182f6`) for all interactive elements -- links, buttons, toggles, selections
-- Apply the full font stack with Korean fallbacks including Tossface emoji
-- Use tabular (fixed-width) numerals for financial data and transaction amounts
-- Use 700 weight for financial amounts and headings, 400 for body, 600 for emphasis
-- Keep border-radius between 8px-16px for most elements
-- Show positive changes in green (`#03b26c`), negative in red (`#f04452`)
-- Use blue50 (`#e8f3ff`) for subtle informational backgrounds
+- Keep TDS Mobile and `toss.im` marketing variants explicitly named by surface.
+- Use `Toss Product Sans` where the font is available, with a system fallback for resilience.
+- Preserve documented loading, disabled, pressed, and keyboard-focus states on buttons.
+- Treat badge content as status metadata, not as an action affordance.
+- Use exact component geometry only where the evidence names a size and surface.
 
 ### Don't
-- Don't confuse Brand Blue (`#0064FF`) with UI Blue (`#3182f6`) -- brand is for marketing/logo only
-- Don't use heavy shadows -- rely on background color layering, not depth
-- Don't use bold (700) for body text -- reserved for headings and financial amounts
-- Don't mix variable-width and tabular numerals in the same data context
-- Don't use warm accent colors (orange, pink) for primary actions -- blue is the sole interactive hue
-- Don't use border-radius > 16px except for pills/toggles
-- Don't add decorative elements to financial data displays -- clarity is the aesthetic
+- Don't use logo brand blue as a silent replacement for UI primary `#3182f6`.
+- Don't claim Tossface is the visible primary UI font; it was declared but unused in this capture.
+- Don't copy documentation-site colors into native product tokens without component-level evidence.
+- Don't merge the 16px TDS radius with the 7px marketing radius into an average value.
+- Don't invent cards, shadows, tabs, toasts, or dialogs from generic fintech conventions.
 
 ## 8. Responsive Behavior
 
-### Breakpoints
-| Name | Width | Key Changes |
-|------|-------|-------------|
-| Mobile (Primary) | <480px | Full design 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 (~40px), small (~36px)
-- List items: minimum 52px row height for financial actions
-- Keypad buttons: large targets (56-64px) for secure input
-
-### Collapsing Strategy
-- Desktop web mirrors mobile layout in a centered column
-- Bottom sheet → modal dialog on larger screens
-- Sticky bottom CTA bar with safe area insets on all devices
-- Horizontal scrolling card carousels for product discovery
-
-### Image Behavior
-- Bank/service logos: 24-40px with consistent sizing within context
-- Tossface emojis: inline at text size, display size for decorative use
-- Charts/graphs: full-width, responsive, maintain aspect ratio
+- TDS Mobile component sizes should remain touch-oriented; xlarge is the documented default button size.
+- On web, preserve the observed 40px or 46px marketing button height rather than substituting the 56px mobile control.
+- The public sources in this verification do not establish universal breakpoints, desktop maximum widths, or native safe-area values.
 
 ## 9. Agent Prompt Guide
 
-### Quick Color Reference
-- Primary CTA: Toss Blue (`#3182f6`)
-- CTA Hover: Blue 600 (`#2272eb`)
-- Background: Pure White (`#ffffff`)
-- Background Surface: Light Gray (`#f2f4f6`)
-- Heading text: Dark Charcoal (`#191f28`)
-- Body text: Medium Gray (`#6b7684`)
-- Caption text: Gray (`#8b95a1`)
-- Placeholder: Soft Gray (`#b0b8c1`)
-- Border: Gray 200 (`#e5e8eb`)
-- Success/Positive: Green (`#03b26c`)
-- Error/Negative: Red (`#f04452`)
-- Warning: Orange (`#fe9800`)
-
-### Example Component Prompts
-- "Create a balance card: white bg, 12px radius, 20px padding. Balance label 14px weight 400, #8b95a1. Amount 30px weight 700, #191f28, tabular numerals. Currency '원' 20px weight 400. Shadow 0px 2px 8px rgba(0,0,0,0.08)."
-- "Build a send-money button: #3182f6 bg, white text, 16px weight 600, min-height 56px, 12px radius, full-width. Pressed: overlay dim. Loading: 3-dot white animation."
-- "Design a transaction row: full-width, 16px h-padding, 52px min-height. Left: 32px circle icon + name (14px weight 600, #191f28) + category (13px weight 400, #8b95a1). Right: amount (14px weight 600, #f04452 expense / #03b26c income)."
-- "Create an OTP input: 6 boxes, each 48px wide, 56px tall, 8px radius, 1px border #e5e8eb. Active: 2px border #3182f6. Digit: 24px weight 700, centered, #191f28."
-- "Design a bottom tab bar: white bg, top border 1px #e5e8eb. 4 tabs evenly spaced. Active: #3182f6 icon + #191f28 label 11px weight 500. Inactive: #b0b8c1 icon + #8b95a1 label. Tab height 56px with safe area."
-
-### Iteration Guide
-1. Always use the full Toss Product Sans font stack with Korean fallbacks
-2. Primary interactive color is `#3182f6` (blue500) -- never `#0064FF` (brand blue)
-3. Financial numbers: 700 weight, tabular numerals, right-aligned in lists
-4. Grey scale has warm undertones: grey900 `#191f28`, grey50 `#f9fafb`
-5. Border-radius: 8px inputs, 12px cards, 16px sheets, pill for toggles
-6. Shadows are single-layer, pure black opacity, no colored tints
-7. Mobile-first: design at 375px, 20px horizontal padding
-
----
+- “Create a TDS Mobile xlarge primary button using `#3182f6`, white text, 56px height, 16px radius, 17px/600 Toss Product Sans, and explicit loading/disabled/focus behavior.”
+- “Create a `toss.im` weak marketing CTA using `#e8f3ff` background, `#1b64da` text, 40px height, and 7px radius.”
+- “Use Toss Product Sans for the verified UI family; do not promote Tossface without visible usage evidence.”
+- “If building a component not listed here, mark it as an extension rather than presenting it as verified TDS.”
 
 ## 10. Voice & Tone
 
-Toss speaks like a friend who happens to be a fiduciary: calm, unhurried, zero jargon, positive statements without hedging. Balance is stated, not "approximately" anything. Korean is the primary voice — English UI strings are secondary translations, not parity. Sentences end in periods; buttons do not. No emoji in financial contexts. Tossface exists as brand decoration but is disallowed on money-handling screens.
-
-| Context | Tone |
-|---|---|
-| CTAs | Imperative, short Korean verb form (`송금하기`, `확인`, `가입하기`) |
-| Success toasts | Past-tense single sentence (`송금이 완료되었어요`). No emoji. |
-| Error messages | Specific + blameless + actionable. Never `문제가 발생했습니다`. |
-| Onboarding screens | Second-person, one idea per screen, no bullet lists. |
-| Financial amounts | Bare numerals with comma separators, then currency unit. `1,240,000원`, never `₩1.24M`. |
-| Empty states | Explain the *why* in one line, offer one action. Never `데이터가 없습니다`. |
-| Legal / disclosure | Korean financial-regulation tone — formal `합니다` endings. Single exception to the casual voice. |
+Toss speaks as a capable guide that removes work rather than displaying financial expertise. Copy is short and direct, but the governing idea is not minimal word count by itself: a person should understand the value, answer the question, and recover from uncertainty without decoding industry language. Official product-design writing describes principles such as **Easy to answer** and **Value first, cost later**—make choices concrete, and show why an action is worthwhile before asking for effort, data, or commitment.
 
-**Forbidden phrases.** `불편을 드려 죄송합니다`, `Oops`, `죄송하지만`, `약 ~원` (approximation on money), any sentence starting with `I'm sorry` in English strings. Rounded currency amounts (`약 120만원`) are forbidden on primary surfaces; exact numerals only.
+In product flows, name the outcome and next action precisely. In education or product-branding surfaces, explain one unfamiliar idea in everyday language and let the interface carry the rest. Avoid vague reassurance, unexplained abbreviations, institutional phrasing, or playful copy that makes a financial consequence ambiguous.
 
 ## 11. Brand Narrative
 
-Toss is the consumer brand of **Viva Republica** (비바리퍼블리카), founded by **Lee Seung-gun (이승건)** — a former dentist who [left a Samsung-owned hospital](https://en.wikipedia.org/wiki/Lee_Seung-gun) to build it ([Wikipedia: Viva Republica](https://en.wikipedia.org/wiki/Viva_Republica), [Fortune Asia, 2025](https://fortune.com/asia/2025/04/23/toss-founder-lee-seunggun-south-korea-viva-republica/)). Lee tried **eight failed ventures** before Toss; the Toss money-transfer product launched in 2014 ([Caproasia, 2025](https://www.caproasia.com/2025/07/26/south-korea-financial-app-toss-plans-united-states-ipo-in-2026)) into a Korean banking market dominated by legacy institutions — KB, Shinhan, Woori, Hana — each with institutional-indigo websites, 12-digit account numbers, Active-X plug-ins, and the presumption that handling money had to feel like filing taxes. The founding rejection was of that entire aesthetic vocabulary. The specific cerulean `#3182f6` was chosen because it was **not** the indigo of any incumbent bank. The optimism of the color was the whole thesis: money could feel light.
+Toss presents finance as a connected product experience rather than a collection of institutional silos. Its design system supports that ambition by making repeated actions—checking, comparing, agreeing, paying, and recovering—feel consistent even when the underlying financial products differ.
 
-Toss reached **20M+ users by 2021** (Wikipedia) and operates as a financial super-app spanning lending, payments, brokerage, insurance, and credit scoring. As of 2025, the company plans a **US IPO in 2026 at ~$15B valuation**, raising $2.5B (Caproasia, July 2025), with investors including Altos Ventures, Goodwater Capital, HongShan Capital, PayPal, GIC, and Korea Development Bank.
+The company’s first-party design writing shows how this consistency became a brand system inside the product. Product branding is treated as the experience people receive while using a feature, not merely a campaign wrapped around it. Toss Product Sans extends the same logic into typography: numbers, symbols, Korean text, and multiple digital and offline contexts were considered as one product problem.
 
-Toss is not a neo-bank. It's a super-app: one interface holds transfers, investments, credit scoring, insurance, brokerage, and lending. The design's job is to flatten that complexity into **one gesture per screen**. That requires extreme restraint — shadows are single-layer black, palette is blue-and-neutral, type is one family in three weights. Every ornamental move costs clarity, and clarity is the entire brand promise.
-
-What Toss refuses: the institutional seriousness of legacy finance, the playfulness of consumer apps (no bright pink, no illustrations of cartoon piggy banks), the data-viz density of Bloomberg-style terminals. Toss occupies a narrow middle — calm but optimistic, dense with functionality but spacious in presentation.
+The practical design position is therefore clarity with momentum. **Easy to answer** reduces the cognitive cost of a decision; **Value first, cost later** makes benefit legible before asking for commitment. Blue, typography, motion, and microcopy are useful only when they help a person move through money with more confidence.
 
 ## 12. Principles
 
-1. **Breathing room for money.** Financial amounts get ≥1.5× the surrounding spacing of normal text. A balance at 30px with 32px margins is correct; the same balance at 16px margins looks cheap and therefore untrustworthy.
-2. **Progressive density.** Summary screens are spacious; detail and transaction screens are dense. The deeper the user navigates, the more information per pixel — they've committed to the context and want facts.
-3. **One action per screen.** If a screen has two primary buttons, it is two screens. Secondary actions are acceptable; two primaries are never acceptable.
-4. **Blue is interaction, not decoration.** `#3182f6` appears only where the user can tap. It never decorates. Illustrations, ornaments, borders, and headers never use blue500 unless they are interactive surfaces.
-5. **Restraint communicates trust.** Shadows are single-layer, pure black, low opacity. No colored shadows, no multi-layer elevation stacks. In finance, visual noise is credibility tax.
-6. **Korean and Latin are co-equal.** Never assume one is primary. Typography stacks, optical weights, and tabular numerals all assume both scripts render simultaneously in the same line.
-7. **Numbers are typography.** Financial amounts use 700 weight and tabular numerals with the same care as display headings. Amounts never inherit body-text weight.
-8. **Negative space is a brand asset.** If reducing padding would fit more on screen, the answer is another screen, not tighter packing.
-
-## 13. Personas
+The following are implementation principles derived from the verified surfaces, not quoted corporate doctrine:
 
-*Personas below are fictional archetypes informed by publicly described Korean fintech user segments, not individual people.*
+1. Separate product-system evidence from marketing-surface evidence.
+2. Make interaction blue functional rather than decorative.
+3. Preserve component states, especially disabled, loading, pressed, and keyboard focus.
+4. Prefer exact, readable typography over ornamental depth.
+5. Treat financial outcomes as explicit states with clear next actions.
 
-**정민 (Jeongmin), 28, Seoul.** Software engineer at a mid-size startup. Opens Toss 2–3 times a day — morning subway, post-lunch balance check, evening transfer to a flatmate. Expects the app to open directly to the account screen and paint in under 1s. If she has to tap twice to see her money, she's already irritated. Uses both Korean and English on-device; reads financial English natively but prefers Korean UI for speed.
+## 13. Personas
 
-**이선생님 (Mr. Lee), 54, Busan.** Runs a three-person machining shop. His daughter set up Toss for him two years ago. Primary use: transferring to suppliers and receiving invoice payments. Needs one-tap repeat transfer — he has about 12 regular counterparties. Distrusts anything that looks like an advertisement. Would uninstall the app before tapping a promoted banner. Reads Korean only; English strings on product surfaces are invisible to him. Values receipts and transaction history — never deletes them.
+These are first-party product contexts, not invented demographic personas.
 
-**예은 (Yeeun), 21, Daegu.** University student, third year, Economics. Toss is her primary banking app — she opened her first account through it, and has never touched a legacy bank's web interface except under duress. Expects Toss Blue to be "banking blue." If another financial app uses cerulean, she assumes it's imitating Toss. Sends ₩5,000–₩30,000 amounts constantly (splitting bills, paying back friends). Treats the app like a messaging app with money attached.
+- **A person answering a financial question:** needs options translated into concrete, comparable choices rather than a dense form or open-ended prompt.
+- **A person evaluating value before effort:** needs the likely benefit made visible before consent, document upload, consultation, or payment is requested.
+- **A person recovering from an interrupted flow:** needs the current state, consequence, and next safe action stated explicitly, especially in insurance, payment, or account contexts.
 
 ## 14. States
 
-| State | Treatment |
+| Component | Verified state contract |
 |---|---|
-| **Empty (first use)** | Single paragraph of `grey700` body text explaining *why* the screen is empty (`아직 거래내역이 없어요`), plus one suggested action as a secondary button (blue50 bg, blue500 text). Never an illustration. Never `데이터가 없습니다`. |
-| **Empty (filter cleared)** | Single line of `grey500` caption (`조건에 맞는 결과가 없어요`). No button — user resets the filter themselves. |
-| **Loading (first paint)** | Skeleton blocks matching the final layout's structure at `#f2f4f6` (grey100). Financial amounts render as `--` until resolved; they never appear as skeleton blocks (would look like they have a placeholder value). |
-| **Loading (refresh)** | Top bar pull-down spinner in blue500. No overlay, no blocking. Content stays visible with its previous values. |
-| **Error (inline field)** | `#f04452` (red500) 2px border on the input, error text below in red500 13px. One actionable sentence (`계좌번호를 다시 확인해주세요`). |
-| **Error (toast)** | `#191f28` background, white 14px 400 text, 3s auto-dismiss. One sentence. No icons. Bottom of screen with 20px inset. |
-| **Error (screen-blocking)** | Reserved for server outage. White screen, centered single-line message in `grey900` 16px weight 600, retry button in blue500 below. No illustration. |
-| **Success (inline flash)** | Brief flash of `#e8f3ff` (blue50) background behind the updated element, 300ms fade to default. For routine actions like toggling a setting. |
-| **Success (money moved)** | Dedicated confirmation screen — not a toast. `#03b26c` (green500) checkmark top-center, exact amount in 30px weight 700 below, recipient name, timestamp. Single button: `확인`. This weight is intentional; money moving is never a toast. |
-| **Skeleton** | `#f2f4f6` blocks at exact final dimensions. 1.2s shimmer as `linear-gradient` with 8% white highlight. Rounded at component radius (8px/12px/16px per component). Never used on financial amounts — those show `--`. |
-| **Disabled** | Button opacity drops per `--button-disabled-opacity-color`. No grey-out of input borders — disabled inputs keep `grey200` border, so the geometry is stable if re-enabled. |
-| **Loading inside pressed button** | Text is replaced by the 3-dot white animation. Width of the button does not change. Press is visually committed; user cannot double-submit. |
+| TDS Button | fill/weak, semantic color, loading, disabled, pressed, keyboard focus |
+| TDS Text Field | box/line/big/hero, focus, error, disabled, read-only |
+| TDS Agreement | checked, unchecked, disabled, nested hierarchy |
+| Marketing CTAs | default geometry captured; hover remains unclaimed |
 
 ## 15. Motion & Easing
 
-**Durations** (named, not raw milliseconds):
-
-| Token | Value | Use |
-|---|---|---|
-| `motion-instant` | 0ms | Toggle flips, checkbox state changes |
-| `motion-fast` | 150ms | Hover, focus, small reveals, button press overlay |
-| `motion-standard` | 250ms | The default — sheet opens, card expands, tab switches |
-| `motion-slow` | 400ms | Emphasized transitions — success checkmarks, onboarding step advances |
-| `motion-page` | 350ms | Full-screen transitions between top-level routes |
-
-**Easings:**
-
-| Token | Curve | Use |
-|---|---|---|
-| `ease-enter` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Things appearing — sheets, toasts, screen pushes |
-| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Things leaving — dismissals, pops |
-| `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Two-way transitions — collapsible cards, tab content |
-| `ease-spring` | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Reserved. Only for money-moved success checkmark. Nowhere else — overshoot on routine UI would feel unserious. |
-
-**Signature motions.**
-
-1. **Money-moves.** When a balance updates, the old number slides up 20px and fades out (`motion-fast / ease-exit`), the new number slides in from below 20px (`motion-standard / ease-enter`). Never cross-fade money — a financial amount flickering between values looks like a bug.
-2. **Bottom-sheet presentation.** Sheets rise from `y+40px` with `motion-standard / ease-enter` and a synchronized backdrop fade from `rgba(2,9,19,0)` to `rgba(2,9,19,0.5)`. Dismissal uses `motion-fast / ease-exit` — leaving feels lighter than entering.
-3. **Success checkmark.** On money-moved confirmation, the checkmark draws over `motion-slow` with `ease-spring`. This is the one place spring easing is licensed. Everywhere else, standard easing.
-4. **Reduce motion.** If `prefers-reduced-motion: reduce`, all `motion-*` tokens collapse to `motion-instant`. No exceptions. Crossfades replace slides. The app stays usable; just less kinetic.
-
-<!--
-OmD v0.1 Sources — Philosophy Layer (sections 10–15)
-
-Direct verification via WebFetch (2026-04-19):
-- https://toss.im/ — confirms Viva Republica (비바리퍼블리카) as operating company,
-  unified-finance super-app positioning ("내 모든 금융 내역을 한눈에 조회하고 한 곳에서 관리하세요"),
-  and mission framing "모두의 금융에 자유를" (financial freedom for everyone).
-- https://slash.page/ — confirms Toss maintains a public open-source engineering
-  presence ("Copyright © 2024 Viva Republica - Toss Frontend Chapter"), with
-  packages including overlay-kit, suspensive, use-funnel — demonstrating the
-  design/engineering self-documentation culture referenced in §12 Principles.
-
-Base DESIGN.md (sections 1–9) is the source for token-level claims including
-Toss Blue #3182f6, Toss Product Sans, the OKLCH-based palette, and shadow tokens.
-
-Not independently verified via WebFetch — widely documented public facts used:
-- Toss (Viva Republica) was founded in 2013; the money-transfer app launched in 2015.
-- Korean legacy-bank institutional palette context (KB, Shinhan, Woori, Hana) is
-  general industry knowledge, not a sourced Toss statement.
-
-Personas (§13) are fictional archetypes informed by publicly described Korean
-fintech user segments. Any resemblance to specific individuals is unintended.
-
-Interpretive claims (e.g., "the specific cerulean was chosen because it was
-not the indigo of any incumbent bank") are editorial readings of the design,
-not documented Toss statements.
--->
-
+No canonical motion duration or easing token is promoted in this revision. Preserve state clarity and reduced-motion compatibility, but label any exact animation curve or duration as a local extension until it is verified from an official component source.