` elements; header link at rest | | Canvas / reverse ink | `#ffffff` | White surfaces; account-opening and research-link labels | | Muted links | `#666666` | Research links and the largest text-colour census group | | Secondary paragraph ink | `#777777` | Two visible `
` elements | | Product-grid labels | `#333333` | Fund link, unchanged during its artwork swap | | Search input ink | `#000000` | Computed input text colour; the placeholder is not used as ink evidence | | ON badge surface | `#fde7f2` | Child `em.contest-badge.going` | | Contest link surface | `#fbd5e6` | Domestic contest link at rest | 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 | Evidence class | Finding | |---|---| | Official product use | No opened company writing identified an application-wide product typeface. | | Live-loaded | `document.fonts`: **SpoqaHanSansNeo 400 normal**, **SpoqaHanSansNeo 700 normal**, and **Anton 300 normal**. All six measured controls declare SpoqaHanSansNeo. Only that measured control family enters the structured family token. Anton's role on a particular element was not established. | | Official distributed assets | The first-party [font stylesheet](https://www1.kiwoom.com/h/kws/assets/css/font.css?20230511) references Regular, Medium and Bold SpoqaHanSansNeo files and `Anton-Regular.ttf`. A separate downloadable font package or redistribution licence was not verified. | | Declared-only | SpoqaHanSansNeo 500 is registered but absent from the loaded-face census. The declared body/h1/button fallback stack also names Malgun Gothic, AppleGothicNeoSD, Apple SD 산돌고딕 Neo, Droid sans, dotum and 돋움; none appears in the loaded FontFace list. No specimen is assigned to these declarations. | | Unresolved | The census does not establish whether a face resolved from `local(...)` or a network file. The CSS labels the Anton registration 300 even though the filename says Regular. Neither registration is converted into an inferred weight range. | 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.** | Control | Size / weight | Line height | Letter spacing | |---|---|---|---| | Header account link | 16px / 700 | 28px | -0.3px | | Account ribbon link | 16px / 400 | 22px | -0.2px | | Fund product link | 16px / 400 | 22px | -0.2px | | Search input | 19px / 400 | 40px | normal | | Research action | 14px / 400 | 40px | -0.2px | | Contest link | 14px / 400 | 22px | -0.2px | 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](https://www1.kiwoom.com/h/kws/assets/css/common.css?2512); 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 | Control | Hover | Pressed | Keyboard focus | |---|---|---|---| | Account ribbon | Parent icon image swaps | Same image as hover | Browser `auto` outline only | | Header account | Foreground becomes `#ee137b` | Same foreground as hover | Browser `auto` outline only | | Fund product link | Image swaps; background grows and shifts as in §4 | Same artwork geometry as hover | Browser `auto` outline only | | Research action | UNMEASURED: outside pointer viewport | UNMEASURED | Browser `auto` outline only | | Search input | Raw wrapper changes already persist after blur | Same raw wrapper changes | Persistent wrapper changes; no isolated focus token | | Contest link | UNMEASURED: outside pointer viewport | UNMEASURED | Browser `auto` outline only | 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](https://www.kiwoom.com/h/ir/introduce/VRetailView?dummyVal=0). ## 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.” --- Source: https://oh-my-design.kr/design-systems/kiwoom · Raw twin of references/kiwoom/DESIGN.md Install 576 quality-graded references for your AI coding agent: npx oh-my-design-cli@latest