뷰노 DESIGN.md

Design System Inspiration of VUNO

Overview

Visual Theme & Atmosphere

VUNO (뷰노) is a Korean medical-AI company. Its own Our Story page says it was founded "at the dawn of medical AI" under the slogan "View the Invisible, Know the Unknown", and calls itself the pioneer that brought out Korea's first AI medical device. Its timeline confirms the details: (주)뷰노 was incorporated in December 2014, built its own deep-learning engine, VunoNet, in June 2015, and in May 2018 won approval from the Ministry of Food and Drug Safety (식약처) for VUNO Med-BoneAge, "국내 최초 인공지능 의료기기". It listed on KOSDAQ in February 2021. Since then its products have spread from reading medical images to predicting outcomes: VUNO Med-Chest X-ray, Fundus AI, DeepBrain, LungCT AI and DeepCARS for hospitals, and, under VUNO Care, the HATIV line (HATIV P30 launched in 2023, HATIV K30 in 2025). The timeline also records US FDA 510(k) clearances for DeepBrain (2023) and Chest X-ray (2024), and a European CE MDR certificate for DeepCARS (2025). The mission it states is "기술로 인류를 건강하고 행복하게 만들자" (make humanity healthier and happier through technology), and its vision is patient-centred, high-quality healthcare "anytime, anywhere".

The website frames that clinical work on dark navy. The probe read #102135 behind 더 알아보기 in the home VUNO Med Solution section, #0c1a29 behind the closing contact band, and #18314d in the DeepCARS closing band; most home copy is white or #d7dfe6, set on dark grounds the collector could not read directly. Light bands are white or #f7f7f7. One saturated teal, #40e2de, does every pointing job. It is the fill of the solid call-to-action, the outline and label of the contact action, the current section in the navigation, the current product tab, the DeepCARS product label, and a 2px rule on top of every press card. Type is Poppins for Latin. Korean text falls through to NanumSquare, which VUNO self-hosts. Headings run at weight 600 with generous line height, and copy on navy steps down to #d7dfe6 and #9bacbb. Every one of the 419 captured elements has 0px radius and no box-shadow. The page is square-cornered and flat, and its only depth is the change between navy and white bands.

Key Characteristics:

• Navy grounds (#102135, #0c1a29, #18314d) with white and #f7f7f7 bands between them
• One teal, #40e2de, for the filled action, the outlined contact action and every current or selected item
• Actions animate with a skewed sheet that slides across the button (#b4fffd over the teal fill; teal over the outlined button), transition: all 0.2s linear
• Poppins for Latin, NanumSquare for Korean; headings at weight 600, lead copy at weight 300
• Radius 0 and no shadow on every captured element
• Cool blue-grey text on navy (#d7dfe6, #9bacbb); #000000, #555555 and #707070 on white

Primary tasks

• Learn what each VUNO Med solution reads and on which kind of medical data
• Follow the company's approvals, contracts and disclosures in 주요 소식
• Open a product page such as DeepCARS and read its evidence points
• Leave an inquiry through 문의사항 남기기

Brand Narrative

VUNO's Our Story page places its founding "at the dawn of the global medical-AI field" and names two firsts: the slogan "View the Invisible, Know the Unknown", and Korea's first AI medical device. Our History fills in the path. It runs from incorporation in December 2014 and the in-house VunoNet engine in 2015 to the 2018 approval of VUNO Med-BoneAge. Then come the Chest X-ray and DeepBrain approvals of 2019, Korea's first innovative-medical-device designation for Fundus AI in 2020, and the KOSDAQ listing in February 2021. After that the timeline turns international, with FDA 510(k) clearances, CE MDR certification, and approvals for HATIV P30 in Indonesia and Saudi Arabia in 2025. The History page describes the company as covering medical images, pathology, biosignals and medical speech, "from diagnostic assistance to prognosis prediction". The home page repeats the same four domains as its numbered rows: 01 Medical Imaging, 02 Pathology, 03 Biosignals, 04 Speech.

The mission is "기술로 인류를 건강하고 행복하게 만들자". The vision is patient-centred healthcare that anyone can use "언제 어디서든" (anytime, anywhere).

Principles

1. Evidence before adjectives. The timeline and news are lists of approvals, certifications and contracts. UI implication: lead with the regulatory or clinical fact.
2. One signal on a dark field. Teal marks every action and every current item, and nothing else is chromatic. UI implication: reserve #40e2de for those roles.
3. Instrument geometry. Square corners and no shadows on every element. UI implication: keep radius 0 and separate by band colour.

Personas

These are fictional archetypes drawn from the audiences VUNO's pages address — clinicians and hospitals (VUNO Med), people who buy HATIV devices, and investors (IR, disclosures). They are not real people.

박민수, 44, 서울. A radiologist comparing chest X-ray reading aids. He reads the product page for the modality and the approval status, then uses 문의사항 남기기.

이준호, 51, 경기. A hospital CIO. He reads 주요 소식 and the History page for certifications (ISO/IEC 27001 and 27701 in 2025) before a vendor review.

Sarah Kim, 35, Singapore. An investor following VUNO's disclosures and overseas contracts in 주요 소식.

Colors

Every token below was read on 2026-09-30 from www.vuno.co, /about and /deepcars by the deterministic collector, with fills painted by pseudo-elements and ancestors read by the fixed keyboard probe on home and /deepcars. The tokens describe VUNO's public website. The HATIV app and the clinical software were not captured, and none of their values is claimed.

Primary

• VUNO Teal (#40e2de): The fill of the solid call-to-action. On 더 알아보기 (home) and the DeepCARS closing 문의사항 남기기 the button's own background is transparent, and the teal is its ::before layer, 250 × 60 (probe). The same teal draws the 1px ::before outline and the label of the outlined 문의사항 남기기, which closes every page. It also marks the current header section (About VUNO on /about, Products on /deepcars), the current product tab on home and the current items of the menu layer. It is the primary because it is both the site's action fill and its only selected-state colour; no other chromatic colour appears in an action or selected role on the captured pages.
• On Primary (#102135): The label on the teal fill, and the label the outlined button switches to when its teal sheet slides in.
• Primary Sweep (#b4fffd): The pale teal ::after sheet that slides across the filled button on hover and press.

Navy grounds

• Navy (#102135): The ground behind 더 알아보기 in the home VUNO Med Solution section (probe behind), and the label colour on teal and on light bands.
• Navy Deep (#0c1a29): The ground behind the closing contact band on home (probe behind).
• Navy Band (#18314d): The background of the DeepCARS closing band (section.sub-bottom, probe ancestor read).

Neutral & Surface

• White (#ffffff): The home news board (article.board-list-wrap), press cards, and text on navy.
• Surface (#f7f7f7): The DeepCARS 관련 뉴스 band (section.product-news, probe ancestor read).
• Hairline (#dddddd): The 1px border of press-card hashtag tags.

Text

• On Dark (#d7dfe6): Descriptions, contact links and the arrow link on navy.
• Muted (#9bacbb): The inactive language (EN) and breadcrumbs; footer items use it at 75% alpha.
• Black (#000000): Press card titles, the partner heading and the document default text colour.
• Secondary (#555555): Press card categories and tags.
• Caption (#707070): Cookie notice copy.
• Charcoal (#222222): The cookie policy link and the home news board text.

Not tokens

• The earlier record's #12273d, #244161 and #f8f8f8 do not render on any captured page and were removed.
• The VUNO logo was not measured, so no logo colour is claimed.

Typography

Font Family

• Live surface use: every captured element computes Poppins first, followed by NANUMSQUARE-400 (388 elements), NANUMSQUARE-700 (25) or NANUMSQUARE-300 (6), then Roboto or sans-serif. Poppins is loaded / high (419 observed uses) and served from Google Fonts (fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700, files on fonts.gstatic.com). Poppins has no Hangul, so Korean text renders in the NanumSquare face named second in the stack. VUNO self-hosts that face under www.vuno.co/views/res/fonts/NanumSquare/ (NanumSquareL/R/B/EB.woff2) as the families NANUMSQUARE-300, -400, -700 and -800. The collector counts only the first family, so it lists NanumSquare as declared with 0 uses. A same-day headless read found NANUMSQUARE-300, -400 and -700 loaded on home, together with Poppins 300, 400, 500 and 600.
• Official distributed font assets: Poppins is by the Indian Type Foundry. Its OFL.txt, opened on 2026-09-30, reads "Copyright 2014-2019 Indian Type Foundry … licensed under the SIL Open Font License, Version 1.1". NanumSquare is a Naver typeface, but no licence text for it was opened this session, so no licence is stated for it.
• Official product use: no VUNO page opened this session names its typefaces, so no statement of official product use is made.
• Declared only (no visible use): NANUMSQUARE-800 is declared and was not loaded on home. Noto Sans CJKKR and the Font Awesome families are declared with 0 observed uses.
• Unresolved: none.

Hierarchy

All captured type has letter-spacing: normal.

Principles

• Weight 600 for statements, 300 for explanation: headings from 35px to 60px are 600, and descriptions at 20–24px drop to 300.
• Tall line heights on display type: 84px on the 60px hero and 80px on the 50px contact heading give Korean headlines room to wrap in two lines.
• Two scripts in one stack: Latin in Poppins, Korean in NanumSquare, at the same sizes and weights.

Layout

Spacing

• Observed values: 8px action padding, 6px tag padding, 60px 8px 60px 22px data-domain rows, a 40px right pad that holds the arrow link's icon, 0 90px on the DeepCARS hero article, 30px inside the cookie notice.
• The page alternates full-width navy and light bands at 1440px, and the capture ran at that width only.

Radius

• 0px on every captured element. The earlier record's 30px pill and 50% circle were not observed and were removed.

Responsive Behavior

The capture ran at 1440 × 900 only. No breakpoint, collapsed menu or mobile layout was measured, and none is claimed. The earlier record's breakpoint table was unsourced and was removed.

Elevation & Depth

All 419 captured elements compute box-shadow: none. Depth comes from the change between navy grounds (#102135, #0c1a29, #18314d) and light bands (#ffffff, #f7f7f7). The one translucent layer observed is the open cookie notice at rgba(255, 255, 255, 0.93). The earlier record's three shadow tokens were not observed and were removed.

Motion & Easing

The captured actions compute transition: all 0.2s linear. The probe waited past the longest transition in scope (up to 1,100ms on /deepcars, where ancestors run reveal animations) before reading. The sheet animation moves a skewed ::after layer from matrix(1, 0, -1, 1, -325, 0) (or -357.5) to matrix(1, 0, -1, 1, 0, 0). Section reveal animations (aniOn classes) were not measured. The earlier record's duration and cubic-bezier tables were not grounded in any capture and were removed.

Components

Buttons

Filled button (primary)

• Background: #40e2de, painted by the button's ::before layer (own background transparent)
• Text: #102135, 16px / 600 / 22.4px Poppins
• Size: 250 × 60, padding 0 8px, radius 0
• Hover / pressed: a #b4fffd sheet (::after, 325 × 60, skewed) slides across; the label stays #102135; transition: all 0.2s linear
• Use: 더 알아보기 on home (on #102135); 문의사항 남기기 in the DeepCARS closing band (on #18314d)

Outlined button

• Background: transparent; outline 1px #40e2de drawn by ::before
• Text: #40e2de, 16px / 600 / 22.4px Poppins (400 on the DeepCARS hero)
• Size: 250 × 60, padding 0 8px, radius 0
• Hover / pressed: a #40e2de sheet slides in and the label turns #102135
• Use: 문의사항 남기기 closing every page (on #0c1a29) and in the DeepCARS hero

Arrow link

• Text: #d7dfe6, 15px / 500 on home; #102135, 15px / 600 on the #f7f7f7 band
• Padding: 6px 40px 5px 0; the arrow sits in a 30 × 30 ::after box with a 1px border in the label colour
• Hover / pressed: no change (probe)
• Use: 모든 소식 보기

Navigation

• Header links: #ffffff, 18px / 400 Poppins, in 110 × 100 cells; the current section turns #40e2de.
• Language switch: KR / EN at 16px / 500, padding 0 8px; the current language #ffffff, the other #9bacbb.
• Product tabs: 20px / 400 in #d7dfe6, 37px left padding; the current tab #40e2de.

Cards & Containers

• Press card: #ffffff, radius 0, 399 × 581, with a 2px #40e2de rule on the top edge only; title 20px / 600 in #000000, category 14px in #555555.
• Tag: 14px #555555 in a 1px #dddddd box, padding 0 6px, 26px tall, radius 0.
• Data-domain row: 758 × 301, white text, a 1px rgba(255, 255, 255, 0.2) top rule and 60px 8px 60px 22px padding.
• Cookie notice: 420 × 234 at rgba(255, 255, 255, 0.93), 30px padding; open at capture.

---

Verified: 2026-09-30 (deterministic collector capture of three public, logged-out pages of www.vuno.co plus fixed keyboard-probe reads and first-party context) Tier 1 sources: https://www.vuno.co/ ; https://www.vuno.co/about ; https://www.vuno.co/deepcars ; https://www.vuno.co/story ; https://www.vuno.co/history ; https://www.vuno.co/news Tier 2 sources: not attempted on 2026-09-30; no Tier 2 value used Conflicts unresolved: none

States

Only observed states are listed.

The earlier record's empty, loading, error, success, skeleton and disabled treatments had no source and were removed.

Do's and Don'ts

Do

• Put actions on navy and fill the primary one with #40e2de and a #102135 label
• Use #40e2de for current and selected items: header section, product tab, menu item
• Keep corners at 0 and surfaces flat
• Set Korean in NanumSquare behind Poppins at the same size and weight
• Use #d7dfe6 for copy on navy and #9bacbb for inactive items

Don't

• Add a second accent hue; teal is the only one observed
• Round buttons or cards
• Add drop shadows
• Set display headings in a light weight; 600 is used from 35px up

Voice & Tone

VUNO writes as a clinical technology company. It states what it does, names the modality or approval, and leaves out exclamation.

Voice samples (verbatim, www.vuno.co, 2026-09-30):

• "의료인공지능의 미래, 뷰노가 이끌어갑니다." — home hero
• "VUNO Med® Solution 인공지능이 융합될 수 있는 광범위한 의료 데이터를 분석해 의료현장의 혁신을 주도합니다." — home solution section
• "뷰노메드 솔루션에 대해 더 궁금하신가요? VUNO 팀에게 언제든지 연락주세요." — closing contact band

Agent Prompt Guide

Quick Color Reference

• Action fill and selected: #40e2de; label on it #102135; hover sheet #b4fffd
• Navy grounds: #102135, #0c1a29, #18314d
• Light bands: #ffffff, #f7f7f7
• Text on navy: #d7dfe6, #9bacbb; on white: #000000, #555555, #707070
• Hairline: #dddddd

Example Component Prompts

• "A navy #102135 section with a 50px / 600 white heading and a 250 × 60 square button: fill #40e2de, label #102135 16px / 600 Poppins; on hover a pale #b4fffd skewed sheet slides across in 0.2s linear."
• "A closing contact band on #0c1a29: 50px / 600 white heading on an 80px line, and an outlined 250 × 60 button with a 1px #40e2de border and #40e2de label that fills teal on hover."
• "A press card: white, radius 0, a 2px #40e2de top rule, title 20px / 600 #000000, category 14px #555555, and #555555 hashtags in 1px #dddddd boxes."

---