---
id: toss-securities
name: Toss Securities
display_name_kr: Toss Securities (토스증권)
country: KR
category: fintech
homepage: "https://tossinvest.com"
primary_color: "#3182f6"
logo:
  type: favicon
  slug: "https://www.google.com/s2/favicons?domain=tossinvest.com&sz=256"
verified: "2026-05-15"
omd: "0.1"
tokens:
  source: prose-derived
  extracted: "2026-06-09"
  colors:
    primary: "#3182f6"
    primary-hover: "#2562b9"
    primary-pressed: "#29518e"
    brand-text: "#4391ff"
    positive: "#dc2e47"
    positive-hover: "#ad2136"
    positive-pressed: "#8d222f"
    positive-text: "#f5445a"
    negative: "#3182f6"
    negative-text: "#4391ff"
    canvas: "#101013"
    overlay: "#202025"
    on-primary: "#ffffff"
  typography:
    family: { sans: "Toss Product Sans", mono: "Toss Product Sans" }
    section-h2:  { size: 24, weight: 700, use: "Section headers" }
    sub-h3:      { size: 19, weight: 700, use: "Sub-section headers" }
    nav:         { size: 15, weight: 500, use: "Global nav links" }
    body:        { size: 16, weight: 400, use: "Body and button text" }
    input:       { size: 15, weight: 400, use: "Form field text" }
    memo-chip:   { size: 12, weight: 600, use: "Contextual pill action" }
    on-cta:      { size: 16, weight: 400, use: "White on tinted-fill button" }
  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:
    none: "none"
  components_harvested: true
  components:
    button-brand: { type: button, bg: "#3182f6", fg: "#ffffff", use: "Primary CTA brand fill" }
    badge-positive: { type: badge, fg: "#f5445a", font: "12/600", use: "Up-tick / 매수 indicator (KR red-up)" }
    badge-negative: { type: badge, fg: "#4391ff", font: "12/600", use: "Down-tick / 매도 indicator (KR blue-down)" }
    input-field: { type: input, font: "15/400", use: "Form field on dark surface" }
---

# Design System Inspiration of Toss Securities (토스증권)

## 1. Visual Theme & Atmosphere

Toss Securities is the brokerage arm inside Korea's fintech super-app, and it inherits its parent's typographic and chromatic DNA while pulling the entire surface into a deep, calm dark mode by default. The page opens not on white but on a near-black canvas — page background `rgb(23, 23, 28)` over a deeper surface token `#101013` — where money information feels less like banking-product chrome and more like an instrument panel: legible, quiet, technically dense, and resolutely free of decoration. Where retail-banking Toss optimises for "anyone can use this," Toss Securities optimises for "someone watching a chart wants this exact answer right now," and the visual system reflects that pivot without changing brand vocabulary.

The custom **Toss Product Sans** typeface carries over wholesale from `toss.im` — same Korean-Latin optical balancing, same tabular-numeral support that makes price ticks, volume figures, and percent changes line up cleanly across rows. Body sits at 16px / 400, section headings at 24px / 700, sub-section headings at 18.72px / 700, and global navigation uses an intermediate 15px / 500 weight that quietly separates wayfinding from reading. There is no display-only accent typeface; restraint is the rule.

What makes Toss Securities visually unique inside the Toss family is the **semantic colour inversion**: the parent product treats blue as "go / primary action," but a securities surface must carry the Korean-finance locale convention where **red means a price went up (positive)** and **blue means a price went down (negative)**. The live token tree honours this — `--tw-semantic-color-fill-positive-default: #dc2e47` (red), `--tw-semantic-color-fill-negative-default: #3182f6` (blue) — and the same Toss Blue `#3182f6` is reused as the brand CTA fill `--tw-semantic-color-fill-brand-default`. Context resolves the ambiguity: a blue rectangle next to a price tick means "this stock fell"; a blue rectangle as a button means "execute." Designers porting this language outside KR/JP/TW **must invert** the positive/negative hue assignments.

**Key Characteristics:**
- Dark-mode-first surface (`#101013` deepest, `rgb(23,23,28)` body, `#202025` overlay)
- Toss Product Sans inherited from parent brand — tabular numerals for price data
- KR-finance locale: `positive` = red `#dc2e47`, `negative` = blue `#3182f6` (semantic tokens, not just colour values)
- Toss Blue `#3182f6` carries dual duty as brand CTA AND down-tick — context-disambiguated
- Three-namespace token system on `:root`: `--tw-semantic-*` (role) / `--tw-adaptive-*` (theme-aware primitive) / `--wts-adaptive-*` (Web-Toss-Securities scale)
- Zero box-shadow on production chrome — depth via layered surface alpha + translucent 1px borders (`rgba(214,224,239,0.09)`)
- Two-tier radius family: `8px` for cards/inputs/buttons, `32px` for contextual chips/pills
- 416 CSS custom properties live on `:root` — a real internal DS, simply not published

## 2. Color Palette & Roles

### Brand (CTA, links, active)
- **Toss Blue** (`#3182f6`): `--tw-semantic-color-fill-brand-default`. Primary CTA fill, brand icon, brand link.
- **Toss Blue Hover** (`#2562b9`): `--tw-semantic-color-fill-brand-defaultHover`.
- **Toss Blue Pressed** (`#29518e`): `--tw-semantic-color-fill-brand-defaultPressed`.
- **Brand Text** (`#4391ff`): `--tw-semantic-color-txt-brand`. Brand-coloured inline text.
- **Brand Text Hover** (`#74b1f8`): `--tw-semantic-color-txt-brandHover`.

### Semantic — KR finance convention (CRITICAL)
- **Positive / Up / 매수** (`#dc2e47`): `--tw-semantic-color-fill-positive-default`. RED. Used for rising prices, gain indicators, buy confirms.
- **Positive Hover** (`#ad2136`): `--tw-semantic-color-fill-positive-defaultHover`.
- **Positive Pressed** (`#8d222f`): `--tw-semantic-color-fill-positive-defaultPressed`.
- **Positive Text** (`#f5445a`): `--tw-semantic-color-txt-positive`.
- **Positive Text Hover** (`#ff7187`): `--tw-semantic-color-txt-positiveHover`.
- **Positive Weak** (`rgba(219,81,87,0.2)`): `--tw-semantic-color-fill-positive-weak`. Tinted background for up-tick rows.
- **Negative / Down / 매도** (`#3182f6`): `--tw-semantic-color-fill-negative-default`. BLUE. Same hex as Brand — context disambiguates.
- **Negative Text** (`#4391ff`): `--tw-semantic-color-txt-negative`.
- **Negative Weak** (`rgba(67,122,223,0.2)`): `--tw-semantic-color-fill-negative-weak`.

> **Locale rule**: This is non-negotiable for KR/JP/TW finance UI. Porting to US/EU markets requires swapping all `positive-*` tokens to green and all `negative-*` tokens to red. Toss Securities does not ship that variant publicly; it must be authored downstream.

### Surface (dark default)
- **Surface 100** (`#101013`): `--tw-semantic-color-bg-surface100`. Deepest surface — page floor.
- **Body composite** (`rgb(23, 23, 28)`): rendered body background as observed via getComputedStyle.
- **Overlay 300** (`#202025`): `--tw-semantic-color-bg-overlay300`. Modal/sheet overlay base.
- **Panel border outer** (`rgba(214,224,239,0.09)`): `--tw-semantic-color-component-panel-borderOuter`. Translucent dividers — depth without shadow.

### Text (dark surface)
- **Primary** (`rgba(242,246,255,0.9)`): `--tw-semantic-color-txt-neutral-primary`. Default reading text.
- **Primary Hover** (`rgba(255,255,255,0.96)`).
- **Primary Pressed** (`#FFFFFF`).
- **Secondary observed** (`rgba(253,253,254,0.89)`): inline secondary text — slightly warmer alpha.
- **Tertiary observed** (`rgba(242,242,255,0.47)`): disabled / muted captions.
- **Body default rendered** (`rgb(195, 195, 198)`): composited body text — neutral cool grey.
- **Static white** (`#FFFFFF`): `--tw-semantic-color-txt-staticWhite`. On-CTA text.

### Icon
- **Icon brand** (`#3182f6`).
- **Icon neutral primary** (`rgba(217,223,235,0.8)`).
- **Icon positive** (`#f5445a`) — up-tick chevron.
- **Icon negative** (`#4391ff`) — down-tick chevron.

## 3. Typography Rules

### Font Family

**Primary**: `"Toss Product Sans", Tossface, -apple-system, system-ui, "Bazier Square", "Noto Sans KR", "Segoe UI", "Apple SD Gothic Neo", sans-serif`

Tossface is Toss's open-source emoji font (3500+ glyphs, parent-brand asset). Toss Product Sans is loaded via parent-domain CDN — Toss Securities does not appear to serve its own webfont copy on this surface.

### Hierarchy (observed live)

| Role | Size | Weight | Notes |
|------|------|--------|-------|
| Section H2 | 24px | 700 | "지수 목록" / "실시간 차트" |
| Sub-section H3 | 18.72px | 700 | "필터" / "종목 정보" |
| Nav link | 15px | 500 | Global nav |
| Body / button text | 16px | 400 | Body default |
| Input text | 15px | 400 | Form fields |
| Memo chip | 12px | 600 | Contextual pill action |
| On-CTA text | 16px | 400 | White on tinted-fill button |

### Numeric & data treatment
Tabular numerals inherit from Toss Product Sans variable-width / tabular-mode toggle. Price ticks, order-book columns, and percent changes use the tabular mode so digits align by column without `font-variant-numeric` patching at each surface.

## 4. Iconography & Imagery

- Icon weight: medium-stroke, single-tone (`--tw-semantic-color-icon-*`).
- Brand icon set inherits from parent Toss icon system.
- No decorative illustration on data surfaces — the price chart IS the imagery.
- Marketing surfaces (homepage feed) use product screenshots of the order panel itself, recursively.

## 5. Layout & Spacing

- **Two-pane stock detail**: chart + price panel (left) / order panel (right rail).
- **Card radius**: `8px` (cards, inputs, default buttons).
- **Chip radius**: `32px` (pill controls — memo, filter chips).
- **Icon button radius**: `6–8px` with compact padding (`3px 6px` to `6px 8px`).
- **No box-shadow** on any production chrome element sampled.
- Surface depth = base `#101013` → body `rgb(23,23,28)` composite → overlay `#202025` for sheets.
- Translucent `rgba(214,224,239,0.09)` 1px borders for panel separation.

## 6. Components

### Buttons
- **Ghost (default observed)**: bg `rgba(217,217,255,0.11)` / text `#fff` or `rgba(253,253,254,0.89)` / radius `8px` / 16px text / 400 weight.
- **Brand CTA (inferred from token tree, not sampled directly on this surface)**: bg `#3182f6` / text `#fff` / radius `8px`.
- **Memo chip**: bg `rgba(217,217,255,0.11)` / radius `32px` / 12px / 600 / padding `0 8px`.
- **Icon button**: radius `6–8px` / padding `3×6` to `6×8`.

### Order panel (stock detail)
- Panels: 차트 · 호가 · 시세 · 일반주문 · 개인·외국인·기관 · 체결가.
- Order types: 일반주문 / 정규장 주문 예약.

### Navigation
- Global: 홈 · 피드 · 주식 골라보기 · 내 계좌 · 내 투자.
- Secondary: 관심 · 최근 본 · 실시간.
- Auth: 로그인.

### Price tick (semantic)
- Up → text `#f5445a` (icon `#f5445a`), weak tint `rgba(219,81,87,0.2)`.
- Down → text `#4391ff` (icon `#4391ff`), weak tint `rgba(67,122,223,0.2)`.

## 7. Motion & Interaction

State tokens captured for all interactive roles:

- **Brand**: default `#3182f6` → hover `#2562b9` → pressed `#29518e`.
- **Positive**: default `#dc2e47` → hover `#ad2136` → pressed `#8d222f`.
- **Negative**: default `#3182f6` → hover `#2562b9` → pressed `#29518e`.
- **Ghost-fill family**: `*-ghostHover` / `*-ghostPressed` / `*-weakHover` / `*-weakPressed` exist for every role — fine-grained state language.

Motion timing tokens not captured this pass (no live transition introspection performed) — flagged for UPDATE.

## 8. Accessibility & Density

- Dark surface + `rgba(242,246,255,0.9)` primary text ≈ AA-passing contrast on `#101013` (~14:1).
- Body composited grey `rgb(195,195,198)` on `rgb(23,23,28)` ≈ 11:1 — comfortable AA.
- **Locale risk**: KR red/blue convention is opposite to most US/EU expectations. Cross-locale users may misread direction.
- High data density tolerates 16px body baseline because tabular numerals stabilise column scanning.

## 9. Voice (illustrative, fresh derivations — not verbatim Toss copy)

- "Watch the tick. Move when it matters."
- "차트는 정직해요. 결정은 빠르게."
- "Real prices. Real depth. No theatre."

§10 voice samples above are tone-shape paraphrases — derived from observing the calm/declarative product voice on the live surface, not lifted from Toss Securities marketing copy. Brand owns its own taglines; we do not reproduce them.

## 10. Personas (FILL IN — surface-inferred placeholders)

- **A. Active retail trader, KR 20s–30s**: opens app multiple times intraday, watches a small watchlist, executes via mobile. Wants speed and signal. `[FILL IN with sourced research]`
- **B. Long-horizon individual investor, KR 30s–50s**: monthly rebalance, ETF + blue-chip focus, uses 내 계좌 dashboard primarily. `[FILL IN]`
- **C. First-time investor onboarding from Toss core**: came in via Toss super-app, expects continuity of brand and trust. `[FILL IN]`

## 11. Anti-patterns (don't steal)

- **Do not** copy positive=red / negative=blue into non-KR/JP/TW locales without inversion.
- **Do not** assume Toss Blue means "brand CTA" everywhere — on Securities it also means "down-tick."
- **Do not** introduce box-shadow as elevation language; this system has chosen translucent borders + layered surface alphas.
- **Do not** introduce a third radius tier; the system is deliberately two-tier (`8px` / `32px`).
- **Do not** introduce a display-only typeface; restraint is the point.

## 12. Reference URLs

- Production app: https://tossinvest.com (homepage)
- Production stock surface: https://www.tossinvest.com/stocks/A005930/order (Samsung Electronics order panel)
- Parent brand DS context: https://toss.im (typography + base colour origin)
- Tossface (open-source emoji): https://github.com/toss/tossface

## 13. Verification footer

- **Tier 1 official DS**: ✗ NEGATIVE — no `design.tossinvest.com`, no `tossinvest.com/design`, no `tossinvest.com/brand` portal; GitHub org `@toss` (45+ repos, verified for `toss.im`) has zero Toss-Securities-specific design-system / Storybook / token repository; no `toss-im` or `toss-securities` GitHub org exists. Production code exposes 416 `:root` CSS custom properties across three namespaces (`--tw-semantic-*`, `--tw-adaptive-*`, `--wts-adaptive-*`) — the closest public artifact, captured directly.
- **Tier 2 indexes**: not consulted (consistent with KR fintech systemic gap logged in `2026-05-13-kr10.md` and `2026-05-14-kr10.md` audits).
- **Tier 3 live capture**: ✓ CDP `:9222` getComputedStyle on **two surfaces** — homepage (601 DOM samples, 416 `:root` vars) + stock order surface (`A005930/order`). 12 raw_samples retained in `.live-inspect-proof.json` (≥5 floor).
- **IP guardrails**: brand assets reference-only; no verbatim Toss Securities taglines/copy reproduced; voice samples in §9 are fresh derivations; logo not redistributed; persona block in §10 explicitly marked `[FILL IN]` (no fabricated quotes).
- **Flagged for UPDATE**: (a) motion timing tokens not captured this pass; (b) light-mode variant — `--tw-adaptive-*` namespace implies a theme switch but only dark default observed live; (c) personas pending public-research sourcing; (d) primary CTA visual not directly sampled (token tree confirms `#3182f6` fill but live surface served ghost-button variants on inspected paths).

## 14. Do's and Don'ts

### Do
- Build dark-mode-first, layering surfaces from deepest #101013 to body rgb(23,23,28) to overlay #202025 for sheets
- Encode the KR-finance locale by using red #dc2e47 for positive/up ticks and blue #3182f6 for negative/down ticks via the positive/negative semantic tokens
- Create depth with translucent rgba(214,224,239,0.09) 1px borders and layered surface alpha instead of elevation
- Keep the two-tier radius scale, using 8px for cards, inputs, and buttons and 32px for pill controls like memo and filter chips
- Set type from the observed hierarchy: 24px/700 section H2, 18.72px/700 sub-section H3, 15px/500 nav links, and 16px/400 body
- Use Toss Product Sans tabular numerals so price ticks, order-book columns, and percent changes align by column

### Don't
- Copy positive=red / negative=blue into non-KR/JP/TW locales without inverting positive-* to green and negative-* to red
- Assume Toss Blue #3182f6 always means brand CTA, since on this surface it is also the down-tick fill and only context disambiguates
- Introduce box-shadow as elevation language; this system deliberately uses translucent borders plus layered surface alphas
- Add a third radius tier beyond the deliberate two-tier 8px / 32px scale
- Introduce a display-only accent typeface; restraint is the rule and there is no decorative accent face
- Decorate data surfaces with illustration; the price chart itself is the imagery


---
Source: https://oh-my-design.kr/design-systems/toss-securities · Raw twin of references/toss-securities/DESIGN.md
Install 356 verified references for your AI coding agent: npx oh-my-design-cli install-skills