Quantum Cuisine

背景與挑戰

Quantum 是一間「沒有母星」的量子精緻餐廳，座落在萬物之靜默邊際。網站的任務不是解釋餐點，而是營造冷靜、精密、超現實的奢華氛圍，再把這份相信轉化為訂位與購買。

挑戰在於它有兩種讀者：品牌訪客為氛圍而來，需要編輯式排版的 landing page 慢慢鋪陳世界觀；訂購者已被打動，要在 /order 買料理套件、酒與周邊，要求行動優先、流程順手。兩個介面個性迥異，卻必須說同一種語言——這正是設計系統要解的題。繁中與英文並置則是品牌姿態，不是附加功能。

設計決策

成果與反思

成品是一個 React + TypeScript + SCSS 專案：編輯式品牌 landing page，加上從商店到 4 步結帳的完整訂餐動線，內建 light / dark 雙主題與雙語並置，並以 WCAG 2.1 AA 為目標處理對比與 prefers-reduced-motion 替代方案。

回頭看，最大的收穫是「先寫世界觀，再訂規則」：有了北極星與明確的反面清單，元件層級的取捨都變快了——想加陰影時，先問是不是該換一條髮絲線。一間沒有照片可拍的虛構餐廳，反而逼出第二個收穫：用自製的點陣引擎讓品牌長出專屬插畫，視覺於是和 tokens、元件一樣，是設計系統的一部分，而不是外包來的裝飾。