HK01 DESIGN.md

Design System Inspiration of HK01

Overview

Visual Theme & Atmosphere

HK01 (香港01) combines news with consumer internet services in Hong Kong. Its company introduction describes a “媒体+” platform spanning more than 60 news and lifestyle channels, personalised information and services that connect online and offline life. The introduction opens with a zero-to-one motif: “由零到一，从无到有”. Company introduction

The live homepage gives that breadth a concrete form: a blue brand mark, a long category navigation, a large photographic lead story, a stack of smaller stories, service shortcuts and successive news sections. White content areas meet a cool pale field; photographs supply much of the colour, while a saturated blue marks the selected tab and interactive links. This is a dense editorial composition with compact utility controls and largely square text links. These visual descriptions are observations of the captured homepage.

In its September 2026 tenth-anniversary article, HK01 describes expanding across food, entertainment, health and technology, using data and AI, and connecting online and offline events. It calls the result a full “媒體 +” information platform and closes with “不止於此！”. This is documented platform evolution; the opened sources do not establish a recent visual rebrand. Anniversary article

Brand Narrative

HK01's own account connects advocacy journalism with a wider role in everyday life. The company introduction links constructive public participation, news, personalised services and community activities. Its 2026 anniversary statement adds data, AI and a broader “媒體 +” platform. The homepage's combination of news categories and service shortcuts makes that breadth visible. Company introduction, anniversary article

Principles

The company introduction names collaboration and inclusion, innovative thinking, technology thinking, and empowerment/autonomy as its “01基因”. These are stated corporate-culture ideas; the sources do not present them as interface-design rules. Company introduction

Personas

No persona research was verified.

Colors

The homepage exposes a light/dark palette and a second set of RGB-channel variables. The primary interaction blue is #0033e8: both --color-light-p4 and --color-blue-500 resolve to it, and it is measured on the selected “最Hit” tab and hovered navigation/headline links.

Navigation and search rest at rgba(0, 0, 0, 0.78); the section link rests at rgba(0, 0, 0, 0.85). The share button uses rgba(47, 48, 48, 0.04) on hover and rgba(47, 48, 48, 0.08) while pressed. Preserve those alpha values rather than converting them to opaque neutral swatches.

The homepage census contains no <p> ink sample. A body-text foreground token is therefore absent. Dark palette declarations are recorded in the research report; a switched dark theme was not measured.

Typography

Official product use: no product-font statement was verified in the opened first-party sources.

Live-loaded: the survey's document.fonts loaded-face list is empty. No family is exported and no font specimen is supplied.

Official distributed assets: no font asset or font licence was opened or verified.

Declared-only: controls name PingFang HK. The button stack is "PingFang HK", PingFang-HK, PingFangHK, "PingFang TC", Custom-MS-JhengHei, -apple-system, "system-ui", system-ui, sans-serif. The two Custom-MS-JhengHei face rules use local Microsoft JhengHei names, for weights 100 400 and 500 900; neither appears in the loaded list. The body element has a separate generic UI stack. These are CSS declarations, not proof of the face that rendered each script.

Unresolved: the actual rendered Latin and Han faces. Substitute: none chosen.

The measured metrics remain useful independently of that gap: navigation is 16px/400 with 32px line height; tabs are 16px/400 with 24px line height; the sampled article headline is 18px/500 with computed line height normal. The lead-story headline in the survey is 22px/700 and smaller lead-story titles are 14px/700, both with normal line height.

Layout

At 1440×1000, the top composition combines a 691×388.7px lead-story image link, 227×127.7px smaller image links and a 300px service/promotion rail. Below it are promotion tiles and a tabbed news section.

The first news row has three 400×225px image links at x=97, 513 and 929. Their measured horizontal gaps are 16px: 513 − (97 + 400). Headline text begins 8px inside the image's left edge in the sampled card. The tab's explicit 10px 24px padding is a separate measured spacing example, not a complete spacing scale.

Root declarations also provide --navbar-height-desktop: 4.25rem, --navbar-height-mobile: 2.75rem, --secondary-navbar-height: 42px and --submenu-height-desktop: 8.125rem.

Responsive Behavior

Only the 1440×1000 desktop viewport was measured; mobile-height CSS declarations do not establish mobile layout behaviour.

Elevation & Depth

The six sampled controls have box-shadow: none at rest. Lead-story captions sit over shaded photographs in the viewport capture; no gradient-stop or elevation scale is specified from that observation.

Motion & Easing

The raw transition string for navigation, search and the section link is all 0.2s ease-in-out 0s. The headline reports color, background-color, border-color, box-shadow, -webkit-box-shadow 0.2s ease-in-out 0s. The selected tab and the corrected share button report all 0s ease 0s. These strings are copied in the verification Proof block; no additional curve, carousel timing or reduced-motion behaviour is specified.

---

First-party sources: Live homepage (survey and two state passes, 2026-11-10); company introduction (narrative only; Simplified Chinese edition); 2026 anniversary article; website terms and its public content endpoint; 01 Space terms (registered address); contact page. The legal entity is “香港01有限公司”; the registered-address wording and source chain are retained in verification.md.

Components

All dimensions describe the matched element itself. Transparent backgrounds sit on measured white ancestors.

The selected “最Hit” tab is 85.3×46px, radius 0, padding 10px 24px, with blue text and a 2px blue bottom border. Its measured hover, press and keyboard-focus styles are unchanged. The 125.3×24px “更多「最Hit」” link has no measured hover/press change and receives only the browser's default focus ring. These two controls remain descriptive examples rather than harvested interactive components.

States

Navigation, search and the sampled headline turn blue on both hover and press. The share button changes background opacity from zero to 0.04 on hover and 0.08 while pressed, with no measured foreground change. Hover was counted only with :hover matching; the pressed samples also matched :active.

Keyboard focus on navigation, search, the section link, the headline and share button adds only an outline-style: auto browser ring. No brand focus token is exported. The selected tab has no computed-style change under keyboard focus. The “no change” observations cover each control and its pseudo-elements, zero or two descendants as applicable, and three ancestor levels with pseudo-elements; they do not prove absence of pixel-only or out-of-scope changes.

Do's and Don'ts

For a composition based on this measured homepage:

• Use the measured blue for active selection and link feedback, alongside white and cool neutral surfaces.
• Keep navigation and headline links square; use the measured 4px radius on the compact share control.
• Give the share button distinct 4% hover and 8% pressed fills.
• Preserve the photographed story hierarchy, category labels and compact service shortcuts.
• Keep typography metrics while leaving the family unresolved; no substitute has been selected.
• Keep OneSignal prompt colours and Toastify/Swiper defaults outside the product palette.

Voice & Tone

The introduction's zero-to-one phrase and the anniversary close “不止於此！” give two concrete examples of aspirational company copy. The captured homepage uses short functional labels such as “港聞”, “最Hit” and “查看更多”. This is a reading of those examples, not a verified editorial style guide.

Agent Prompt Guide

“Build an HK01-inspired desktop news composition using a photographic lead story, a stack of smaller stories, service shortcuts and a three-column news row with measured 16px gaps. Use #0033e8 for selected tabs and link hover, white behind controls, square headline links and 18px/500 card headlines. Font family unresolved; substitute: none chosen.”

“Create a 28×28px share icon button with 4px radius and 4px padding. Its foreground is #2f3030; its rest background is transparent on white. Hover applies rgba(47, 48, 48, 0.04) and press applies rgba(47, 48, 48, 0.08).”