百信建材 PAISHIN

進口西班牙、義大利磁磚和石材的百信建材（PAISHIN）的網站。整站是全黑的底：左上紅白的 PAISHIN 標誌，右上放大鏡、LINE 和三條線的選單，沒有其他導覽。第一屏是三張黑底的空間照片（一顆發光的球體燈、紙做的鬱金香）拼成的格狀版面，左上兩行白色的小字介紹，中文一行、英文一行。

往下一段一段：左邊明體的「關於我們 About us」、右邊幾段小字；磁磚和石材紋理的黑白照片錯落排成好幾排；空間案例的照片輪播；「百信 LAB」那段用磁磚形狀（星形、六角形、十字）的色塊漂浮在黑底上，中間一行跑動的小字；一支手機示範「打造我的家」；最後是三欄的專欄文章。右下角一直有直排的「BACK TO TOP」和一條細線。

整體像精品的形錄：黑底、白字、灰階的材質照片，標題用明體、字距拉得非常開，按鈕只是一行字加一條底線。

• Canvas（#000000）：整站的黑底。

• Text／Primary（#FFFFFF）：所有的字、底線、圖示都是白色。

• Brand（#D61518）：標誌裡的紅色，是整站唯一的彩色，量測沒有收進色票（從截圖取的）。

• Text muted（#989898）：麵包屑這類次要的灰字。

• 照片多半是灰階或很暗的色調，LAB 那段的磁磚色塊是深咖啡、灰褐。

標題和大部分的字用 Noto Serif TC（明體），英文段落名用 Didot，「LAB」用 Afacad，少量的內文用 Noto Sans TC。

• 段落標題「關於我們」20px／700、字距 14.4px，字和字之間空得很開；下面一行 20px 的 Didot 英文「About us」、字距 3px。

• 文章、案例的標題 16px／600、行高 30px、字距 4.8px。

• 「了解更多」12px／600、字距 8.4px，下面一條細線。

• 小字說明 12px、字距 2.8px；內文 16px、行高 30px。

• 內容寬度約 1240px（左右各 100px），黑底沒有分段的底色，段落之間留很大的空白。

• 頁首只有標誌和三個圖示，固定在最上面。

• 段落標題放在左邊，內容在右邊或下面；照片錯落排成格狀，不對齊成整齊的格子。

• 案例是一張大照片置中的輪播，左右露出前後兩張的一角，下面置中寫設計公司和案名。

• 專欄文章三欄，每一則上面一行日期接一條橫線。

• 右下角固定直排的「BACK TO TOP」和箭頭。

Responsive

• 375px 寬時，第一屏改成一欄的照片和文字；頁首照樣只有標誌和三個圖示。

沒有陰影。層次靠黑底上的照片、照片的明暗和錯落的位置；LAB 那段的磁磚色塊有遠近的大小差別。

• 照片是 10px 的圓角。

• 沒有按鈕的框；連結就是文字加一條 1px 的底線。

• 磁磚形狀（星形、六角形、十字、三角形）只當裝飾。

• 了解更多：白色 12px／600 的明體、字距 8.4px，下面 10px 內距接一條 1px 的白色細線，沒有底色和框。

• 照片卡片：10px 圓角的空間或材質照片，下面置中的標題（16px 明體、字距 4.8px）和一行小字。

• 專欄文章：日期一行接一條橫線，下面兩、三行明體標題和一行小字摘要。

• BACK TO TOP：右下角固定，直排的 12px 小字和一條往上的細線箭頭。

• 要用全黑的底和白字，彩色只留給標誌的紅。

• 標題用明體、字距拉得很開；英文用 Didot 這類高對比的襯線字。

• 照片用灰階或很暗的材質、空間照片，錯落排放。

• 連結做成文字加細底線，不要做成色塊按鈕。

• 不要加陰影、漸層或亮色的裝飾。