SEE/SAW

日本美髮品牌 Lebel 旗下的沙龍用髮品系列 SEE/SAW 的網站（日文）。頁首是白底一列，下面一條黑色細線：左邊一排很小的大寫導覽（HOME、GALLERY、ABOUT、LINE UP、STORY），正中間一條斜斜的細線壓著「SEE SAW」的襯線字樣，右邊「SPECIAL、NEWS」和一顆細框的膠囊「FOR SALON →」。第一屏是一張又一張的時尚人像照片，大小不一地錯開排列，右邊一整排小小的黑白照片縮圖跟著捲動。

往下：「(ABOUT)」這種用括號包起來的襯線大寫段落名在左，中間明體的大字「心を奪う、髪になる。」和小字說明，右邊一張大人像照；「(FEATURE)」整段淡灰紫底，左邊大張的視覺故事、右邊一欄一欄的文章；「(LINE UP)」的產品照；一行跑動的「(GALLERY / MOVIE→)」大字疊在黑白照片上；深灰的「(FOR SALON)」；最後淡灰紫的頁尾放「(SALON SEARCH)」和正中間的「SEE SAW」。右下角一直浮著一顆黑底白字的「SALON SEARCH ↗」。

整體像時尚雜誌：白底、黑字，照片用柔和、有光暈的時尚人像，中文、日文標題用明體，英文段落名用 Libre Baskerville 加括號，按鈕很小、是黑色或細框的膠囊。

• Canvas（#FFFFFF）：主要的白底。

• Text／Primary（#000000）、Heading（#111111）：字、細線、主要按鈕和浮著的「SALON SEARCH」都是黑。

• Surface（#E6E6EB）：「(FEATURE)」和頁尾那兩大段的淡灰紫底。

• Surface dark（#292929）：「(FOR SALON)」那塊深灰。

• Photo gray（#AAAAAD）：照片還沒載入時、和黑白照片區的灰。

• 半透明的黑（#11111180、#1111114D、#111111B3、#1111111A）：日期、分類這種淡化的字（50%），文章之間 10% 的分隔線和卡片框。

日文和中文的標題、內文用明體（TsukuMin，Adobe Fonts 的築地明朝），英文段落名用 Libre Baskerville（Google Fonts），導覽、按鈕、日期用 Helvetica Neue（日文接 FP-Koburina Gothic）。

• 照片上的大字（SEASONAL STORY 2026AW）44px／700 的明體，白色。

• 段落的標語「心を奪う、髪になる。」32px／400 明體、行高 49.6px，兩行。

• 段落名「(ABOUT)」「(FEATURE)」20～24px／500 的 Libre Baskerville，用括號包起來、大寫。

• 說明 15px、行高 27.75px；內文 13～14px、字重 300，字距稍微拉開。

• 導覽、按鈕 11～12.8px／700 的大寫，字距 0.44～0.51px；日期和小字 10px。

• 內容寬度約 1400px，段落常常一邊貼齊畫面邊緣（照片滿到右邊或左邊）。

• 頁首 71px 高，正中間是標誌，下面一條黑色細線。

• 段落名在左上、標語和說明在中間、照片在右邊，三者錯開不對齊。

• 「(FEATURE)」左邊一張大的視覺故事、右邊兩欄的文章列表，文章之間用 10% 的細線分開，直排的小字（PICK UP、SPECIAL、NEWS）當欄的標籤。

• 一行「(GALLERY / MOVIE→)」的大字橫向跑動，疊在黑白照片上。

• 右下角一直浮著「SALON SEARCH ↗」的黑色按鈕，右上角有一個小小的關閉 ×。

Responsive

• 375px 寬時，頁首只剩左邊的選單、正中間的「SEE SAW」和右邊的「FOR SALON」；第一屏是滿版的直式照片，下面一行跑動的照片條，右下照樣浮著「SALON SEARCH」。

• 進站時有一個白底、中間寫「SEE SAW」和百分比的載入畫面（這次截圖時手機版的載入畫面停在 89% 沒有消失，截圖是把它藏起來拍的）。

沒有陰影。層次靠照片的大小和錯開的位置、整段換成淡灰紫或深灰的底，和照片上疊的白色大字。

• 按鈕是 12px 圓角的小膠囊（黑底白字，或透明底細黑框）。

• 照片、卡片、浮著的按鈕都是直角。

• 標誌那條斜斜的細線是品牌的記號；分隔線都是 1px，常用 10% 的黑。

• 主要按鈕：黑底白字 12.8px／700 大寫，12px 圓角，高 24px，左右 12px（SALON SEARCH ↗）。

• 次要按鈕：透明底、1px 黑框、黑字 11～12px／700 大寫，12px 圓角，高 21～22px（FOR SALON →）。

• 浮著的 SALON SEARCH：右下角固定的黑色直角長條，白字加 ↗，右上角一個小 × 可以關掉。

• 文章卡片：上面一條 10% 的細線，16～21px 內距之後是照片、10px 的日期和分類、13px 明體的標題。

• 小橫幅：白底、1px 10% 黑框，220×92，放合作網站的標誌。

• Instagram 圖示：28px 的黑色正圓。

• 要用白底黑字，讓柔和、有光暈的時尚人像照片當主角。

• 標題用明體；英文段落名用 Libre Baskerville、大寫、加括號。

• 按鈕要做得很小：12px 圓角的黑色或細框膠囊，字很小、大寫。

• 版面要錯開：段落名、標語、照片不要對齊在同一條線。

• 不要加陰影和鮮豔的顏色；灰紫和深灰只當整段的底。