霹靂布袋戲 PILI

台灣布袋戲霹靂（PILI）的官網。頁首是一條 100px 高的黑色長條：左邊白色的「PILI」書法字標誌，右邊「線上購物、霹靂線上看、與我們合作、會員、選單」，每一項前面一個小圖示。第一屏是一大塊飽和的藍（#0462B6），上面是被切成扇形、像墨漬一樣的戲偶影片，再往下是「新意 玩轉」這種白色粗大的書法字配黑色潑墨。

往下是深灰黑（#1D1D1D）的長頁面：會員招募的大圖輪播，下面一條青綠和灰的進度條；「PILI'S ICONIC CHARACTERS 當家台柱」三張直式的大圖，紫色潑墨、黑白戲偶照、紫底書法字輪流；「IDEOLOGY 思想流派」四欄白色的符號（儒、道、釋、邪魔），欄與欄用細線分開；「VIDEO 熱門影片」的影片卡片；最後一塊紫黑的「PILI」大字和頁尾。

整體是黑色當底、用一兩個很亮的顏色（青綠、紫、藍、橘）重點打亮，配書法字、潑墨和戲偶照片，介面本身是直角、扁平的。

• Canvas（#1D1D1D）：主要的深灰黑底；頁首、卡片、按鈕是更黑的 #000000。

• Text（#FFFFFF）：字和圖示都是白色。

• Cyan（#03FFE2）：螢光青綠。「會員招募」「Follow Us」這種標籤和重點字、選到的角色名稱、輪播的進度條。

• Purple（#8728CD）、Purple light（#D077FF）：當家台柱、最下面「PILI」大字那塊的紫。

• Blue（#0462B6）：第一屏的大塊藍。

• Orange（#FFA10A、#FFB331）、Red（#E62F2E）、Teal（#00A494）：消息的分類（購物是橘）和各個專區的點綴色。

• Surface（#383838）：輪播進度條沒走到的部分。

• Text muted（#ADADAD）：頁尾的公司名稱、版權。

介面全部用 Helvetica（中文接系統的黑體），字重幾乎都是 400；戲名、口號那種大字是圖片（書法字）。

• 會員招募那種大標 48.75px／400。

• 段落標題「PILI'S ICONIC CHARACTERS」26.25px／400 的大寫英文，後面接一行小的中文「當家台柱」。

• 角色名稱 22.5px；選到的那個是青綠色。

• 頁首導覽 16.875px；內文 15px、行高 22.5px。

• 「SCROLL」「Back to top」這種小字 13～15px。

• 內容幾乎滿版，左右只留約 30px。

• 頁首固定在最上面，黑色、100px 高。

• 每一段：大寫的英文段落名在左上、中文小字跟在後面；內容是滿寬的大圖、三欄直式大圖，或四欄等寬的欄位。

• 思想流派是四欄，欄與欄之間一條細線，每欄上面一個中文字、下面一個白色的符號。

• 影片是橫排的卡片，右上角兩顆黑底的直角箭頭按鈕。

• 頁尾：上面三欄連結和兩個大圖示，最下面一條黑色的版權列。

Responsive

• 375px 寬時，頁首只剩選單和標誌；第一屏改成直式，「轉 新 意」的書法字放大、配一個戲偶的半身照；右下角一個往下的箭頭。

沒有陰影。層次靠黑底上的高彩度色塊、潑墨和戲偶照片；照片上有時疊一層半透明的黑（#00000080）讓字讀得清楚。

• 全部是直角：按鈕、卡片、欄位都沒有圓角。

• 書法字、潑墨的不規則邊緣，和第一屏被切成扇形的影片，是唯一的曲線。

• 細線：思想流派的欄位、輪播的進度條。

• 頁首：#000000 黑底，100px 高，白字 16.875px，每一項前面一個白色的小圖示，右邊「選單」加三條線。

• 箭頭按鈕：黑底的直角方塊，55×57，白色箭頭，一左一右並排。

• 更多快訊：黑底的直角方塊，200×144，白字 15px，在消息列的最右邊。

• 影片卡片：黑底直角，523×368，上面影片的縮圖，下面一行白字片名。

• 思想流派的欄：四欄等寬、欄與欄之間一條細線，中文字和白色符號置中。

• 輪播進度條：一條滿寬的細條，走過的是青綠色、還沒走的是 #383838。

• 要用黑和深灰黑當底，一次只用一兩個很亮的顏色（青綠、紫、藍）打亮重點。

• 標題、戲名用書法字和潑墨的圖片，介面的字用 Helvetica、字重 400。

• 介面要直角、扁平，不要圓角和陰影。

• 大寫英文段落名配一行小的中文，是固定的寫法。

• 不要把高彩度的顏色大面積同時用好幾種；一段只用一種。