China Times (中時新聞網) DESIGN.md

Design System Inspiration of China Times (中時新聞網)

Overview

Visual Theme & Atmosphere

China Times (中時新聞網) is a news website that dates its founding to 1995. Its About page describes a service covering domestic and international current affairs, with reports drawn from 中國時報, 工商時報, 旺報, 時報周刊 and 中視. The service terms identify its operator as 時報資訊股份有限公司, within 旺旺中時媒體集團.

The homepage has the density of a news desk: a red boxed masthead beside grey Chinese lettering, a long horizontal category bar, a large photographic lead story, ranked headlines and a separate live-news column. Black text, pale grey navigation and square controls give the page its structure. The measured interaction accent is the deep red #bc0614; the lead-story text uses pale yellow #ffee77 over photography. These are live surface observations, not a published identity manual.

The current surface also gives membership a visible place: “會員精選” appears in navigation and article titles, “無廣告體驗” is an outlined header link, and “立即訂閱” is a filled action in a subscription panel. This supports a reference that includes both headline discovery and subscription promotion; it does not establish a date for a rebrand. The measured homepage is the Traditional Chinese edition at www.chinatimes.com/?chdtv, with HTML language zh-Hant.

Brand Narrative

The group introduction traces the wider media organisation to the 1950 founding of 徵信新聞 and describes its expansion across print, television and the internet. The news website's own About page dates it separately to 1995. On today's measured homepage, that breadth appears as category navigation, a photographic lead story, live video and member articles; the subscription promotion adds an explicit offer of an ad-free experience. The capture supports this present arrangement, without supplying a dated visual-rebrand story.

Principles

For a build based on these observations: make categories easy to scan, keep headline text prominent, use red to signal interaction, and preserve the distinct treatments for reading links and subscription actions. These are implementation guidance derived from the measured homepage, not claimed corporate design principles.

Personas

No persona research was verified.

Colors

The census read 28 computed root properties. Their names and values follow a Bootstrap-style set; only the site-specific --primary and --blue value, #bc0614, is retained as an interface accent, corroborated by product controls. The other palette roles below come from rendered elements, not an invented custom-property scale.

The input's focus shadow is rgba(0, 123, 255, 0.25). Preserve it as a measurement of this control; the capture does not establish a site-wide blue brand palette. Likewise, the browser's automatic blue outlines are not brand colour tokens. Advertising and Protico chat colours are excluded.

Typography

Official product use: no opened first-party page names an official product typeface. Live-loaded: the font census lists Noto Serif TC 200 900 normal and FontAwesome normal normal. FontAwesome is an icon face and is excluded from text-family roles. A Google Fonts stylesheet URL names Noto Serif TC and Noto Color Emoji, but the stylesheet walk could not read it; no font-file source was recovered. Noto Color Emoji was not listed as loaded. No control-to-Noto-Serif role is established.

Official distributed assets: no font package or licence was verified. Declared-only: the body and button stacks are "New Microsoft JhengHei", "Microsoft JhengHei", sans-serif; the h1 stack is "Microsoft YaHei", sans-serif. The survey also names New Microsoft YaHei on hero links and Verdana on metadata links. These names do not establish which installed face rendered the glyphs. They receive no specimen and no machine-readable family role. Unresolved: the actual text face per script, font-file delivery for FontAwesome, and product font licensing. Substitute: none chosen.

Measured typography survives that uncertainty: hero links are 45px/700 with 51.75px line-height; “即時” is 19.2px/400 with 28.8px line-height, changing to weight 700 on hover/press; the member-card title is 19px/400 with 24.7px line-height. The primary action and input are 20px/400 with 30px line-height; the header subscription link is 15px/400 with 22.5px line-height; the topic shortcut is 16px/400 with 16px line-height. The six controls report normal letter spacing. A global paragraph size was not measured.

Layout

At the captured 1440×1000 desktop viewport, the survey places the top advertising iframe at x=93px, width 1240px. Below it, the lead-story image link is 610×407px; the live-news/advertising column starts at x=1033px and is 300px wide. The later article grid uses paired image-and-title arrangements: its first thumbnail is approximately 140.7×93.8px, with the measured title starting at x=249px. These are one-viewport dimensions, not responsive grid tokens.

Use the measured component padding locally: 8px 16px for the large action/input, 7px 10px for topic shortcuts, and 5px 8px 6px for navigation. No global spacing scale was verified.

Responsive Behavior

Only desktop at 1440×1000 was measured; no mobile layout or breakpoint behaviour was verified.

Elevation & Depth

All six controls have box-shadow: none at rest. Hovering or pressing “即時” adds rgba(0, 0, 0, 0.3) 0px 1px 5px 0px. The subscription action's focus/pressed shadow is rgb(255, 102, 0) 0px 0px 0px 3.2px; the input's is rgba(0, 123, 255, 0.25) 0px 0px 0px 3.2px. The orange ring is a CSS shadow, not an outline.

Motion & Easing

The subscription action reports 0.15s ease-in-out transitions on colour, background colour, border colour and box shadow. The input reports 0.15s ease-in-out transitions on border colour and box shadow. The secondary, navigation, article-title and topic links report all 0s ease 0s. These are per-control computed values; no page-wide animation system or carousel timing was verified. The raw strings are preserved in verification.md.

---

First-party sources: live homepage, captured by probe on 2026-11-03; About; service terms; group introduction. Company and legal text was opened directly through the web reader; the homepage's curl transport remained blocked. Measurements and source limitations are documented in verification.md and report.md.

Components

The following are the measured elements, including links styled as actions. Heights belong to the selected element, not its entire surrounding panel.

The header link's visible “無廣告體驗” label is CSS ::before content; its DOM text was empty. The card measurement covers its title link, not its image or container. No disabled, error, success or selected-state variant was measured.

States

Every selected control was reached by a real Tab walk; hover matched :hover, and pressed samples matched :active. Focus changed only the browser's auto outline on the secondary, navigation, article-title and topic links, so those four components have no brand focus token. The primary subscription action and search input have CSS focus changes, with empty persistsAfterBlur arrays. The input's hover was measured unchanged across the control, its pseudo-elements and three ancestor levels; this is not a claim about the whole page. Pressing the input also focuses it, so its pressed observation does not isolate an active-only rule.

Do's and Don'ts

• Use square corners for the measured main action, input, navigation and topic/card links; retain the header subscription link's measured 5px radius.
• Reproduce the navigation's full hover treatment, including its top edge, weight change and shadow.
• Give subscription, article-title and topic links their different measured hover treatments.
• Keep declared font names labelled as evidence; choose no replacement face from this reference.
• Exclude ad creative, embedded chat styling and unused framework palette defaults from the product palette.

Voice & Tone

The sampled interface uses short Traditional Chinese task labels: “即時”, “會員精選”, “立即訂閱” and “請輸入關鍵字”. The About page describes its news mission through “秉持新聞專業”. No broader editorial voice guide was verified.

Agent Prompt Guide

“Build a dense Traditional Chinese news homepage using a white canvas, black foreground, pale grey category bar and #bc0614 interaction red. Use the measured square 48px subscription action with white 20px/400 text, and the 28.5px header subscription link with 5px corners. Make the navigation hover white with red text, a 3px red top border, weight 700 and its measured shadow. Keep text-family selection unresolved; the reference provides no substitute.”