cacao 可口

台灣的藝文生活誌 cacao 可口的網站。最上面一條螢光黃綠（#E7F437）的細長條，放「關於可口、與可口聯絡」和右邊的「Taipei 日期 氣溫」；下面是白底的頁首：左邊細線的「cacao」字樣和一個黑色圓點，右邊「INFO ●」，再下面一排小字的分類（可口藝術、可口美、可口份子、可口永續）和社群圖示，一條黑色細線收尾。

首頁像雜誌的目錄：第一屏是一張滿版寬的大照片輪播，左下壓著白色的日期、分類和標題；往下每一段是一個分類（可口最新 LATEST、可口藝術 ARTS、可口美 AESTHETICS、可口份子 CACAOISTS），左邊一個黑色的小圖示加中英文段落名，右邊「VIEW MORE」，下面兩欄或四欄的文章：照片、日期、細框的膠囊分類標籤、標題。

整體是黑白的編輯感：白底、黑字、照片當主角，只用一條螢光黃綠點綴；字是 Noto Sans TC 配 Roboto Condensed 的窄體英文，標籤是細黑框的膠囊。

• Canvas（#FFFFFF）：頁面的白底。

• Text／Primary（#000000）：字、分隔線、小圖示、訂閱按鈕都是純黑；按鈕滑鼠移上去變 #333333。

• Accent（#E7F437）：螢光黃綠，只用在最上面那一條細長條。

• Surface（#F6F6F6）：頁尾旁邊「訂閱可口電子週報」的淺灰框。

• Text muted（#666666）、Neutral（#7F8C8D、#808080、#CCCCCC）：次要文字、輸入框的細框和提示字。

• Overlay（#00000080）：照片上半透明的黑，讓白字讀得清楚。

中文用 Noto Sans TC，英文的段落名和文章標題用 Roboto Condensed（窄體），導覽、日期、標籤用 Inter。

• 第一屏輪播的標題 25px／500，白字壓在照片上。

• 文章標題 24px／500（Roboto Condensed 接 Noto Sans TC），兩、三行。

• 段落名「可口藝術 ARTS」19px／500、字距 1.9px，大寫。

• 內文 18px、行高 27px，字距稍微收緊（-0.36px）。

• 分類導覽 14px、字距 1.4px；日期和標籤 11px、字距 1.1px、大寫。

• 內容寬度約 1268px 置中。

• 頁首三層：螢光黃綠的細條、標誌列、分類導覽，最下面一條黑色細線。

• 每個分類一段：段落名在左、「VIEW MORE」（底線）在右；文章兩欄（大圖）或四欄（小圖），照片在上，下面日期、分類標籤、標題。

• 段落之間有時插一張滿版寬的大照片。

• 頁尾：「可口熱門 POPULAR」、ABOUT、SEARCH（只有底線的搜尋框）三欄，右邊一個淺灰的訂閱框，上面一條黑色細線。

• 進站一段時間會跳出「訂閱可口電子週報」的視窗（白底，黑色的訂閱按鈕）。

Responsive

• 375px 寬時，頁首只剩「cacao」字樣和右邊「MENU ●」；文章改成一欄，照片在上、標題在下。

幾乎沒有陰影，層次靠照片、黑色細線和留白。只有跳出來的訂閱視窗外圍有一圈很淡的陰影（0 0 15px，6% 黑）。

• 分類標籤是細黑框的膠囊。

• 按鈕和輸入框是 4px 的小圓角；照片是直角。

• 分隔線都是 1px 的黑色細線。

• 分類標籤：透明底、1px 黑框的膠囊，11px／500 的大寫字、字距 1.1px，高 20px，上 4px、左右 6px、下 3px 內距。

• 文章卡片：直角照片在上，下面 11px 的日期和分類標籤一行，再下面 24px／500 的標題；標題的文字下面用背景畫了一條 1px 的線，給滑鼠移上去的效果用。

• 訂閱按鈕：黑底白字 14px／700，4px 圓角，高 41px，滿寬。

• 輸入框：白底、1px #CCCCCC 細框、4px 圓角，高 43px。

• 搜尋框：沒有框，只有下面一條 1px 黑線，19px 的大寫字。

• 最上面的細長條：#E7F437 螢光黃綠底、黑字 14px。

• 要用白底黑字，讓照片當主角；螢光黃綠只用在一條細長條，不要擴大面積。

• 英文段落名和標題用窄體的 Roboto Condensed，日期和標籤用小字加字距。

• 分類標籤用細框的膠囊，不要實心的彩色標籤。

• 用 1px 的黑色細線分隔，不要加陰影和色塊。

• 文章要照雜誌的方式排：大圖、日期、標籤、標題，留白要足。