台灣山葉機車 Yamaha Motor Taiwan

台灣山葉機車（Yamaha Motor Taiwan）的品牌官網。頁首是一條深灰長條：左邊紅色的 YAMAHA 標誌和「Revs Your Heart」，中間一排白字的車種導覽，右邊三格「活動報名」「追蹤愛車」「Hi 您好」。下面是全黑底的影片輪播，影片置中、左上角一個紅色 YAMAHA 字樣，下方一行字幕。

往下是 Yamaha 藍的區塊：一排車款類型的圖卡（Super Sport、Hypernaked、Adventure……）橫向捲動，英文類型名稱用 Barlow Semi Condensed 粗體斜放在圖上；再來是白底的新聞列表，最後是深藍底、帶斜紋的「樂騎生活」文章區，用大小不一的圖卡拼成格狀。

整體是機車品牌的運動感：深灰、黑、Yamaha 藍三種大面積的顏色，用斜切的色塊和斜紋把區塊分開；按鈕是白色的斜角長條，後面拖一條藍線。紅色只用在標誌和新聞的分類標籤。

• Canvas（#FFFFFF）：新聞區和網站地圖的白底。

• Text（#343434）：白底上的字，深灰不是純黑。同一個顏色也是頁首和頁尾的底色。

• Primary（#0A2785）：深藍。CTA 按鈕的字、左邊的粗線和後面那條藍線都用它。

• Blue（#2446B6）→ Blue deep（#0A2D82）：車款區的背景，從上到下由亮藍漸層到深藍，上面疊一層細斜紋的圖片。樂騎生活區是 #19348B → #0A2D82。

• Quicklink（#121212）：右邊固定的一排小方塊按鈕的底色，手機版是最下面那一排。

• Drawer（#3E3E3E）：手機選單打開時的深灰底。

• Red（#FF0000）、Red deep（#C81D0E）：標誌的紅；新聞分類標籤的紅框和紅字。

• Border（#ACACAC）、Divider（#CFCBCB66）：框線和選單裡的分隔線。

• Neutral（#CCCCCC、#DEDEDE、#898989、#454545）：圖片還沒載入時的灰底、新聞列表的分隔線、日期這類次要的字、頁首格子之間的線。

• Accent（#FFFF00、#006D5B）：量測時只出現幾次，首頁上沒有明顯用在哪裡，不要拿來當主要的顏色。

中文用 Noto Sans TC，英文的車款類型用 Barlow Semi Condensed。

• 全站的基本字 18px／300、行高 32.4px、字距 0.8px，字重偏細。

• 區塊標題「樂騎生活」48px／500，下面一行英文「LIFESTYLE」32px／300，兩邊各一條短橫線。

• 車款類型的英文名稱 36px／700（Barlow Semi Condensed），白字，下面一行中文的說明。

• 新聞區標題「訊息中心」22px／500 白字，放在一條斜切的藍色長條上；新聞標題 16px／700。

• CTA 按鈕的字 20px／500、字距 1.6px，深藍色。

• 樂騎生活卡片的標題 20px／400、說明 13px／300，白字直接壓在照片上。

• 新聞分類標籤 12px／500。

• 內容寬度 1080px 置中（左右內距 32px）。

• 頁首 80px 高：左邊標誌、導覽連結，右邊三個 120px 寬的格子，格子之間用細線隔開。

• 首頁第一屏是全黑底的影片輪播，右下角一排小圓點切換。

• 畫面右邊固定一排 50px 的黑色方塊按鈕，從上到下：最新消息、愛車配對、預約試乘、服務據點、線上商城。

• 區塊之間用斜切的色塊和斜紋圖片分開，不是水平切開。

• 新聞列表是兩欄，每一則是分類標籤、日期、標題三樣。

• 樂騎生活是大小不一的照片拼成的格狀版面（一大兩小、兩小一大交錯）。

• 每個區塊最後一顆置中的白色 CTA 按鈕。

Responsive

• 375px 寬時，頁首只剩標誌和右邊三格圖示（活動報名、追蹤愛車、MENU）；車款圖卡改成一次一張、左右箭頭切換。

• 最下面固定一排六格的黑色圖示按鈕（最新消息、愛車配對、預約試乘、服務據點、線上商城、追蹤愛車），取代桌機右邊的那一排。

陰影很少：右邊那排固定的方塊按鈕有一圈很淡的陰影（0 0 4px，20% 黑）；另外量到一種往下的陰影（0 8px 16px，20% 黑），用在浮起來的面板上。其他的層次都靠大面積的顏色和斜切的色塊。

• 幾乎都是直角：圖卡、按鈕、頁首的格子都沒有圓角。

• 只有新聞分類標籤用 4px 的小圓角，小元件用 2px。

• CTA 按鈕是右端斜切的白色長條（用 SVG 背景畫的），新聞區標題的藍色長條兩端也斜切。

• CTA 按鈕：白色、右端斜切的長條，420×80px；只有左邊一條 2px 的深藍粗線（其他三邊沒有框線），字是 20px／500 的深藍色，右邊拖一條 80px 長、2px 粗的深藍橫線當箭頭。放在藍底上也是白色。

• 頁首：#343434 深灰長條，80px 高，白字 18px／300。

• 手機選單的連結：#3E3E3E 深灰底、白字 18px／300，每一項下面一條 1px 的半透明灰線（#CFCBCB66）。

• 右側按鈕：#121212 黑色的 50px 方塊，白色線條圖示，紅色點綴。

• 車款類型圖卡：照片上壓白色的 Barlow 粗體英文類型名稱和一行中文，一排五張、可以左右捲動。

• 新聞分類標籤：紅框紅字（#C81D0E），1px 框線、4px 圓角，12px／500，例如「活動訊息」「產品訊息」。

• 新聞列表：分類標籤和灰色的日期一行，下面是 16px／700 的標題，每則下面一條 1px 淡灰（#DEDEDE）的分隔線。

• 樂騎生活卡片：照片滿版，白色標題和說明直接壓在照片上，沒有底色和框。

• 頁尾：上面是白底的網站地圖（四欄連結），最下面一條 #343434 的深灰條放版權和客服電話。

• 要用深灰、黑、Yamaha 藍三種大面積的顏色，區塊之間用斜切的色塊分開。

• 要讓 CTA 按鈕是白色斜角長條加一條藍線，不要做成圓角或膠囊形。

• 字重要偏細（300），標題才用 500 或 700。

• 紅色只用在標誌和分類標籤，不要拿來當按鈕。

• 不要加圓角；除了小標籤，全站都是直角。

• 陰影只給浮在畫面上的東西（固定按鈕、浮起來的面板），卡片不要加陰影。