北斗電商

Design System · 便當格

色票 60-30-10
#1F2937
#EEF1F5
#1F2937
#2563EB
主色 · 背景 · 文字 · 強調
字型
標題 Noto Sans TC
內文 Noto Sans TC · 字級 72 / 40 / 22 / 14 · 行距 1.6
底稿風格
便當格
沒有底稿圖層,靠白色圓角格子;封面是深底大格+三格數字;章節頁深底
元件
Lucide icon 粗細 2 · 卡片圓角 24px · 頁碼右下 14px
場景
數據報告、年度回顧、產品總覽
留白適中(頁邊 72px)· 字級不縮,裝不下就拆頁
頁型
封面章節頁三欄重點左文右圖長文頁一頁一數字章節頁步驟流程封底
01
北斗電商

BEIDOU COMMERCE

北斗電商
2025 年度回顧

數字自己會說話。

34%年營收成長
12 萬新增會員
1.8 天平均到貨
02
北斗電商
01

成績

03
北斗電商

三件事

營收

年增 34%,四季都成長。

會員

新增 12 萬,回購率 41%。

物流

平均 1.8 天到貨。

04
北斗電商

最有效的一件事

把結帳從五步縮到兩步。

放棄率從 62% 降到 38%。

這一項貢獻了年增的一半。

照片佔位:搜尋 warehouse conveyor / dashboard on screen
05
北斗電商

內文多的時候

這一頁是假字,用來示範內文很多的時候版面長什麼樣。字級還是 22,行距照大腦的設定,段落一段接一段往下排,不因為字多就把字縮小,也不把留白吃掉。

假字假字,這裡通常會放一段背景說明:為什麼要做這件事、之前試過什麼、現在卡在哪裡。寫的時候一段只講一個重點,讀的人才跟得上,講的人也不會念到一半迷路。

內文到這個量大概就是一頁的上限。再多就拆成兩頁,或改用三欄重點、步驟流程把重點並列;不要縮字硬塞,也不要把行距壓扁,那樣看起來就不像同一份簡報了。

最後一段留給補充:數字要有出處、名詞前後一致、日期用絕對值。這些寫在大腦的禁區裡,AI 排版時會照做,你交件前只要對一次就好。

06
北斗電商
34%

年營收成長,連續第三年雙位數。

示意數字,換成你的。

07
北斗電商
02

明年

08
北斗電商

三步開始

01
會員分級

Q1 上線,分三級。

02
自有物流

Q2 覆蓋北北基。

03
第二品類

Q3 開賣。

09
北斗電商

明年,再多一格。

ir@beidou.example(示意,換成你的)

10