聯合新聞網 DESIGN.md

Overview

Visual Theme & Atmosphere

聯合新聞網 (udn) is United Daily News Group’s public platform for immediate news and diverse editorial content. The group says udn launched in 1999, connected its original reporting operation, and brought 24-hour news to a digital audience. Its public news pages distinguish themselves through dense but scannable sections, short navigation links, and an editorial rhythm made from an off-white canvas, black text, restrained gray, compact blue controls, and occasional orange section emphasis. The supplied evidence is deliberately bounded to a home page and two category pages, not an undisclosed all-product design system. The group’s documented move from paper-first to digital-first, plus its 2020 subscription-economy initiative, explains a continuing shift toward content and reader services; it does not establish unobserved app, personalized, or paid-reading interface patterns. 聯合報系 · 新聞媒體

Key Characteristics:

• #fafafa public-page canvas with #000000 foreground text
• Loaded Noto Sans TC across the three captured public news surfaces
• #2f76aa measured on compact blue category controls; #ee5103 on a home tab treatment
• Flat, 0–3px-radius public controls with no measured elevation
• Editorial/news-page evidence only; product, corporate, mobile-app, and subscription-flow claims stay separate

Primary tasks

• Read the latest reporting from the udn news index.
• Move from the news index into a category page.
• Load more stories at the end of a category list.
• Enter an email address to subscribe to the newsletter.

Brand Narrative

聯合報 was founded in 1951; the group says 聯合新聞網 launched in 1999 and connected the group’s original editorial content to 24-hour digital news. The organisation frames its mission as making Taiwan better and describes its journalism as present wherever audiences read: paper, computer, phone, and tablet. 聯合報系 · 新聞媒體

Its current evolution is explicitly digital rather than merely a visual refresh. The group documents a shift from paper-first to digital-first, and says it began a subscription economy in 2020 to offer more precise, deeper, advertising-free reading experiences. Its mobile product describes always-on news, depth, diversity, social connection, and personal channel ordering. These first-party claims explain the platform’s service direction; they do not supply unobserved UI tokens or reader-data flows. 新聞媒體 · udn News mobile product

Principles

1. Serve the public through accountable journalism. The group states a mission to make Taiwan better and values integrity, justice, quality, and innovation. UI implication: make source, section, and reading context easy to identify; do not use visual urgency to overstate a claim.
2. Meet readers across media and moments. The group describes news delivery across paper, computers, phones, and tablets. UI implication: treat the captured desktop news page as one source domain, not a substitute for unknown mobile behavior.
3. Make depth discoverable. The journalism page describes digital storytelling through graphics, animation, video, data, maps, and podcasts. UI implication: preserve clear editorial hierarchy before adding media treatments; do not infer a generic card system.
4. Evolve around reader service. The documented digital transformation includes subscriptions, user operation, and more precise services. UI implication: distinguish public navigation from unobserved personalization and payment decisions.

Personas

Public-source audience cues, not research personas: readers seeking 24-hour updates, people looking for deeper explanatory or multimedia reporting, and readers who want to save or order preferred channels are all described by the official mobile-product material. udn News mobile product

The public category pages also indicate an audience navigating broad news sections. No demographic, behavioral, or subscription persona is invented because the supplied evidence does not establish one.

Colors

• Canvas — #fafafa: home body background in the supplied packet.
• Foreground — #000000: repeated public text and border value on all three captured routes.
• Muted — #777777: repeated secondary public text/border value on all three routes.
• Primary — #2f76aa: measured background of compact blue public category controls; it is not asserted as a universal brand or CTA value.
• Action muted — #c7c7c7: measured load-more button fill on the two category pages.
• Accent — #ee5103: measured home tab-link text value; it is not promoted to a general alert or status color.

No raw packet value establishes semantic success, warning, error, subscription, paywall, or authenticated-account colors. Corporate identity prose is kept separate from these public-surface CSS values.

Typography

Evidence classes

The live Noto Sans TC family may be used only where it can load; a system fallback must not be labeled Noto Sans TC. No broader editorial type scale is inferred from aggregates.

Layout

The supplied evidence is a 1440×900 desktop capture of a long, multi-module public news page and two category pages. Measured spacing clusters include 2, 5, 8, and 10px; those values are preserved as observed compact-control/layout rhythm, not a universal page grid. Category controls use 6px 40px or compact 5–10px padding, while the page body has no measured mobile or paywall layout rule. Responsive breakpoints, reading-column width, sticky behavior, and authenticated layouts are absent.

Responsive Behavior

Only the 1440×900 collector viewport is supplied. No breakpoint, mobile grid, touch target, safe-area, content truncation, or responsive navigation transition is observed. The official mobile-product page is narrative/product context, not raw responsive CSS evidence for these tokens.

Elevation & Depth

The promoted body, button, and input samples all report box-shadow: none. No selector-backed card, sheet, dialog, floating panel, or elevation scale is available in the packet, so depth tokens beyond none are omitted.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.none: none

Motion & Easing

No transition duration, easing curve, reduced-motion behavior, animation, or state transition was captured. Motion tokens are intentionally absent.

Components

Category-page load-more control

Observed default

• Background: #c7c7c7
• Text: #ffffff
• Radius: 0px 0px 3px 3px
• Padding: 6px 40px
• Height: 31px
• Font: 15px / 400 / 18.75px / Noto Sans TC
• Use: Real button at surface-2::[data-omd-capture="90"], class btn-more--news, repeated on the finance category surface.

Newsletter email input

Observed default

• Background: #ffffff
• Text: #000000
• Radius: 3px 0px 0px 3px
• Padding: 8px 10px
• Height: 31px
• Font: 13px / 400 / 14.95px / Noto Sans TC
• Use: Email input at home::[data-omd-capture="331"], also present on the two category surfaces.

The packet contains three form-error interaction captures. Their targets preserve the measured input geometry above and do not expose a distinct error color, border, or other style value. No hover, focus, pressed, disabled, selected, or success state is specified. Observed anchors and rows remain raw evidence rather than being recast as buttons.

Verified: 2026-07-13 Tier 1 sources: https://udn.com/news/index; https://udn.com/news/cate/2/6638; https://udn.com/news/cate/2/6649; https://www.udngroup.com/; https://www.udngroup.com/journalism; https://mobile.udn.com/re/udnnews.shtml; https://notofonts.github.io/noto-docs/website/use/ Tier 2 sources: https://getdesign.md/udn (attempted; no usable record returned); https://styles.refero.design/?q=udn (attempted; no usable record returned) Conflicts unresolved: none

States

The raw artifact records three form-error interactions across the public routes. Their captured input targets retain the observed default geometry and expose no distinct error color, border, text, message, loading, success, disabled, skeleton, toast, or empty-state value. Those unobserved state specifications are absent rather than synthesized.

Live state probe, 2026-10-16 (https://udn.com/news/cate/2/6638), load-more-button: focus — no visible change (measured 2026-10-16).

Do's and Don'ts

Do

• Use Noto Sans TC only when the verified webfont can be loaded.
• Keep the blue category control, muted load-more fill, and orange tab treatment in their observed public-news contexts.
• Preserve the low-radius, no-shadow geometry where the matching selector-backed public component is appropriate.
• Distinguish news-page evidence from corporate history, mobile-app messaging, and unknown subscriber flows.

Don't

• Do not treat #2f76aa as a universal udn brand, subscription, or confirmation color.
• Do not turn a captured anchor or editorial row into a button component without button semantics.
• Do not invent a red error treatment from the presence of a form-error interaction.
• Do not substitute Helvetica or a system stack and call it Noto Sans TC.

Voice & Tone

The group’s official language is public-interest oriented: its mission is to make Taiwan better, and its listed values are integrity, justice, quality, and innovation. The official mobile product positions udn News as fast, broad, deep, and personalized. Together these support a precise, reader-serving public voice rather than promotional superlatives. Group mission and values · udn News mobile product

Voice examples below are grounded paraphrases, not a specification for unseen editorial or notification copy:

• “Latest coverage, organized by the topic you need now.”
• “Read the context before forming a view.”
• “Save this channel to return to reporting that matters to you.”

Agent Prompt Guide

For a public Taiwanese news-index or category-page concept, use an off-white canvas, black editorial text, Noto Sans TC only when available, restrained 0–3px corners, and no elevation. Use the measured blue, muted-gray, and orange values only for their documented public-news roles. Do not generate a subscriber dashboard, personal-feed flow, article paywall, mobile-app navigation, toast, dialog, or semantic state library from this reference.

Governance

Known Gaps

• Contrast, load-more-button. Text #ffffff on #c7c7c7 measures 1.69:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.