CommonWealth Magazine DESIGN.md

Design System Inspiration of CommonWealth Magazine (天下雜誌)

Overview

Visual Theme & Atmosphere

CommonWealth is a Taiwanese news and economics publication founded in 1981. Its About page puts trust at the centre of its identity: “我們經營的是「信任」.” Paid digital reading launched in 2017, followed by an app combining magazine content and current news in 2018. The same page now publishes guidelines requiring human review of AI-assisted editorial work and disclosure of AI use. Company

The measured homepage is the Traditional Chinese root edition (www.cw.com.tw/), with no regional redirect. A red masthead, red editorial labels, dark story titles and blue subscription actions frame a dense photographic news page. The first story row gives a large lead image substantially more space than the compact stories beside it. These are live homepage observations, rather than a published brand specification.

An official article on the magazine’s 2015 redesign described simpler design and reorganised columns, with QR codes connecting print to additional multimedia. 2015 redesign

Brand Narrative

The homepage combines a large lead story, smaller related stories, category labels and summaries. Red marks editorial emphasis; blue subscription links sit alongside it. This is the measured visual expression of the publication, without attributing a visual strategy to the company that it has not stated.

Principles

For building from this reference: retain the distinction between headlines and paragraph ink, match each action to its own measured state treatment, and separate the editorial grid from third-party advertising. These are implementation conclusions from the capture, rather than an official design-principles list.

Personas

No user research or personas were verified.

Colors

These values come from rendered colours and measured controls. The homepage did not expose a first-party custom-property colour palette.

Overall text counts favour black, 153 elements, but the paragraph census favours #48545d. Preserve that distinction between navigation ink and reading ink. The pale action layer changes opacity; its alpha is not a second opaque surface colour.

Typography

Official product use: no first-party prose font specification was verified in the opened company or design-writing pages.

Live-loaded: the homepage’s document.fonts census lists Noto Sans TC, normal, variable weight 100 900, and Noto Serif TC, normal, 200 900. Noto Sans TC is declared on the body and buttons. Noto Serif TC is loaded, but this capture does not isolate its assignment to a particular headline. Both are runtime faces, not substitutes.

The census records same-origin sources /cf-fonts/v/noto-sans-tc/5.2.9/71/wght/normal.woff2 and /cf-fonts/v/noto-serif-tc/5.2.10/1/wght/normal.woff2. It also lists loaded cw-regular and cw_icon_new, each normal 400, served from /fonts/cw2023/ and /assets_new/fonts/cw/ respectively. Their presence does not establish them as paragraph families, so they are not offered as UI text specimens.

Official distributed assets: only runtime font URLs were recorded; no separate font distribution package or licence was verified.

Declared-only: cw-light and cw-medium each declare normal weight 400 and TTF/WOFF sources under /fonts/cw2023/; neither is in the loaded list. swiper-icons also has an unloaded inline font declaration and belongs to the carousel implementation. None receives a specimen.

Unresolved: headline-specific family, size and weight; font licensing and per-glyph fallback. Substitute: none chosen.

The anchor container’s metrics do not establish the headline’s metrics.

Layout

At 1440 × 1000, the first editorial row spans x=113 to x=1313: a 1200px content span composed of an 860px lead link, a 40px gap and a 300px story column. In a later row, the left column contains a 560px feature and a 260px secondary story, again separated by 40px. These are measured positions at this viewport, not breakpoint rules.

The scoped CSS declaration --column-gap: 1.125rem belongs to .layout; it is not proof that every visible gutter uses that value. Navigation padding is 16px. The header action uses 9.8px vertical and 14px horizontal padding; the bottom action uses 10px and 20px.

Responsive Behavior

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

Elevation & Depth

All five controls have computed box-shadow: none. Borders, text colour and pale pseudo-element layers provide their measured separation. The header is sticky at z-index 110; the promotion is sticky at 111 and the cookie notice fixed at 112. These are captured layer positions, not a complete elevation scale.

Motion & Easing

The header subscription and bookstore links each report the raw computed transition transform 0.3s ease 0s. Their own settled transform remained none. The bottom subscription, navigation and story anchor each report all 0s ease 0s. These strings do not establish the pseudo-elements’ individual timing. No easing curve or general motion scale is inferred.

---

Sources: live homepage, captured 2026-11-06 through probe_page; Company; 2015 magazine redesign; membership terms; privacy statement. Capture details, raw values, controls and limitations are in verification.md and report.md.

Components

All five controls were measured at rest, pointer hover, pointer press and real Tab focus. The cookie notice remained open; the controls’ pointer states matched :hover, and their crops confirm the intended elements. No overlay-hiding option was used.

• Header subscription link, “訂閱天下”. #cookie-subNav_paymen, 102 × 35.6px, 0px radius, 9.8px 14px padding, 14px/400 Noto Sans TC. White fill, blue text and a 1px blue border. Hover switches text and border to #9d0505, with the pale #feebec layer at opacity 0.04. Press raises that layer to 0.16. Keyboard focus uses opacity 0.12 and restores zero after blur, with no drawn outline.
• Bottom promotion subscription link, “訂閱天下”. 102.3 × 47px, 0px radius, 10px 20px padding, 18px/400 Noto Sans TC. White fill and blue text on a blue promotion strip. Hover and press make the text #d60c18 and draw a 1px solid outline of that colour, at 0px offset. This outline was not present under keyboard focus.
• “最新” navigation link. 118.9 × 48px, 16px padding, 0px radius, 16px/400 Noto Sans TC. Transparent on white, black at rest, red on hover and press.
• Story link, /article/5143594. 300 × 193px, 0px radius and padding, with a 1px bottom divider. The visible headline changes from #171717 to #d60c18 on hover and press; the category stays red and summary stays #48545d. Its transparent anchor has browser-default blue/red inherited colours, which are not brand tokens.
• “網路書店” header link. 48.5 × 14px, 0px padding and radius, 14px/400 Noto Sans TC. Transparent on white; blue text becomes red on hover and press.

No visible search input appeared among the survey’s 190 interactive rows. Input styles and states remain unmeasured.

States

“No compared visual change” is limited to the probe’s computed-style/DOM scope: the control and its pseudos, descendants and their pseudos, and three ancestor levels and their pseudos. Descendant counts were 1, 1, 0, 13 and 1 respectively; the card included two image elements. The comparison covered colours, backgrounds, borders, drawn outlines, shadows, opacity, transforms, filters, visibility, size, decoration, background/mask positioning and image/SVG attributes. It does not establish absence of pixel-only, sibling, closed-shadow or cross-origin changes. No disabled or error state was measured.

Do's and Don'ts

• Use the measured red for editorial labels and linked-title emphasis, and blue for resting subscription actions.
• Keep the measured controls square; use whitespace and fine dividers between stories.
• Preserve the grey paragraph foreground alongside darker headlines.
• Keep the header action’s darker red distinct from the editorial red.
• Reproduce the header’s focus layer only for that measured control; do not generalise it to every link.
• Keep unloaded faces, browser-default anchor colours and framework colours out of brand specimens and palettes.

Voice & Tone

The company’s reporting principles call for a mild, rational attitude and accessible writing without showing off technical terminology. These are stated editorial principles. Company

Agent Prompt Guide

“Build a Traditional Chinese editorial homepage with a white surface, a large lead photograph and a compact story column. At the measured desktop width, use an 860px lead, 40px gutter and 300px sidebar. Use Noto Sans TC for the measured navigation and action labels; keep story summaries #48545d, story titles #171717 and editorial labels #d60c18. Create the square 35.6px header subscription link with blue text and border, darker-red hover text and border, and its measured pale focus layer.”

Noto Serif TC is a verified loaded face, but no headline specimen is specified from an unmeasured role assignment. Substitute: none chosen.