風格陳列館

而家正式網站用緊嘅設計 · The design currently powering the live site

設計語言 · Design language

淺紫調輕玻璃卡片、圓角構件、漸變 CTA 橫帶。資訊密度適中，動效克制，係最穩陣嘅「公司標準」骨架：hero 大標 + 編號宗旨卡 + 相片牆 + 查詢帶，讀者慣性已經建立。

Light purple-tinted glass cards, rounded components, gradient CTA bands. Balanced density, restrained motion - the dependable house standard: bold hero, numbered purpose cards, photo walls, enquiry bands.

幾時揀佢 · Pick this when

唔知揀乜就揀佢：零學習成本、同現有物料最夾、維護最簡單。想「穩中求好」就係佢。

The safe default: zero learning curve, best fit with existing materials, simplest maintenance.

適合類型 · Fit

通用 - 尤其熟悉現有網站嘅客

最佳示範 · Best for

HKBIU 本身 / Care Link Business / Modern Beauty HK

明體報頭、粗幼線、出版物節奏 · Serif masthead, hairline rules, print rhythm

設計語言 · Design language

明體大字報頭、雙線分隔、引言拉頁、前頁清單式內容。排版有「讀文章」嘅節奏感，內文行距寬，長文都讀得舒服。

Serif masthead, double rules, pull quotes, front-page list layouts. A reading-first rhythm; generous line-height keeps long-form copy comfortable.

幾時揀佢 · Pick this when

品牌有故事要講、內容係主打 - 呢個款令文字成為主角。文化機構、學院、出版類首選。

When story and copy lead, this makes text the hero. First pick for cultural institutions, academies, publishers.

適合類型 · Fit

內容為本 / 文化 / 教育 / 出版

最佳示範 · Best for

College HK / SSI / AI Training（內容頁多）

柔和圓角、大相、呼吸感 · Soft rounded cards, generous photos, calm spacing

設計語言 · Design language

6rem 呼吸感留白、圓角柔卡、大幅人像相。色彩低調，等相片同文字自己發光，訪客一入場就放鬆。

Six-rem breathing whitespace, soft rounded cards, large portraits. Quiet colour lets photos and words speak; visitors relax the moment they land.

幾時揀佢 · Pick this when

客人要覺得「嚟到會被呵返」，唔係被推銷。美容、spa、健康護理類嘅天然歸宿。

Guests should feel cared for, not sold to. The natural home for beauty, spa and health services.

適合類型 · Fit

美容 / spa / 健康 / 護理

最佳示範 · Best for

MULAN Spa HK / 療程頁 / 護理品牌

深藍架構、資訊為本、企業級信任 · Structured banner, information-first, enterprise trust

設計語言 · Design language

深色 banner hero、統計式公告卡、直角資訊卡、清晰 section 分區。一切以「組織可信度」為先：架構、名銜、數字全部有清晰位置。

Dark banner hero, stat-style notice cards, squared info cards, crisp section structure. Everything serves organisational credibility.

幾時揀佢 · Pick this when

要畀商會、銀行、政府部門望落「正規、企理」嘅品牌。B2B 洽談、商會、企業集團。

For brands that must read established to banks, chambers and government. B2B, chambers, corporate groups.

適合類型 · Fit

企業 / 商會 / B2B / 集團

最佳示範 · Best for

BNI / Care Link Business / Veribel（企業面向）

明體大字、金色幼線、極致留白 · Serif display, gold hairlines, generous whitespace

設計語言 · Design language

金色髮線框住大面積留白，明體大字慢節奏。每個元素好似博物館展品咁被安放，貴氣由「少」而嚟，唔係由「多」。

Gold hairline frames around generous whitespace, slow serif display. Elements rest like museum pieces - luxury comes from less, not more.

幾時揀佢 · Pick this when

要賣「貴」嘅品牌：高價療程、訂製服務、精品零售。價位感即刻提升一級。

Brands that sell expensive: premium treatments, bespoke services, luxury retail. Perceived price tier rises immediately.

適合類型 · Fit

高端 / 訂製 / 精品

最佳示範 · Best for

高價療程品牌 / Miss Modern Beauty 頁 / 訂製服務

網格系統、無襯線、紅色功能色 · Modular grid, sans type, red utility accent

設計語言 · Design language

國際主義排版：嚴格網格、黑髮線結構、單一紅色只做功能性強調。零裝飾，資訊傳達效率極高。

International Typographic Style: strict modular grid, black hairlines, a single red used only functionally. Zero decoration, maximum efficiency.

幾時揀佢 · Pick this when

想畀識設計嘅人一睇就知「有品味」，同時資訊超清晰。設計/顧問類、年輕專業品牌。

For design-literate visitors to nod, with razor clarity. Design, consulting, young professional brands.

適合類型 · Fit

設計 / 顧問 / 專業服務

最佳示範 · Best for

AI Training / 顧問類 / 年輕專業品牌

墨黑大字、展籤框、羅馬數字 · Ink display type, placard frames, roman numerals

設計語言 · Design language

全站明體標題、展籤式框、羅馬數字章、墨黑放映室帶。內容被「策展」：每一段好似展品，安靜、有份量。

Serif headings site-wide, placard frames, roman-numeral labels, an ink screening-room band. Content is curated like exhibits - quiet, weighty.

幾時揀佢 · Pick this when

品牌有「作品」要展示：攝影、藝術、工藝、成就。想人慢慢睇、記得住。

Brands with works to show: photography, art, craft, achievements. For slow looking and remembering.

適合類型 · Fit

藝術 / 攝影 / 作品展示

最佳示範 · Best for

頒獎回顧 / Vanité 賽事 / 作品型內容

模組卡片格、大細不一、清晰掃描 · Modular tiles, varied sizes, scannable

設計語言 · Design language

Apple 帶起嘅便當盒格：唔對稱 tile 陣，大細不一但秩序井然。每格一個重點，掃一眼攞到全部資訊。

The Apple-popularised bento: asymmetric tile arrays, varied sizes in strict order. One point per tile - scan once, get everything.

幾時揀佢 · Pick this when

資訊種類多（服務+收費+活動+影片）想一次過俾人掃晒。SaaS、產品線多嘅品牌。

Many information types (services + fees + events + video) scanned in one pass. SaaS, multi-product brands.

適合類型 · Fit

SaaS / 產品 / 多資訊主頁

最佳示範 · Best for

AI 服務線 / 多服務品牌主頁

產品卡陣、價目牌、信任徽章 · Product cards, price tags, trust points

設計語言 · Design language

零售轉化 DNA：價目卡、產品卡陣、分類導覽、橙色促銷 CTA。版面一切為「令訪客落單」而設。

Retail-conversion DNA: price tags, product card arrays, category rail, orange promo CTA. Engineered for the order.

幾時揀佢 · Pick this when

有實價、要賣嘢嘅品牌。價錢直接講，轉化率優先。

Brands with real prices to publish. Prices stated upfront; conversion first.

適合類型 · Fit

零售 / 電商 / 有價目服務

最佳示範 · Best for

Be shop / 花店 SG / 有定價療程表

聯絡卡先行、菜單式清單、親切貼地 · Contact card first, menu-style list, friendly

設計語言 · Design language

大相 hero + 歡迎卡，聯絡資料直接放首屏，服務用菜單式清單。好似街坊舖頭張咭片，親切、直接。

Photo hero with welcome card, contact details above the fold, menu-style service list. A neighbourhood shop card: warm, direct, no frills.

幾時揀佢 · Pick this when

客人係街坊、生意靠 walk-in 同電話。要畀人一入場就知道「點搵你、幾點開」。

When customers are neighbours and business comes from walk-ins. Just how to find you and when.

適合類型 · Fit

地區商戶 / 餐飲 / 店面服務

最佳示範 · Best for

GIG cafe / 街舖 / 地區診所

信任藍、功能卡、報名 CTA · Trust blue, feature cards, enrol CTA

設計語言 · Design language

信任藍 hero + 功能卡陣 + 社會證明 + 報名 funnel。全世界 SaaS 驗證咗幾十年嘅銷售節奏，課程/服務一樣啱用。

Trust-blue hero, feature array, social proof, enrolment funnel. The decades-proven SaaS rhythm - right for courses and services alike.

幾時揀佢 · Pick this when

有「課程/計劃」要招生或銷售。訪客由認識到報名一條路帶到尾。

Brands selling courses or programmes. One guided path from discovery to enrolment.

適合類型 · Fit

教育 / 課程 / 服務銷售

最佳示範 · Best for

College HK / SSI / AI Training（招生頁）

暗黑舞台、金色聚光、大相氣勢 · Dark stage, gold spotlight, image drama

設計語言 · Design language

全站暗黑舞台底、金色聚光燈 CTA、全幅大相 hero。showcase 首個 dark 變體：一入場就有頒獎禮紅毯氣勢。

A dark stage site-wide, gold spotlight CTAs, full-bleed hero. The first dark variant: awards-red-carpet drama on arrival.

幾時揀佢 · Pick this when

要「氣勢」嘅活動：頒獎禮、選美、盛事、年度大典。手機睇同樣震撼。

Events that need drama: awards, pageants, galas. Equally striking on mobile.

適合類型 · Fit

盛事 / 頒獎 / 演出

最佳示範 · Best for

Miss Modern Beauty / Modern Voice / Top100 頒獎禮

金融級藍白、數據卡、透明收費 · Finance-grade blue-white, data cards, transparent pricing

設計語言 · Design language

金融級藍白結構：數據卡、透明收費表、安全感細節。V4 賣「組織形象」，V13 賣「精確可信」。

Finance-grade blue-white structure: data cards, transparent pricing tables, security cues. V4 sells organisational image; V13 sells precision.

幾時揀佢 · Pick this when

醫療、金融、專業顧問：訪客要「信得過先會交個身體/金錢畀你」。

Medical, financial, advisory: visitors must trust before they hand over body or money.

適合類型 · Fit

醫療 / 專業顧問 / 認證

最佳示範 · Best for

Veribel Medical / 認證查詢 / 專業顧問

粗邊框、巨型標題、工作格陣 · Bold borders, oversized type, work grid

設計語言 · Design language

Neo-brutalist 作品集語彙：2px 粗框、巨型 uppercase 標題、作品格陣、單色 CTA。有個性、有態度。

Neo-brutalist portfolio vocabulary: 2px borders, oversized uppercase display, work-grid array, mono CTA. Personality with attitude.

幾時揀佢 · Pick this when

個人品牌、創作人、想突圍而出嘅獨立工作室。要人記住你個名。

Personal brands, creators, indie studios that want to stand out. Bold by choice.

適合類型 · Fit

個人品牌 / 創作人 / 工作室

最佳示範 · Best for

Care Lee (personal) / 個人導師 / 獨立工作室

自然綠、花草粉、有機圓潤 · Natural green, floral pink, organic forms

設計語言 · Design language

自然綠系統 + 花草粉點綴、2rem 大圓角、有機形狀。好似行入一間有花嘅舖頭：溫暖、有生命力。

Natural green with floral-pink accents, two-rem rounding, organic shapes. Like walking into a shop with flowers: warm, alive.

幾時揀佢 · Pick this when

花藝、天然產品、有機品牌、想傳達「溫柔對待地球/身體」。

Florists, natural products, organic brands - gentle to earth and body.

適合類型 · Fit

花藝 / 天然 / 有機

最佳示範 · Best for

Flower shop SG / 天然護膚 / 有機品牌