一齊好物理治療所
預約諮詢

設計系統

一齊好物理治療所網站的色彩、字體、按鈕、圖示與共用元件一覽 — 供開發與套版對照使用

色彩 Colors

Teal · 品牌主色
teal-50
teal-100
teal-200
teal-300
teal-400
teal-500
teal-600
teal-700
teal-800
teal-900
teal-950
Orange · 行動呼籲色
orange-50
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
orange-900
Cream / Ink · 中性色
cream-50
cream-100
cream-200
cream-300
ink-400
ink-600
ink-900
alert-500
Semantic 用途
surface-page
page-warm
card-alt
sunken
footer
inverse

Logo

一齊好完整標記 logo-primary-full.png
一齊好完整標記(反色) logo-primary-full-reversed.png
一齊好中文標記 logo-primary-chinese.png
一齊好英文標記 logo-primary-english.png

完整標記(full)用於導規與頁尾;反色(reversed)版本專用於深色背景(如頁尾深藍緑底色)。中文、英文分开的標記供空間不夠時的簡化使用。完整向量檔見 assets/logo-source-vector.pdf。

字體 Typography

中文(標題/內文):Noto Sans TC — var(--font-zh) 英文/數字/標籤:Quicksand — var(--font-en)

text-6xl / 72打造全人健康
text-5xl / 56專業團隊
text-4xl / 44服務項目
text-3xl / 34準備好一起變好了嗎?
text-2xl / 28治療範圍
text-xl / 24陪你聽懂身體的治療師
text-lg / 20疼痛,是身體想與你對話的語言。
text-md / 18專業,是我們的基礎;陪伴,是我們的方式。
text-sm / 15用專業知識,陪你更了解自己的身體。
text-xs / 13OUR SERVICES · 治療服務

字重 Weights: Regular 400 · Medium 500 · Semibold 600 · Bold 700 · Black 900

圖示 Icons

menu
x
phone
message-circle
map-pin
clock
calendar
facebook
instagram
line
shield-check
heart-pulse
users
user
check
activity
stethoscope
chevron-down
chevron-up
arrow-up-right
arrow-right
plus
minus
send
sun
moon

用法:<span class="bt-icon icon-menu"></span>(class 對應圖示,定義在延後載入的 bticons.css;顏色隨 color 繼承、深色模式自動適配。需自訂尺寸時再加 style="width:18px;height:18px")

標籤 Badges / Pills / Chips

主任 脊椎神經壓迫 #一齊好的故事 全部 痠痛與姿勢

卡片 Cards

痠痛與姿勢文章卡片標題示範

摘要文字示範,說明卡片的排版結構。

2026-06-10

特色卡片標題

用於「為什麼選擇我們」等特色列點。

★★★★★

評論卡片示範文字,說明顧客回饋的排版樣式。

王小姐

間距 Spacing

4px 基準網格。用於 padding、margin、gap。

space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-5
20px
space-6
24px
space-8
32px
space-10
40px
space-12
48px
space-16
64px
space-20
80px
space-24
96px
space-32
128px

圓角與陰影 Radius / Shadow

radius-sm 10
radius-md 16
radius-lg 20
radius-xl 28
radius-full
shadow-xs
shadow-sm
shadow-md
shadow-lg

表單 Forms

分頁 Pagination

線上預約