康橋商旅 Kindness Hotel

康橋商旅（Kindness Hotel）的官網，介面是英文。左邊固定一條 100px 寬的深綠直欄，上面白色的星形標誌和直排的「康橋商旅」，下面直排的「KINDNESS HOTEL」；右上角一顆淺灰、下方圓角、帶陰影的選單按鈕。

首頁第一屏是滿版、偏暗的照片（櫃台交鑰匙、拖著行李箱走過地毯），中間是白色的襯線字「Welcome to」「KINDNESS HOTEL」「康橋商旅」，下面一條半透明的毛玻璃訂房列：入住退房日期、分館、人數，最右邊一顆白色細框的膠囊「SEARCH」。

往下是白底：深綠色的襯線大字介紹（With 16 branches across Taiwan…），灰色的內文，「Make Your Journey Better.」一行大標，再來是分館的照片卡片（照片右下斜切一塊深綠，放白色星形）、新聞卡片，最下面是淺灰的頁尾。整體是沉穩、有質感的飯店網站：深綠、白、淺灰，標題用襯線字，內文用 Inter。

• Primary（#004137）：深綠，左邊的直欄、分館卡片右下的斜切色塊、新聞標題。

• Green（#13564E）：比 primary 亮一點的綠，介紹段落的大字、「All Hotels」連結、頁尾連結；SEARCH 按鈕滑鼠移上去的底色。

• Green soft（#4A776A）：「Make Your Journey Better.」這種大標。

• Border（#5A9281）：細框線和圓形箭頭按鈕的框。

• Text（#6A6A6A）：內文的中灰。

• Canvas（#FFFFFF）：內容區的白底，照片上的字。

• Surface（#E4E4E4）、Surface light（#EFEFEF）：選單按鈕、頁尾的淺灰底。

• 白色的半透明線（#FFFFFF4D、#FFFFFF80）：照片上 SEARCH 按鈕的框、訂房列裡的分隔線。

• Brown（#382D27）：量到的深咖啡色，出現次數很少，跟照片的暖色調一致。

標題用襯線字 Gambetta（Google Fonts 沒有，中文接 Noto Serif TC），內文、標籤和按鈕用 Inter（中文接 Noto Sans TC）。

• 大標 62px／400、行高 1.3（Make Your Journey Better.）。

• 介紹段落 42px／500、行高 1.6、字距稍微收緊（-0.84px），深綠色，一句話寫成六行。

• 第一屏的「Welcome to」24px；「KINDNESS HOTEL」是更大的襯線大寫字。

• 分館名稱 26px／600、新聞標題 22px／600。

• 內文 16～18px、行高 2 倍；新聞摘要 14px。

• 訂房列的小標籤 12px、字距 0.72px，淺灰；SEARCH 是大寫、字距拉開。

• 左邊固定 100px 寬的深綠直欄，內容在右邊；內容區左右各留很寬的空白（約 130px）。

• 第一屏滿版照片，標題和訂房列在中間偏上。

• 介紹段落左邊大字、右邊一個很淡的灰色星形標誌當背景裝飾。

• 分館：標題和說明在左，「All Hotels」加圓形箭頭在右；下面一排橫向的照片卡片，左右圓形箭頭切換。

• 新聞：一排三張的卡片，照片在上，深綠的襯線標題和灰色摘要在下，也用圓形箭頭切換。

• 頁尾：淺灰底，一排連結、集團各品牌的標誌、版權。

Responsive

• 375px 寬時，左邊的深綠直欄不見了，右上角保留淺灰的選單按鈕。

• 第一屏是直式的滿版照片，「Welcome to」「KINDNESS HOTEL」「康橋商旅」三行置中，第一個畫面裡沒有訂房列。

陰影只有一種，用在右上角的選單按鈕（1px 2px 5px，25% 黑）。訂房列是半透明的毛玻璃，疊在照片上。其他靠白底、深綠色塊和照片分層。

• 按鈕都是膠囊形：SEARCH（161×60）和「All Hotels」這種細框的連結按鈕。

• 選單按鈕是直角、只有下面兩個角 5px 圓角，像從頁面上緣垂下來的標籤。

• 分館卡片是直角照片，右下角斜切一塊深綠的三角形。

• 箭頭按鈕是正圓。

• 左側直欄：#004137 深綠、100px 寬、固定在左邊，白色星形標誌、直排的「康橋商旅」和「KINDNESS HOTEL」。

• 選單按鈕：#E4E4E4 淺灰、64×56px，下面兩角 5px 圓角，淡淡的陰影，裡面三條深綠的線。

• 訂房列：半透明的深灰毛玻璃長條，三格（日期、分館、人數）用細的白色半透明線隔開，每格上面 12px 的淺灰標籤、下面 16px 的白字和一個虛線圓圈的下拉箭頭；最右邊 SEARCH 按鈕。

• SEARCH 按鈕：透明底、1px 30% 白框的膠囊，161×60px，白色大寫字；滑鼠移上去底色變成深綠。

• 連結按鈕：透明底、1px 綠框的膠囊，深綠的襯線字 16px，上下 9／8px、左右 24px。

• 分館卡片：直角照片，左上白色的襯線分館名稱（26px／600），右下斜切的深綠三角形裡一個白色星形。

• 新聞卡片：照片在上，22px／600 的深綠襯線標題、14px 的灰色摘要在下，沒有框和底色。

• 頁尾：#E4E4E4 淺灰底，深綠色的連結和版權字。

• 要用深綠、白和淺灰，綠色分深淺用在色塊、標題和連結。

• 標題要用襯線字，內文用 Inter，兩種字不要混用在同一個層級。

• 按鈕要是細框的膠囊，不要用實心的大色塊按鈕。

• 照片要偏暗、有溫度；字直接壓在照片上用白色。

• 陰影只給選單按鈕，卡片不要加陰影。

• 內文行高要拉開（2 倍），留白要多。