Chang Gung Memorial Hospital DESIGN.md

Design System Inspiration of Chang Gung Memorial Hospital

Overview

Visual Theme & Atmosphere

Chang Gung Memorial Hospital is a Taiwanese hospital system founded in 1976. Its official introduction describes a nonprofit medical mission spanning service, teaching and research, with patients placed first. The public website brings that service role into its navigation: appointment registration, finding a doctor, choosing a specialty, symptom reference and a care guide appear together as immediate actions. Official introduction, live homepage.

The observed expression is warm orange on white: an orange bilingual medical-foundation mark, white medical line icons in an orange action strip, generous feature panels and outlined rounded links. A two-part brown footer gives the long service directory a darker base. These are observations of the live Traditional Chinese homepage at cgmh.org.tw/, not a published brand manual.

The institution's current evolution is documented in its October 2026 medical-week announcement, which marks its 50th anniversary and names artificial intelligence, smart medicine, precision medicine and whole-person care among its themes. That institutional direction is verified; a website rebrand or redesign date is not established. Official anniversary announcement.

Brand Narrative

The official history records the completion of the Taipei outpatient and emergency centre on 1 December 1976. The official introduction frames the institution around nonprofit care and service, teaching and research. Its 2026 medical-week programme carries that history into discussion of smart medicine, precision medicine and whole-person care. History, introduction, 2026 announcement.

Principles

The official introduction states 人本濟世，病患優先 (a human-centred approach with patients first), names service, teaching and research as its tasks, and describes a nonprofit purpose. These are institutional principles; the colour and component treatments above are observations of its website, rather than declared corporate design principles. Official introduction.

Personas

No researched personas were verified.

Colors

These reference role names describe measured surface values. The survey found no colour custom-property namespace: its sole computed custom property was the viewport helper --vh: 10px.

The foreground is also the bundled Bootstrap Reboot body colour. Its use on actual announcement text was measured; it is not presented as an authored CGMH custom property. The paragraph-ink census was empty, so this foreground role is grounded in the news link's div.text, not a fabricated <p> measurement. Homepage stylesheet.

Typography

Substitute: none chosen. The icon font is not a substitute for a text face. Fontello stylesheet.

Retain the verified metrics independently of the unresolved text family:

The appointment anchor itself computes to 0px/700 and zero line height; the visible child label supplies its readable type. All measured control identities report normal letter spacing.

Layout

At the measured 1440 × 1000 desktop viewport, the fixed header is 92px high. The first feature panel occupies a 1296px-wide surveyed wrapper starting at x=72, with alternating text and image columns visible in the capture. The news section presents three announcement columns, followed by a publication/media grid and a multi-column footer.

The two measured rounded text actions share 8px vertical and 20px horizontal padding. The appointment action uses 10px vertical and 20px horizontal padding. These are local component spacings, not evidence of a global spacing scale.

Several hero and article images failed to render and page loading timed out. The captured whitespace and compressed hero must not be treated as the intended image layout or as evidence for a photography style.

Responsive Behavior

Not measured: only the 1440 × 1000 desktop surface was probed.

Elevation & Depth

The five harvested control roots report box-shadow: none. No sitewide elevation scale was verified.

Motion & Easing

The computed root transitions are background 0.3s ease 0s on the learn-more and footer-sitemap links, color 0.3s ease 0s on the news-card link, and all 0s ease 0s on the appointment, navigation and search controls. These raw strings are retained in the verification Proof block.

The appointment's icon wrapper has a measured hover/pressed transform of matrix(0.9, 0, 0, 0.9, 0, 0). Its individual transition string was not recorded, so no duration is assigned to that child. No custom easing curve is asserted.

Components

The following five components have measured authored hover and pressed changes. They are links, represented as action buttons or a news card in the reference.

The measured header search icon is 28 × 27.2px, radius 0, padding 0, with a transparent background and orange foreground. Its pointer states are UNMEASURED and keyboard focus produced no compared style change, so it stays outside the component tokens. The search input exists in HTML but is initially hidden by a zero-width, zero-opacity stylesheet rule and was absent from the visible-control survey; no input component is published.

The two footer selects have a surveyed radius of 5px; no interactive select states were measured. None of the six measured control roots had a box shadow.

States

For the five links the raw focus outline was rgb(0, 95, 204) auto 1px off 1px; it cleared on blur. This is the browser's ring and creates no focus token. No disabled states were measured.

Do's and Don'ts

For a reconstruction based on this measured surface:

• Use the orange for action outlines, highlighted navigation, news text and location-badge interaction.
• Keep the different treatments: the appointment icon shrinks, the outlined action fills, the nav changes weight, and the footer lightens its brown fill.
• Retain the measured numeric type metrics while the text family remains unresolved.
• Preserve the observed browser keyboard ring in the implementation; do not publish it as a brand focus colour.
• Keep search pointer behavior unresolved until it is measured successfully.

Voice & Tone

The homepage uses short task labels such as 找醫師 (find a doctor) and 就醫指南 (care guide), alongside descriptive medical-feature titles and dated, location-labelled announcements. These are observed copy patterns, not an inferred brand-voice policy. Live homepage.

Agent Prompt Guide

Build a Traditional Chinese hospital information portal using a white canvas, orange #f68825 actions and a #443424 / #261c12 footer. Use a 130 × 45.2px outlined learn-more link with 30px corners, 8px 20px padding and 17px/700 text; on hover, fill it orange and turn its label white. Use a 20px/400 header link that becomes orange and 700 weight on hover. Leave the text-family choice unresolved; no substitute has been chosen.