Design System

母托邦設計系統

生育教育與孕產支持品牌的視覺語言與元件庫。溫潤的鼠尾草綠、陶土與米白,搭配圓潤的源泉圓體,傳遞專業而柔和的陪伴感。

Foundations

色彩 Colors

Sage · 鼠尾草綠(主色)

Clay · 陶土

Cream · 米白

Blush · 暖粉

語意色 Semantic

表面與文字 Surface & Text(隨主題變化)

Foundations

字體 Typography

字型家族 Font families

--font-display
源泉圓體 · 標題顯示
--font-body
源泉圓體 · 內文閱讀
--font-latin
PilatesForYou · Quicksand
--font-mono
Order #MTB-20260626 · Space Mono

字級 Type scale

display · 56 / bold
成就母親
h1 · 40 / bold
與孕產家庭同行
h2 · 30 / bold
課程與陪伴方式
h3 · 23 / bold
產後核心修復
title · 19 / semibold
金額摘要
body · 16
陪伴每一位母親,從孕期到產後,找回身體的連結與力量。
small · 14
六堂課程 · 小班制 · 大安館
caption · 12.5
有效期限:2026.12.31
overline · 12 / 0.22em
Featured Course
Foundations

間距 Spacing

Foundations

圓角 Radius

Foundations

陰影 Elevation

Components

按鈕 Buttons

變體 Variants

尺寸 Sizes

含圖示 / 滿版 With icon & full

Components

標籤 Tags

變體 Variants

線上課程 熱門 產後修復 大安館 六堂

小尺寸 Small

骨盆底 小班制 線上
Components

徽章 Badges

3 新 VIP 已上 2 / 6 堂 已完成 待付款 已過期
Components

頭像 Avatars

尺寸 Sizes

白 白白 白

影像 Image

96×96 64
Components

表單 Form fields

輸入框 Input

我們不會公開您的電子郵件。
手機號碼格式不正確。

下拉 Select & 文字區 Textarea

勾選 / 開關 Checkbox & Switch

單選卡片 Radio card

驗證碼 Code inputs

Components

卡片 Cards

表面變體 Surface variants

預設卡片

白底加柔和陰影,最常用的容器。

外框卡片

無陰影,改用細邊框分隔。

米白卡片

溫潤背景,適合次要區塊。

鼠尾草卡片

主色襯底,用於強調。

深色卡片

深綠背景,反白文字。

1,200+
陪伴過的母親
Components

區塊元件 Patterns

課程卡 Course card

課程封面640×400
01
產後六堂

產後核心修復

重建深層核心與骨盆底,循序漸進找回身體力量。

NT$ 3,600了解更多
課程封面640×400
02
熱門線上

生育教育工作坊

從孕期到生產,建立知識與信心,與伴侶一同準備。

NT$ 1,800了解更多
課程封面640×400
03
進階

骨盆底喚醒練習

針對產後常見困擾,溫和而有效的專注練習。

NT$ 2,400了解更多

分頁 Tabs(可點擊)

六堂循序漸進的課程,從呼吸與身體連結開始,逐步重建核心力量。

由具備周產期專業認證的物理治療師與皮拉提斯教練共同授課。

產後多久可以開始?剖腹產適合嗎?這裡解答你最關心的問題。

常見問題 FAQ(可展開)

產後多久可以開始上課?
一般建議產後 6 週、經醫師評估後即可開始;剖腹產則視傷口復原狀況而定。
線上課程可以重複觀看嗎?
可以,購買後於有效期限內不限次數觀看,方便依自己的節奏練習。

見證 Testimonial

「課程讓我重新認識自己的身體,產後的不適慢慢改善,也更有自信。」

林
林小姐
產後 4 個月 · 台北

麵包屑 Breadcrumb

圖片佔位 Placeholder

產品形象16:10
96×96
影片縮圖