Toss

Overview

Toss is a fintech platform designed to democratize financial management for everyday users in Korea and beyond. The brand embodies 'Clarity-First Minimalism'—a design philosophy that strips away financial jargon and visual noise to reveal only what matters. The interface uses a vibrant cobalt blue (#3182f6) as the primary accent, paired with a pristine white canvas and a sophisticated grayscale hierarchy, creating an environment where complex financial tasks feel intuitive and approachable. The emotional response is one of confidence and relief: users feel empowered, not overwhelmed.

Toss speaks in a conversational, human tone—direct without being cold, optimistic without being naive. The vocabulary is concrete and action-oriented: 'send money,' 'check balance,' 'invest simply.' The brand avoids financial jargon and instead uses everyday language that resonates with mobile-first users. Example sentence in Toss voice: '송금은 이제 3초면 끝—복잡한 건 우리가 챙길게' (Sending money takes 3 seconds now—we'll handle the complicated stuff).

Colors

Toss employs a 'Functional Chromatic' palette where color serves a precise communicative purpose rather than decoration. Primary (#3182f6) is the signature cobalt blue used exclusively for interactive elements—buttons, links, focus states, and brand moments. It appears frequently enough to feel familiar but sparingly enough to command attention. Secondary (#4e5968) is a sophisticated slate gray used for supporting text, dividers, and secondary UI elements; it provides visual rest between primary actions. Tertiary (#022047) is a deep navy reserved for high-contrast text on light backgrounds and premium card backgrounds, ensuring accessibility (WCAG AA minimum 7:1 contrast ratio). The surface stack progresses from pure white (#ffffff) for primary content areas through carefully calibrated gr

Typography

The type system is built on Toss Product Sans, a proprietary geometric sans-serif optimized for Korean and Latin characters at small sizes. The hierarchy spans from Display (66px, 700 weight) for hero headlines down to Label-sm (12px, 500 weight) for micro-interactions. Display and Headline-lg use aggressive negative letter-spacing (-0.02em, -0.015em) to create visual punch and authority; Body and Label scales use neutral spacing (0em) for legibility. Font weights are binary: 700 for headlines and labels (creating clear visual separation), 400 for body copy (ensuring readability at 16px and below). Line-height is consistently generous (1.5x font size for body, 1.33x for headlines) to accommodate Korean text width and improve scannability on mobile. Apply text-shadow: 0 1px 2px rgba(0, 0, 0

Layout

Toss uses a fluid 12-column grid with a max-width of 1280px, allowing content to breathe on desktop while remaining responsive on mobile. The spacing scale is semantic and hierarchical: unit (8px) is the atomic increment; sm (12px) is used for tight component padding; md (24px) is the standard gutter for section separation and card padding; lg (40px) separates major content blocks; xl (64px) creates breathing room between hero and body sections. Container max-width is enforced at 1280px to prevent line lengths from exceeding 75 characters on ultra-wide displays. White-space is treated as a first-class design element: the hero section uses 250px top padding and 165px bottom padding to create a sense of spaciousness and importance. Margins between sections follow the lg (40px) or xl (64px) s

Elevation & Depth

Toss rejects deep shadows in favor of a 'Flat-with-Intent' approach where elevation is conveyed through subtle layering and borders rather than dramatic depth. Level 1 (Base): the white surface (#ffffff) with no shadow, representing the primary content plane. Level 2 (Cards & Containers): 1px solid border in outline-variant (#e5e8eb) plus box-shadow: 0 4px 16px rgba(2, 32, 71, 0.05)—a soft, diffuse shadow that suggests gentle lift without drama. Level 3 (Modals & Popovers): the same 1px border plus box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15)—a slightly larger blur radius and darker opacity to c

Shapes

Toss embraces 'Geometric Softness'—a shape philosophy that balances precision with approachability. Border-radius follows a strict scale: sm (4px) for small, dense components like badges and chips; DEFAULT (6px) for standard inputs and list items; md (8px) for buttons and medium cards; lg (12px) for larger cards and modals; xl (16px) for hero sections and full-width containers; full (9999px) for pill-shaped buttons and avatars. The reasoning: smaller radii (4px–6px) feel technical and controlled, suitable for form inputs and data-heavy interfaces; medium radii (8px–12px) feel balanced and appr

Components

Action Elements Buttons are the primary affordance for user intent. Button-primary uses primary blue (#3182f6) with white text, 12px vertical padding, 24px horizontal padding, and md radius (8px). On hover, the background shifts to #2272eb (primary-600) with a transition of 150ms ease-out; on active/press, it darkens further to #1b64da (primary-700). The button-dark variant (rgba(0, 12, 30, 0.8)) is used for secondary CTAs or when primary blue would clash with the background; it has a tighter padding (11px vertical, 16px horizontal) and a 7px radius for a slightly softer appearance. All buttons include box-shadow: {elevation.md} to lift them off the surface and signal interactivity.

Containers & Surfaces Cards are the primary container for grouped content. Card uses a white backgr

Do's and Don'ts

**Do**

• Do use primary blue (#3182f6) exclusively for interactive elements—buttons, links, focus states—to create a clear visual language for 'clickable' affordances.
• Do maintain generous white-space (md/lg spacing) between sections to create visual rhythm and prevent cognitive overload in financial interfaces.
• Do apply the full 12-column grid and enforce 8px increments in all spacing to create a sense of precision and engineering.
• Do use the grayscale hierarchy (on-surface #212529 for primary text, on-surface-variant #6b7684 for secondary text) to create clear information hierarchy without relying on color.
• Do transition interactive states (hover, focus, active) over 150–200ms ease-out to provide smooth, predictable feedback.

**Don't**

• Don't use primary blue for body text, backgrounds, or decorative elements—reserve it exclusively for interactive affordances to maintain signal clarity.
• Don't mix border-radius values within a single component family (e.g., don't use both 8px and 12px on different buttons in the same set).
• Don't use shadows deeper than {elevation.lg} (0 8px 32px rgba(0, 0, 0, 0.15))—Toss rejects dramatic depth in favor of subtle, sophisticated layering.
• Don't use color alone to convey status or meaning—always pair color with text labels, icons, or patterns to ensure accessibility for color-blind users.
• Don't deviate from the Toss Product Sans font family or its system fallback stack; custom fonts or serif typefaces break the brand's geometric, modern identity.