Kiwoom Securities DESIGN.md

Design System Inspiration of Kiwoom Securities

Overview

Visual Theme & Atmosphere

Kiwoom Securities (키움증권) is a Korean securities company established on 31 January 2000. Its official history records the start of securities investment services on 4 May 2000, a new CI announcement on 31 January 2006, and the change to the name 키움증권(주) on 25 May 2007. The product family now includes the desktop trading platform 영웅문4 and mobile platform 영웅문S#. The latter launched on 19 August 2022. The current retail-platform introduction also describes Open API+, REST API and the company's own smart order routing system. This is a brokerage portal that brings trading, account services and investment information together. Company overview, early history, CI/name history, recent history, retail platforms.

The homepage places a navy wordmark and magenta arrow on white, then repeats pink in a broad account-service ribbon and pale contest panels. Small pictograms lead into financial products; the fund pictogram changes artwork and grows on hover while its label stays still. Dense service navigation sits alongside larger promotional images. These are observations of the live homepage, rather than published corporate design principles.

The measured homepage is the Korean desktop edition (www1.kiwoom.com/h/main; states resolved to www3.kiwoom.com/h/main), with HTML lang="ko". The reference describes this website; the trading applications supply product context, not their interface tokens.

Brand Narrative

The official timeline connects early online investment services and the 영웅문 desktop platform to the later 영웅문S# mobile release. The current retail introduction adds programmable trading interfaces and routing infrastructure. On the measured web surface, that breadth appears as direct product shortcuts, account-service links, contests and research rather than a single promotional task. History, recent history, retail introduction.

Principles

Observed patterns to carry into a matching website: clear task labels, white content grounds, a magenta service band, navy secondary actions, and artwork changes for pictogram feedback. These are measured patterns, not a claim that Kiwoom publishes these as design principles.

Personas

No persona research was conducted; none is inferred from the capture.

Colors

These names describe measured roles. No first-party custom-property palette was found: the census contained only Swiper variables.

The three pinks above are separate observations. The primary proposal uses the service ribbon's value. The most frequent text colour is #666666, but the dominant measured paragraph ink is #111111.

Typography

SpoqaHanSansNeo 400 declares local("SpoqaHanSansNeo") before first-party WOFF2/TTF sources under /h/kws/assets/fonts/. The 500 and 700 rules instead begin with local("NotoSans"). Anton declares local("Anton"), then the first-party TTF. The directly opened CSS also lists EOT sources for SpoqaHanSansNeo; the browser census's parsed sources list WOFF2 and TTF. These are source declarations, not proof of which binary was selected. Substitute: none chosen.

A general heading or paragraph size scale was not measured.

Layout

At 1440×1000, the header is fixed and 81px high. The first content area places a promotion and search on the left, three stacked investment-category choices in the middle, and a pictogram grid on the right. The quick-service band follows; below it are the contest feature and investment-information cards, then another promotional area and a multi-column support footer. This ordering is visible in the full-page capture.

Padding is component-specific: 52px above the account link's label, 101px above the fund label, and 24px/12px at the search input's start/end. These measurements do not establish a general spacing scale.

Responsive Behavior

Only the 1440×1000 desktop viewport was measured; mobile layouts and breakpoints are unverified.

Elevation & Depth

The research action's parent div.investment-card computes box-shadow: rgba(0, 0, 0, 0.05) 5px 0px 10px 0px. The three extracted links themselves have box-shadow: none at rest and during their measured pointer states. The fund hover crop shows a halo in the replacement artwork while its computed shadow remains none; no separate halo shadow token is inferred.

Motion & Easing

All six control identities report the raw computed transition all 0s ease 0s. No nonzero transition duration or authored easing curve is established for the extracted controls. The pictogram changes are recorded as settled image/background swaps, with no invented animation timing.

Components

Three links have usable authored state evidence:

• Account ribbon link — #mainView01 > a, “계좌개설”. 176×100px, zero radius, padding 52px 0px 0px, white 16px/400 text on the magenta ribbon. Its own background is transparent. Hover replaces the parent list item's ::before image, icon-guick-menu1-1.png → icon-guick-menu1-1-hover.png; the icon box remains 40×36px. Pressed matches hover.
• Header navigation — #topBtnOpenAcnt, “계좌개설”. 57.7×28px, zero radius and padding, 16px/700. It sits transparently on white. Hover and pressed change foreground #111111 → #ee137b; background and geometry retain their rest values.
• Fund product link — #wm01 > a, “펀드”. 94×123px, zero radius, padding 101px 0px 0px, 16px/400 in #333333, transparent on white. Hover and pressed replace main-category1-menu1.png with main-category1-menu1-on.png?2512. The ::before background changes from 74px 72px at 50% 13px to 94px 92px at 50% 3px. The pseudo-element box remains 94×109px. This is an artwork/background change; the link's computed transform stays none.

Asset names are corroborated by the opened homepage stylesheet; the dimensions and changes above come from the live states capture. Image resources were not separately downloaded.

The research action is a 120×40px navy link with radius 40px and no padding. Its pointer states were unmeasured. The contest link is 129.3×40px, radius 30px, padding 5px 17px 0px 6px; its visible name is #111111, while its separate ON badge is 10px/400 in the primary pink. Both remain prose examples because their only measured focus change is the browser ring.

The search input is 463.9×54px, with zero own radius and padding 0px 12px 0px 24px. Its white parent initially has the 3px pink stroke; the opened CSS declares that wrapper 60px high with radius 30px. The probe later observed a transparent border and a gradient background on the wrapper, including after blur. Those persistent observations are excluded from the component state tokens.

States

Measured hovers on the three extracted links matched :hover; pressed snapshots matched :active. Pressed-vs-hover diffs were empty. The probe compared each control, its pseudo-elements, descendants, and three ancestor levels; external-image pixels and unrelated siblings are outside that computed-style comparison. No disabled state was measured.

Do's and Don'ts

• Use the measured pink for its matching role: service ribbon, header interaction or search stroke.
• Keep the fund label and hit area stable while swapping and enlarging its pictogram background.
• Preserve the website's Korean labels and the measured control typography.
• Do not turn the browser's focus outline into a brand token, or the search wrapper's persistent change into a verified focus state.

Voice & Tone

The retail introduction calls Kiwoom a “스마트 투자자를 위한 파트너”. Homepage labels name concrete tasks such as account opening and certification; the invitation “처음이신가요?” sits beside those tasks. The observed combination is practical instruction with an approachable entry point. This is a reading of the opened copy, not a published tone-of-voice manual. Retail introduction.

Agent Prompt Guide

“Create a white Kiwoom-style desktop service header. Use the live-loaded SpoqaHanSansNeo family for a 16px/700 account-opening link, 28px high with square corners and zero padding; its foreground changes from #111111 to #ee137b on hover and pressed.”

“For the fund product link, preserve the 94×123px hit area and 16px/400 label. Put the supplied brand artwork on ::before; swap its background image and change the background size from 74×72px to 94×92px, with vertical background position moving from 13px to 3px.”