Design System Inspiration of VUNO

1. Visual Theme & Atmosphere

VUNO (뷰노) is Korea's pioneer medical-AI company, and its site carries the calm, clinical authority of a firm that sells diagnostic confidence to hospitals. The chrome is a deep navy (#102135) — closer to the color of a darkened reading room than to corporate blue — layered over a navy ladder (#0c1a29, #12273d, #244161) that gives the dark sections quiet depth without ever turning to pure black for structure. Against that navy, a single saturated teal (#40e2de) does all the pointing: it is the active navigation item, the contact CTA, and the 2px border that frames the featured press card. The effect is restraint with one bright signal — the eye is trained to read teal as "look here."

The typographic personality is bilingual and editorial: Poppins for Latin display and UI, NANUMSQUARE for Korean, with NANUMSQUARE-700 carrying the bold 50px section headlines ("주요 소식", "의료인공지능의 미래, 뷰노가 이끌어갑니다") and NANUMSQUARE-400 carrying the quiet 16px body. Headlines are weighty (weight 600) and confident; body copy stays small and matter-of-fact, the register of a company that lets clinical evidence do the talking. Content lives on a white (#ffffff) canvas with a faint grey surface (#f8f8f8) for alternating bands, while text on the dark sections steps down a cool blue-grey ladder — light #d7dfe6 for primary, muted #9bacbb for secondary, with a near-black #000000 body and grey #555555 / #707070 for supporting copy on white.

What distinguishes VUNO from consumer fintech or SaaS peers is its geometry and its near-absence of decoration. Corners are sharp — radius 0 is the default across cards, sections, and links — and the only curves are perfect circles (50%) for icon and scroll indicators, plus an occasional 30px pill. Elevation is whispered: a subtle rgba(35,48,59,0.25) 0px 0px 12px card glow and soft rgba(0,0,0,0.2) ambient shadows, never a heavy card stack. Separation comes from the navy/white contrast and thin #dddddd hairlines. The result reads as precise, evidence-led, and quietly premium — a medical instrument's UI, not a marketing brochure.

Key Characteristics:

• Deep navy chrome (#102135) over a navy ladder (#0c1a29, #12273d, #244161) — clinical, not corporate-blue
• A single saturated teal (#40e2de) reserved for active nav, CTA links, and the featured-card accent border
• Poppins (Latin) + NANUMSQUARE (Korean) — NANUMSQUARE-700 for bold 50px headlines, NANUMSQUARE-400 for quiet body
• Sharp-cornered geometry (radius 0) with circles (50%) only for icons / indicators
• Near-shadowless depth — faint rgba(35,48,59,0.25) card glow, #dddddd hairlines do the separating
• Cool blue-grey text ladder on dark (#d7dfe6 → #9bacbb); near-black #000000 body on white
• White (#ffffff) content cards on a faint grey surface (#f8f8f8)
• Restrained, evidence-first tone — small body copy, weighty headlines

2. Color Palette & Roles

Primary

• VUNO Teal (#40e2de): The signature accent and single "action" color. Used for the active navigation item, the contact CTA text ("문의사항 남기기"), section eyebrow labels, and the 2px accent border on the featured press card. The one saturated hue in the system.

Navy Surface Ladder

• Ink Navy (#102135): The dominant brand surface and a primary text color on white. The dark reading-room navy that defines the chrome, hero, and contact band.
• Navy Deep (#0c1a29): The darkest navy, for the deepest sections and overlay backdrops.
• Navy Mid (#12273d): A mid step in the dark ladder, for layered dark blocks.
• Navy Steel (#244161): The lightest navy step, used for raised dark surfaces and decorative panels.

Neutral & Surface

• Pure White (#ffffff): Page background, content cards, and text on the dark chrome.
• Surface Grey (#f8f8f8): Faint grey for alternating content bands and panels.
• Hairline (#dddddd): Thin borders and dividers — the main separation device in this near-shadowless system.

Text Hierarchy

• Near-Black (#000000): Primary body and card-title text on white.
• On-Dark Light (#d7dfe6): Primary text and links on the navy sections.
• Muted Blue-Grey (#9bacbb): Secondary / inactive text on dark (e.g. the inactive language toggle), also used at reduced alpha for trademark fine print.
• Secondary Grey (#555555): Secondary copy on white.
• Caption Grey (#707070): Cookie / policy fine print on white.

3. Typography Rules

Font Family

• Display / Latin: Poppins — the Latin and UI face across nav, labels, and body.
• Korean: NANUMSQUARE — NANUMSQUARE-700 (bold) for headlines, NANUMSQUARE-400 for body, NANUMSQUARE-300 for fine print.
• Fallback: Roboto, then sans-serif.

Hierarchy

Principles

• Bold headline, quiet body: Weighty 50px / weight 600 headlines over small 16px / weight 400 body. The contrast carries the hierarchy.
• Two scripts, two faces: Poppins owns Latin, NANUMSQUARE owns Korean — they share the same sizes and never trade roles.
• Weight as emphasis: NANUMSQUARE-700 marks every headline and card title; NANUMSQUARE-300/400 keeps supporting text recessive.
• Teal eyebrows: Section labels render in teal (#40e2de) to signal navigation context above the bold headline.

4. Component Stylings

Buttons

Contact CTA (Teal Link)

• Text: #40e2de
• Font: 16px / 600 Poppins
• Height: 60px
• Padding: 0px 8px
• Radius: 0px
• Use: Primary contact call-to-action on the navy band — "문의사항 남기기"

Inline More-Link

• Text: #102135
• Font: 16px / 600 Poppins
• Height: 60px
• Padding: 0px 8px
• Radius: 0px
• Use: Inline "더 알아보기" more-link on white sections

On-Dark More-Link

• Text: #d7dfe6
• Font: 15px / 500 Poppins
• Padding: 6px 40px 5px 0px
• Radius: 0px
• Use: "모든 소식 보기" view-all link on the dark news section

Cards & Containers

Featured Press Card

• Background: #ffffff
• Border: 2px solid #40e2de
• Radius: 0px
• Use: Highlighted / active press-release card — sharp corners with the teal accent border

Standard Press Card

• Background: #ffffff
• Radius: 0px
• Use: Default press-release card on white; title 20px / 600 NANUMSQUARE-700, #000000 text

Navigation

Top Nav

• Text: #ffffff
• Font: 18px / 400 Poppins
• Active: teal #40e2de text on the active item
• Radius: 0px
• Use: Top navigation on the dark chrome ("About VUNO", "Products", "News", "IR", "Publications", "Career")

Language Toggle

• Text: #9bacbb
• Font: 16px / 500 Poppins
• Padding: 0px 8px
• Active: #ffffff text for the selected language (KR), muted #9bacbb for the other (EN)
• Use: KR/EN language switcher in the header

Indicators

Icon Circle

• Border: 1px solid #ffffff
• Radius: 50%
• Height: 40px
• Use: Round arrow / scroll-down indicator on the dark hero

---

Verified: 2026-06-26 (omd:add-reference CREATE — Tier 1 live inspect, 2 surfaces) Tier 1 sources: https://www.vuno.co, https://www.vuno.co/about, https://github.com/vuno Tier 2 sources: getdesign.md/vuno — not listed ("No designs found for vuno"); styles.refero.design/?q=vuno — not listed (no VUNO match) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: ~8px, with a wide vertical scale for editorial breathing room
• Scale: 5px, 8px, 16px, 22px, 40px, 68px, 150px (section padding)
• Notable: Dark content bands use very large 150px vertical padding, giving the corporate narrative a spacious, unhurried rhythm

Grid & Container

• Centered max-width content (~1440px full-bleed dark bands, contained inner columns)
• Full-screen dark hero with a bold 50px headline anchored over a muted background
• News presented as a horizontal row of white press cards, one featured with a teal border
• Alternating navy (#102135) and white (#ffffff) full-width bands structure the page

Whitespace Philosophy

• Editorial spaciousness: large vertical padding (up to 150px) between major bands; the page reads slowly and deliberately
• Contrast over chrome: sections separate by navy/white background shifts and #dddddd hairlines, not by heavy borders or shadows
• One accent, sparingly: teal appears only at decision points, keeping the dark canvas calm

Border Radius Scale

• Sharp (0px): default for cards, sections, links, nav — the system's geometry
• Pill (30px): occasional rounded chip / control
• Circle (50% / 9999px): icon and scroll indicators only

6. Depth & Elevation

Shadow Philosophy: VUNO is a near-shadowless system. Where elevation is needed, the card shadow is a soft, symmetric rgba(35,48,59,0.25) glow — note the navy-grey tint (#23303b family) that echoes the brand's dark palette rather than a neutral black. Most separation is done by the navy/white contrast and thin #dddddd hairlines. The restraint keeps the clinical surfaces feeling clean and instrument-like, never decorative.

7. Do's and Don'ts

Do

• Use deep navy (#102135) as the dominant dark surface for chrome, hero, and contact bands
• Reserve teal (#40e2de) for active nav, CTA links, and the featured-card accent — keep it the single signal color
• Set headlines in NANUMSQUARE-700 (weight 600) at large sizes; keep body in NANUMSQUARE-400 at 16px
• Use Poppins for Latin and NANUMSQUARE for Korean at matching sizes
• Keep corners sharp (radius 0); reserve circles (50%) for icons and indicators
• Separate sections with navy/white contrast and #dddddd hairlines, not heavy shadows
• Step text on dark down the blue-grey ladder (#d7dfe6 → #9bacbb)
• Give dark bands generous vertical padding for an editorial, unhurried rhythm

Don't

• Spread teal across many elements — it dilutes the single-signal accent
• Use pure black sections for structure — reach for the navy ladder (#0c1a29, #12273d, #244161)
• Apply large rounded rectangles or pill cards — VUNO's geometry is sharp
• Lean on heavy drop shadows or card stacks — depth is a faint navy-tinted glow at most
• Set headlines in a light weight — display is weighty NANUMSQUARE-700
• Swap Poppins and NANUMSQUARE roles between scripts
• Use warm accent colors — the only saturated hue is teal
• Crowd the dark bands — spaciousness is part of the clinical authority

8. Responsive Behavior

Breakpoints

Touch Targets

• Nav and CTA links sit at ~60px height for comfortable tapping
• Language toggle items carry 8px horizontal padding
• Circle indicators at 40px for clear targets on the dark hero

Collapsing Strategy

• Hero: 50px headline scales down on mobile, weight 600 maintained
• News row: horizontal press cards wrap / stack into a single column
• Navy/white alternating bands keep full-width treatment, padding reduces from 150px
• Full-screen overlay nav replaces the inline header on smaller viewports

Image Behavior

• Product and press imagery carries the same faint card glow at all sizes
• Sharp-cornered media (radius 0) is preserved across breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Accent / CTA: VUNO Teal (#40e2de)
• Dominant dark surface: Ink Navy (#102135)
• Dark ladder: #0c1a29, #12273d, #244161
• Background: Pure White (#ffffff)
• Surface band: Surface Grey (#f8f8f8)
• Body on white: Near-Black (#000000); secondary #555555; caption #707070
• Text on dark: #d7dfe6 primary, #9bacbb muted
• Hairline: #dddddd

Example Component Prompts

• "Create a dark hero: #102135 background, full-bleed, 150px vertical padding. Headline 50px NANUMSQUARE-700 weight 600, color #ffffff. A teal eyebrow label 40px in #40e2de above it. Body 16px NANUMSQUARE-400 in #d7dfe6. A teal text CTA 'Contact us' in #40e2de, 16px / 600, sharp corners."
• "Design a press card: white #ffffff background, sharp corners (radius 0). Title 20px NANUMSQUARE-700 weight 600 in #000000. The featured card adds a 2px solid #40e2de border. Faint glow shadow rgba(35,48,59,0.25) 0px 0px 12px."
• "Build a dark nav: #102135 chrome, Poppins 18px links in #ffffff, active item in teal #40e2de. Right-aligned KR/EN toggle — active #ffffff, inactive #9bacbb."
• "Create a white content band: #ffffff (or #f8f8f8) background, #dddddd hairline dividers, no heavy shadow. Inline 'Learn more' link in #102135, 16px / 600."

Iteration Guide

1. Navy (#102135) chrome + white content; teal (#40e2de) is the single accent
2. NANUMSQUARE-700 headlines, NANUMSQUARE-400 body; Poppins for Latin
3. Sharp corners (radius 0); circles only for icons / indicators
4. Depth is a faint navy-tinted glow at most; separate with #dddddd hairlines
5. Text on dark steps #d7dfe6 → #9bacbb; body on white is #000000
6. Generous 150px band padding for an editorial, clinical pace
7. Don't spread teal — it marks decisions, not decoration

---

10. Voice & Tone

VUNO's voice is clinical, evidence-led, and quietly confident — the register of a research-grade company that earns trust through approvals, papers, and clinical outcomes rather than hype. The English slogan "View the Invisible, Know the Unknown" frames the mission as making the imperceptible legible; the Korean hero "의료인공지능의 미래, 뷰노가 이끌어갑니다" ("VUNO leads the future of medical AI") states leadership plainly, without exclamation. Product copy is precise and capability-first, naming exactly what each solution detects.

Voice samples (verbatim from live surfaces):

• "View the Invisible, Know the Unknown" — brand slogan (page title + meta description). (verified live 2026-06-26)
• "의료인공지능의 미래, 뷰노가 이끌어갑니다." — hero statement. (verified live 2026-06-26)
• "뷰노메드 솔루션은 의료진들의 일상적인 워크플로우에서 새로운 경험을 제공하고 있습니다." — solutions section copy. (verified live 2026-06-26)

Forbidden register: consumer-app hype, exclamation-heavy marketing, vague superlatives, unqualified medical claims without clinical or regulatory grounding.

11. Brand Narrative

VUNO (뷰노) was founded in 2014 by engineers from Samsung's research organization — 이예하 (Yeha Lee, CEO) with co-founders 김현준 and 정규환 (CTO) — making it one of Korea's earliest dedicated medical-AI companies. The founding premise was that deep learning could read medical data (images, pathology slides, biosignals) at a level that augments clinicians, captured in the slogan "View the Invisible, Know the Unknown" — surfacing what the human eye cannot reliably see and quantifying what was previously uncertain.

The company built a portfolio of VUNO Med® solutions across three data domains it states on its site — Medical Imaging (CT / X-ray / MRI), Pathology (digital slides), and Biosignals (ECG / vital signs) — including VUNO Med-BoneAge (bone-age assessment), VUNO Med-Chest X-ray, VUNO Med-Fundus AI, VUNO Med-DeepBrain, and the DeepCARS cardiac-arrest risk predictor. VUNO Med-BoneAge is widely recognized as the first AI-based medical device to receive Korean regulatory approval, and VUNO listed on the KOSDAQ in 2021 as the country's first domestic medical-AI IPO. The brand also extends from hospital tooling toward personal chronic-disease management with VUNO Care-HATIV.

What VUNO's design refuses is the bright, playful chrome of consumer apps and the institutional blue-and-gold of legacy healthcare IT. What it embraces, visible in the work: a dark reading-room navy, a single precise teal signal, weighty bilingual headlines, sharp instrument-like geometry, and copy that lets clinical evidence — approvals, trials, quantified outcomes — carry the persuasion.

12. Principles

1. Evidence over assertion. VUNO earns trust with approvals, papers, and quantified outcomes. UI implication: lead press and product copy with concrete clinical results and regulatory status, not adjectives.
2. One signal in a calm room. A single teal accent on a deep-navy canvas keeps attention undivided. UI implication: reserve #40e2de for active nav, CTAs, and the featured card; let navy and white do everything else.
3. Clinician in the workflow. The product augments daily medical work. UI implication: describe each solution by modality and exactly what it detects; design for legibility under clinical conditions.
4. Precision is the aesthetic. Sharp corners and an instrument-like restraint signal rigor. UI implication: default to radius 0; reserve circles for indicators; avoid decorative depth.
5. Bilingual by default. Korean and Latin scripts are first-class peers. UI implication: pair NANUMSQUARE and Poppins at matching sizes; never let one script feel like a translation afterthought.

13. Personas

Personas below are fictional archetypes informed by publicly observable VUNO user and stakeholder segments (radiologists, ICU clinicians, hospital IT leaders, investors), not individual people.

박민수, 44, 서울. A radiologist at a tertiary hospital using VUNO Med-Chest X-ray as a second read. Trusts the tool because it cites where the abnormality is, not just that one exists, and because it has regulatory clearance behind it.

정하늘, 38, 대구. An ICU nurse-lead relying on DeepCARS to flag cardiac-arrest risk within 24 hours. Values calm, unambiguous risk signals during a busy shift — no alarm fatigue, no decorative noise.

이준호, 51, 경기. A hospital CIO evaluating medical-AI vendors. Reads VUNO's IR and clinical-evidence pages closely; the quantified outcomes and approvals matter more than the marketing.

Sarah Kim, 35, Singapore. A healthcare investor tracking VUNO's KOSDAQ performance and global expansion. Reads the press and IR sections for revenue and partnership signals, and reads the calm, evidence-led tone as a sign of seriousness.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is quiet and purposeful, matching the clinical-authority tone. The full-screen overlay navigation expands at motion-slow / ease-enter; press cards and sections fade-in from below at motion-standard. No bounce or spring — a medical-AI product signals steadiness, not playfulness. Under prefers-reduced-motion: reduce, all transitions collapse to instant and the product remains fully functional.