삼성서울병원 DESIGN.md

Design System Inspiration of Samsung Medical Center

Overview

Visual Theme & Atmosphere

Samsung Medical Center, 삼성서울병원, opened in 1994. Its current introduction describes a hospital concentrating on severe, complex conditions and developing an advanced intelligent hospital through remodeling, smart wards and digital services. The history records the announcement of the vision 미래의료의 중심SMC and the slogan 함께하는 진료 함께하는 행복 at its 25th anniversary in November 2019. These are the institution's stated direction and historical milestone, respectively. Hospital introduction, history.

The identity combines an institutional wordmark with a more colorful expression of shared care. The official CI page distinguishes the hospital logotype, its combination with the Samsung wordmark, and a supplementary SMC wordmark. It explains that the slogan's six colors represent caregivers and that their combined light expresses happiness and hope shared with patients. The measured homepage gives service tasks a similarly colorful treatment: a continuous strip of blue, cyan, green, orange, purple and navy panels, white labels, and yellow interaction accents. The relationship between the CI explanation and this interface is a visual reading; the CI page does not assign its six slogan colors to these service panels. Official CI.

The measured homepage is the Korean edition at www.samsunghospital.com/home/main/index.do, reached from the root URL, with HTML lang="ko". It puts medical staff/department search and reservation actions beneath a promotion carousel, followed by practical hospital services and notices. The later states capture shows the hero and several service headings that were blank in the earlier survey screenshot; it does not establish that every image label rendered.

Brand Narrative

The 1994 founding statement presents the institution as a place serving health, medical development and education. The later caregiver culture page includes everyone working at the hospital and describes mutual respect and collaboration between specialties. Together with the shared-care slogan, this provides documented context for the brand's emphasis on participation. It does not establish an interface design process or a website redesign date. Founding statement, caregiver culture.

Principles

The verified institutional themes are participation by patients and clinical teams, caregiver collaboration, and improved outcomes for complex conditions. They come from the CI, caregiver culture and introduction pages. The yellow panel border is an observed interface pattern, not a published institutional principle.

Personas

No persona research or persona definitions were verified.

Colors

The survey returned zero computed and zero declared CSS custom properties. These are extracted surface values, with role names used for this reference; they are not an official named token collection.

The paragraph census has a tie between #666666 and #888888; it does not establish one universal body ink. Transparent links retain their measured surroundings: the records link sits on orange and the directions link sits on white. Their backgrounds are not flattened into opaque component fills. Home stylesheet, base stylesheet.

Typography

Substitute: none chosen. The logotype is an identity asset; its appearance does not prove a UI font family. Font declarations and base typography, CI logotype explanation.

Measured metrics remain useful independently of font availability: the reservation link is 16px / 400, with 20px line height; the program link is 12px / 400, with 22px line height and -1px tracking; the search input is 17px / 400. The records link declares 12px / 400, with 18px line height. The directions label is 18px / 400, while its enclosing anchor declares 12px / 400. The base CSS body rule declares 12px / 1.5. The navigation anchor's 18px / 700 declaration is not a measurement of the visible sprite lettering.

Layout

At 1440×1000, the page has a white header, a broad illustrated promotion area, and a service region overlapping its lower portion. The measured service strip contains six adjacent 200px columns, for an observed total width of 1200px. The records card shares that 200×208px resting footprint. Below it, six convenience links lead to practical hospital tasks, followed by paired notice and academic-event lists and a dark gray footer. A fixed bottom quick menu and a right-side utility rail remain visible in the capture.

This is the observed desktop composition, not a verified responsive grid specification. Use the measured component geometry when reproducing this surface.

Responsive Behavior

Only the 1440×1000 desktop viewport was measured; mobile geometry and responsive behavior were not verified.

Elevation & Depth

All six measured controls have resting box-shadow: none. Flat color panels, thin dividers, sprite illustrations and outlined states provide their separation. No elevation scale was verified.

Motion & Easing

All six control identities report the raw computed transition all 0s ease 0s. No nonzero CSS transition duration or custom easing curve was measured on these controls. The promotion carousel is visible, but its animation timing was not measured.

Components

Online reservation action — 예약신청. A link measuring 120×40px, square corners, padding 9px 0px 0px, #0b50a1 fill, white text and a 1px white border. Hover changes its text and border to #f9e03d; the containing service panel gains a 5px yellow border. Pressed and Tab focus retain those changes and add a 2px solid black outline, offset -2px. The outline is authored CSS, and all listed focus changes clear after blur.

Screening program action — 검진 프로그램 보기. A 139×22px link, 13px radius, zero padding, yellow fill and green text. Its own fill and text remain unchanged during the measured states. Hover gives the containing green panel a 5px yellow border and changes its background position. Press and keyboard focus add the same 2px solid black outline. The ancestor panel changes remain after blur during the keyboard walk, so the component's focus token contains only the reversible outline.

Main navigation — 진료예약. A 137×78px transparent link on white, radius 0px, padding 0px 32px 0px 33px. Hover changes the bottom border from transparent to 3px solid #3378c1, and the label sprite's background position from 0px 26px to 0px -44px. The sprite supplies the visible label; the anchor's blue text declaration is not its visible foreground. The component retains the clean hover observation. The focus-time underline and sprite change persist after blur, and the remaining outline is browser auto; no focus token is published.

Medical records card — 의무기록사본발급신청. The orange parent contains a transparent 200×208px link, radius 0px, padding 25px 0px 0px, with white text. On hover, pressed and Tab focus the parent gains a 5px #f9e03d border, the link becomes 190×198px, and its top padding becomes 19px. Its nested 온라인신청 action changes its text and 1px border from white to yellow. The parent background position changes from -15px 120px to -20px 115px; the heading sprite moves from 0px -395px to 0px -420px, and its box changes from 156×21px to 163×22px. The paragraph box narrows from 200×36px to 190×36px. These focus changes clear after blur. The link's own outline stays none.

Directions card — 오시는 길. A transparent 200×169px link on white, square corners and zero padding. Its visible label stays #444444 across the measured states. Hover has no computed change in the recorded scope. Press and Tab focus show a 2px solid black outline, offset -2px. The raw anchor color changes from #0000ee to #ff0000 on press, but the visible child label does not change; that anchor-only color is not a brand token.

Medical staff/department search — 의료진/진료과. The input itself is 403×43px, radius 0px, padding 12px 2px, without a border or shadow. Its fill is #ececf1 and ink #333333. Hover, pressed and Tab focus all showed no computed change across the input, its pseudos and three ancestor levels. It remains documented here and is omitted from the harvested component map under the requirement for a measured authored state. The curved outer wrapper is separate from the square input; home CSS declares the wrapper's 30px radius and 23px horizontal padding. These wrapper values were read from CSS, not from a computed geometry snapshot.

The black outlines are directly corroborated by the site's accessibility stylesheet. Its rule suppresses the outline on the service-card links themselves, matching the medical records observation.

States

All eighteen state observations were measured. “No computed change” is limited to the collector's self, pseudo, descendant and three-ancestor comparison scope; it is not a claim about every pixel or outside element. No disabled state was measured. The top reservation notice was closed through its 닫기 button before the state pass; no consent was accepted.

Do's and Don'ts

• Keep the six service colors tied to their observed tasks; use yellow for the measured panel emphasis.
• Preserve the distinction between a panel border and the link inside it. The medical records link's smaller active box follows the parent's 5px border.
• Retain black solid outlines where measured, while excluding the navigation's browser auto ring from brand tokens.
• Use the loaded regular UI family only within its verified scope. Keep undeclared glyph or font provenance unresolved.
• Keep the initial survey's missing images out of layout guidance; use the later states screenshot for the visual composition.

Voice & Tone

The homepage uses short task labels such as 예약신청, 온라인신청 and 의료진/진료과 검색, with explanatory sentences beneath them. Its online reservation panel explicitly says visitors can reserve without logging in. These are observed copy patterns; no separate editorial voice guide was verified.

Agent Prompt Guide

“Build the measured Samsung Medical Center desktop service strip with six adjacent 200px columns: online reservation blue, callback cyan, screening green, records orange, certificates purple and imaging upload navy. Use live-loaded regular NanumBarunGothic for the verified text roles. Set the main reservation link to 120×40px with square corners, white text and a 1px white border. Hover turns that text and border yellow and gives its containing panel a 5px yellow border. On the records card, apply the parent border and reduce the link box from 200×208px to 190×198px. Preserve the measured black focus outline on the reservation action.”

Use the color and typography tables and the component descriptions for exact values and ancestor/descendant relationships. This prompt describes the captured homepage, without extending it into unmeasured forms or application screens.

Governance

Known Gaps

• Contrast, program-link. Text #87b528 on #f9e03d measures 1.82:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.