Theme A · Prototype v2

黑曜 Obsidian

深色科技感：近黑底、髮絲線分隔、單一電光藍 accent，發光只用在主要 CTA 與選中狀態。字體 Inter + Noto Sans TC，數字與編號使用 JetBrains Mono。三套後台以 accent 色區分角色（前台藍、管理員紫、業者青）。

從前台首頁開始逛管理員後台業者後台 App

Design tokens

style.css :root

色彩階（中性 4 階＋主色＋語意色）

#0B0E13

#10141B

#151A23

#1B212C

#5B9CFF

#3DD68C

#F5B547

#F26D6D

字級 scale

30 標題20 區塊標題14 內文 · JetBrains Mono 041712 輔助 · 11 標籤

8pt 間距 · 圓角 6/8/12/16 · 陰影 3 階

元件狀態

hover / focus / active / disabled / error

成功警告錯誤資訊強調管理員業者已結案選中 chipchip

正常

helper text

錯誤 *

手機格式不正確

停用

開關 / 核取

已勾選未勾選

載入骨架

⌘K

建議瀏覽動線

依角色走一遍關鍵流程

消費者下單

home.html → product.html → checkout.html → checkout-done.html → account-order.html

1 2 3 4 5

平台處理訂單

admin-dashboard.html → admin-orders.html → admin-order.html（指派業者、抽成）

1 2 3

業者接單

vendor-dashboard.html → vendor-jobs.html（看不到抽成）→ vendor-qa.html

1 2 3

商品上架審核

vendor-product-edit.html（送審）→ admin-products.html（審核）→ product.html

1 2 3

前台（消費者網站）

18 頁 · 深色 Obsidian 主題，Inter + Noto Sans TC

首頁Hero、分類、熱門方案、認證業者

商城列表分類／價格／品牌篩選、排序、分頁

認證業者列表搜尋、地區、排序

業者商城頁頁首、介紹、作品集、商品、評價 tabs

商品詳情圖庫、規格、施工說明、評價、Q&A

下單表單驗證、helper、需求摘要

下單成功送交平台專員＋後續流程

車友社團動態牆、社團列表、發文 modal

貼文詳情留言、作者、關聯方案

車險試算車籍、被保險人、保障需求

試算結果6 家方案卡＋逐項比較表

登入／註冊分割版面、tab 切換、驗證

我的訂單狀態 tabs、空狀態

訂單詳情狀態時間軸、專員、金額

我的提問已回答／等待回覆

我的車庫車輛卡、提醒、新增 modal

業者入駐申請文件上傳、流程

搜尋結果商品／業者／貼文／車險 tabs，含空狀態

平台管理員後台

12 頁 · 紫色 accent，側欄＋頂欄，表格密而不亂

儀表板KPI、趨勢圖、待處理、載入骨架

訂單管理列表狀態 tabs、篩選列、排序、批次、分頁

訂單詳情指派業者、抽成計算、狀態更新、聯絡紀錄

消費者管理分群、批次推播

消費者詳情購買紀錄、提問、試算、日誌

業者管理入駐審核、抽成率設定

業者詳情訂單、商品、評價、文件、結算

系統設定權限矩陣、成員、通知、整合、稽核

業者後台

7 頁 · 青色 accent，看不到抽成與消費者應付金額

總覽排程表、待辦、評價、金額趨勢

我的商城頁編輯區塊開關、直接點字編輯、送審

商品管理列表審核狀態、批次、下拉選單

新增／編輯商品驗證錯誤、規格表、圖片、審核紀錄

Q&A 回覆逾時標示、回覆範本

平台派工單只看施工金額、接單／回報

帳號設定店家、營業、成員、安全、文件

Mobile App

1 頁 · iOS 與 Android 並排，可點擊

App 展示頁底部 tab 切換、商品→下單→訂單追蹤，兩平台外觀差異