Noon Coffee 字體選擇

01 — Typography System

字體分層系統

以下呈現兩組字體方案供比對。第一組以 Playfair Display + Inter 為核心，適合編輯性、襯線風格的品牌調性；第二組以 Questrial + Noto Sans TC 為核心，對應品牌既有規範，區分美術性展示與功能性閱讀兩個層級。

第一組｜ Playfair Display × Inter

標題字體 — 編輯襯線 Heading

Playfair Display 有襯線

One Bean, Three Truths.

The same origin. Three different stories.

適用：品牌故事標題、段落引言、編輯性場景、情感性標題
建議字級：24–48px ／ font-weight: 400 ／支援 italic

內文字體 — 英文無襯線 Body

Inter 英文內文

Hidden in a Da'an alley, Noon lets the same bean speak in three voices — espresso, pour-over, and signature drink. The same origin. Three different stories.

適用：品牌故事英文段落、編輯性英文內文、About 頁面
建議字級：14–16px ／ font-weight: 300–400 ／ line-height: 1.75–1.85

第二組｜ Questrial × Noto Sans TC

主字體 — 美術性展示 Display

Questrial（Century Gothic 平替）美術性

noon coffee

One Bean, Three Voices.

適用：主視覺標題、Banner 大字、品牌形象區塊、裝飾性排版
建議字級：28–72px ／ letter-spacing: 0.06–0.14em

副標字體 — 功能性文字 Functional

Noto Sans TC（思源黑體）功能性

同一支咖啡豆，以三種萃取方式呈現——從純粹、到易飲、到創意，體驗風味的完整光譜。

Hidden in a Da'an alley, Noon lets the same bean speak in three voices — espresso, pour-over, and signature drink.

適用：商品描述、內文段落、FAQ、購物須知、頁尾資訊、按鈕、導覽列
功能性場景中英文統一使用 Noto Sans TC，不另搭英文字型

兩組字體的定位差異：

第一組 Playfair Display × Inter — 襯線標題搭配無襯線英文內文，適合品牌故事、編輯性頁面等需要文學質感的場景。

第二組 Questrial × Noto Sans TC — 對應品牌既有設計規範，以用途（美術性 vs. 功能性）為分層邏輯，中英文統一處理。

核心原則：無論選用哪一組，層級區分皆以「用途」為準，非以「語言」為準。同一層級內不混搭不同組的字體。

02 — Color System

色彩系統

主色調黑色為品牌主要識別色，佔視覺比重最大。副色調作為輔助與點綴，不可喧賓奪主。
頁面整體維持黑白為主、副色調節制點綴的視覺比例。

Black 主色調

White

Deep Teal 輔助

Light Blue

Gold 點綴

Burgundy 點綴

主色調 Primary

#000000

品牌主要識別色
佔視覺比重最大

輔助色 Secondary

#00303C

Hover、Footer 底色
次要資訊區塊

淺藍 Accent

#B8D8EB

按鈕 Hover 狀態
裝飾性背景

金色 Accent

#F5B335

極小面積點綴
標籤、Icon

酒紅 Accent

#83332E

極小面積點綴
警示、活動標示

建議使用場景

Black — 主要背景、標題文字、按鈕填充、Header

Deep Teal — Footer 底色、Hover、次要資訊區塊

Light Blue — 按鈕 Hover 狀態、裝飾性背景色塊

Gold — Eyebrow 標籤、小型 Icon、重點提示

Burgundy — 警示按鈕、限定標籤、活動頁標示

使用禁忌

× 副色調不可大面積使用，避免破壞沉靜調性

× Gold 與 Burgundy 不可同時出現於同一區塊

× 避免高彩度撞色，頁面維持黑白為主

× Light Blue 不可用於文字色，僅限背景 / Hover

× 按鈕主色統一黑白，副色調按鈕限特殊場景

03 — Button System

按鈕樣式一覽

所有按鈕皆可 hover 查看互動狀態。主要按鈕以黑白為主，副色調按鈕限用於特定功能場景。

Primary Black → hover Light Blue 立即選購

Ghost Outline → hover Black fill 品牌故事

Disabled 不可操作狀態已售完

Primary Inverse White → hover Light Blue Shop Now

Ghost Dark Outline → hover White fill Our Story

Teal Deep Teal → hover Black 了解更多

Danger / Alert Burgundy → hover Gold 確認取消

Gold Accent Gold → hover Black 限定活動

Primary on Teal White → hover Light Blue 訂閱電子報

Button Combo Reference

名稱	背景色	文字色	Hover 背景	Hover 文字	預覽
Primary	#000000	#FFFFFF	#B8D8EB	#000000	Button
Primary Inverse	#FFFFFF	#000000	#B8D8EB	#000000	Button
Ghost	transparent	#000000	#000000	#FFFFFF	Button
Ghost Dark	transparent	#FFFFFF	#FFFFFF	#000000	Button
Teal	#00303C	#FFFFFF	#000000	#FFFFFF	Button
Danger	#83332E	#FFFFFF	#F5B335	#000000	Button
Gold Accent	#F5B335	#000000	#000000	#F5B335	Button

04 — Alerts, Notices & Tags

提示與標籤元件

副色調在小面積元件上發揮點綴功能，維持品牌調性的同時傳遞不同層級的資訊。

ℹ

資訊提示 Info — 線上商店與實體咖啡廳為獨立運作，客服分開處理，敬請留意。

✓

成功 Success — 您的訂單已成功送出，確認信已寄至您的信箱。

⚠

注意 Warning — 本商品為限量供應，售完即止，恕不另行通知。

✕

警示 Danger — 付款失敗，請確認您的信用卡資訊後重新操作。

免運優惠：單筆消費滿 NT$1,500 即享全台免運。

立即選購

Tags & Badges

新品上架門市限定限量已售完咖啡豆全品項