Billboard Live

日本的音樂餐廳 Billboard Live（東京、大阪、橫濱）的網站。第一屏是滿版、偏暗的影片（樂手、燈光、酒杯），上面三行超大的細體英文「MAKE ONE STAGE」幾乎撐滿畫面，字裡面透出冷色的光影；左上白色的 billboard LIVE 標誌，中間一顆螢光綠（#9EFF36）的膠囊「Menu」，右邊螢光綠的「Login」和細框的「EN」；最下面一條贊助商標誌的跑馬燈。

往下捲，「MAKE ONE STAGE」變成白底上的黑色大字，一疊表演的照片斜斜地疊著飛過；「...it's about to begin」的巨大字跟著影片；「Our Club」字裡透出照片的大字，旁邊三個城市；TOKYO、OSAKA、YOKOHAMA 一行一行用細線分開；「All Shows →」；「THE Billboard Live DINING & BAR」字裡透出料理照片，旁邊一段大寫的小字；滿版的料理、調酒照片；最後是頁尾。

整體是夜晚、高級的現場音樂：白底和深色的影片交替，深藍黑（#13172D）的字，螢光綠只用在按鈕；標題是超大、字距收得很緊的英文（area-normal），常常把照片放進字裡面。

• Text／Primary（#13172D）：深藍黑，白底上的字和「Contact」的深色膠囊。

• Secondary（#9EFF36）：螢光綠。「Menu」「Login」、播放、回到頂端這些按鈕和一個 137px 的大圓，整站唯一的亮色。

• Canvas（#FFFFFF）：白底（上面一層很淡的紋理）。

• Inverse（#292E47）：深色的段落底。

• Glass（#454D7899）：照片上 60% 的藍灰半透明卡片。

• Border（#DDDEE4）：卡片的淡框、城市之間的細線、贊助商標誌的框。

• 影片和照片本身是暖色的燈光、冷色的舞台光，介面上不另外加顏色。

英文標題和按鈕用 area-normal（Adobe Fonts，不在 Google Fonts），日文用 Noto Sans JP。

• 第一屏「MAKE ONE STAGE」約 325px／300～400，字距收得非常緊（-10%），三行疊滿畫面。

• 段落標題（THE Billboard Live DINING & BAR、Our Club、ALL FOR ONE STAGE）141～160px／600～700，字距 -5%；很多是把照片放進字裡（文字本身透明）。

• 城市名 78px／700；日期 49px／600；「All Shows」29px／700。

• 標題旁邊的大寫小段落 17.6px／700、行高 1.16。

• 按鈕 13.7px／700、字距 0.69px；日文內文 15.7px。

• 頁首懸在最上面：左邊標誌、正中間「Menu」、右邊「Login」和「EN」，沒有底色。

• 大部分段落都是一個畫面高，影片和照片滿版，或一邊滿版的照片、一邊白底的大字。

• 大字常常超出畫面邊緣或跟照片重疊。

• 城市列表一行一個，中間一條細線；「All Shows →」置中。

• 雜誌文章是兩欄的白卡片，淡框、6px 圓角。

• 右下角一顆螢光綠的圓形「回到頂端」。

Responsive

• 375px 寬時，「MAKE ONE STAGE」改成三行左對齊、撐滿寬度；頁首照樣是標誌、Menu、Login 三樣；最下面接贊助商的跑馬燈。

沒有陰影。層次靠影片、照片和大字的疊放：字裡面透出照片、照片斜斜地疊著飛過、半透明的藍灰卡片疊在照片上。

• 按鈕都是膠囊或正圓。

• 卡片、照片是 6px 的小圓角；贊助商的框 2px。

• 線條是 1px 的淡灰（#DDDEE4）。

• 主要按鈕：#9EFF36 螢光綠底、#13172D 字 13.7px／700，膠囊形，高 29px，前面一個小圖示（Menu、Login）。

• 深色按鈕：#13172D 底、白字的膠囊，176×39（Contact）。

• 語言切換：透明底、1px 框的膠囊，高 29px，地球圖示加「EN」。

• 播放按鈕：55px 的螢光綠正圓，壓在影片上。

• 雜誌卡片：白底、1px #DDDEE4 淡框、6px 圓角，29px 內距，照片和標題。

• 表演卡片：60% 藍灰的半透明底、6px 圓角，疊在照片上，白字。

• 城市列表：78px／700 的城市名一行一個，中間 1px 細線。

• 要用白底和深色影片交替，字用深藍黑，不用純黑。

• 螢光綠只給按鈕和圓形的記號，不要大面積用。

• 標題要超大、字距收很緊，可以把照片放進字裡、讓字超出畫面。

• 按鈕要是膠囊或正圓；卡片是小圓角、淡框。

• 不要加陰影；層次交給影片、照片和大字的疊放。