Cellar & Paper
← 回到網站 Back to site

Design System · v1.0

Cellar & Paper設計系統 Design System

Cellar & Paper 酒窖與紙張的設計系統：深酒紅外框、奶油色紙張、細長襯線大標題，搭配極小的大寫標籤與圓角膠囊按鈕。所有顏色和字型都寫在 assets/tokens.css，改一個地方，整個網站一起變。Oxblood frame, cream paper, condensed serif display, tiny tracked labels, pill buttons.

Colour 色彩

三層結構：最外面是酒紅外框（Frame），內容放在奶油紙張（Paper）上，重點區塊用波爾多紅卡片（Hero）。強調色只用玫瑰紅，不要再加其他亮色。

Oxblood 外框--frame · #4A0E13
Claret 主視覺--hero · #842B30
Rose 強調--accent · #A8343E
Cream 紙張--paper · #F5EFE4
Linen 次層--paper-2 · #ECE3D2
Sand 暖面板--paper-warm · #E2CDA4
Ink 文字--ink · #261718
Gold 標註--gold · #8E6B1F

葡萄分類色 Grape categories

國際黑 Intl Black--cat-ib · Claret
地方黑 Regional Black--cat-rb · Brick
國際白 Intl White--cat-iw · Vine
地方白 Regional White--cat-rw · Straw

Typography 字體

英文大標用 Instrument Serif（細長、優雅，斜體做重點）；中文標題用 Noto Serif TC；內文與標籤用 Inter 和 Noto Sans TC。標籤一律全大寫，字距拉寬。

Hero · 84px
Instrument SerifPinot Noir
H1 · 54px
Instrument SerifHeritage Harvest
中文標題 · 42px
Noto Serif TC 500系統性品飲法
Card title · 30pxCabernet Sauvignon
Body · 14.5px
Inter / Noto Sans TC晚熟品種，氣候不夠溫暖或年份不佳易有生青草本味（pyrazine）。Late-ripening — under-ripeness brings herbaceous, green pepper notes.
Label · 10.5px
tracking .16emExplore our collections · 探索

Space & Shape 間距與形狀

以 4px 為基礎。紙張圓角 6px、卡片 10px、按鈕和標籤全部是膠囊形（999px）。陰影很淡，只在滑過或展開時出現。

4
8
12
16
24
32
48
72

Components 元件

以下全部是網站上真正在用的元件，直接沿用同一份 CSS。

Buttons 按鈕

Create your own Shop all categories
Add to notes在酒紅卡片上用淺色外框按鈕

Chips & search 篩選與搜尋

Cards 卡片

國際黑葡萄品種 International Black
Pinot Noir+
法國布根地（金丘 Côte d'Or 為聖地）· France, Burgundy
國際白葡萄品種 International White
Sauvignon Blanc+
法國羅亞爾河谷 Sancerre · 紐西蘭 Marlborough
地方白葡萄品種 Regional White
Assyrtiko+
希臘 Santorini，高酸、礦物感 · Greece, Santorini

Note block 筆記區塊

生長環境Growing environment
  • 氣候溫和海洋性氣候，開花結果期易受降雨影響
  • 左岸礫石土壤排水佳、吸熱
Climate & Geography6 分 marks

Q1. Tuscany 托斯卡尼氣候分區Tuscany: Climatic Zones

顯示答案 Show answer
Tip · 答題提示先寫地形，再寫調節因素。

Principles 使用原則

One accent

✓ 一個畫面只用一個玫瑰紅重點。
✕ 不要再加藍、綠等亮色按鈕。

Big & tiny

✓ 大標題很大、標籤很小，中間少用中等字級。
✕ 不要用粗體英文大標。

Italic for emphasis

✓ 英文標題的重點字用斜體，例如 The Grape Atlas。
✕ 中文不要用斜體。

Paper first

✓ 長篇閱讀內容放奶油紙上。
✕ 酒紅底只用於主視覺，不放長文。