50嵐 FIFTYLAN

手搖飲品牌 50嵐 海外品牌 FIFTYLAN 的網站，全英文。首頁第一屏上半是一整條品牌藍，白色的「FIFTYLAN」粗體大字撐滿整個寬度；下半是一張滿版的街拍照片，拎著藍色提袋的人手上一杯透明的 FIFTYLAN 杯子。往下捲，杯子會跟著捲動，依序倒進珍珠、茶、奶，左邊的小字也跟著換（+50% HALF DELICIOUSNESS／SATISFACTION）。

接下來的段落都是捲動動畫：藍底上三個半圓的照片；米色底上重複的白色大字「EVERY CUP = 100%」，疊著四張「50% FLAVOR 50% DELICIOUSNESS」這種一半一半的標語卡；一排一排斜放、轉著的藍色大字（FIFTY DRINKS、STORE）；新聞放在一個「M」形的白色大波浪裡；頁尾是圓角的黃色大區塊，白色的「Daily Part of Your」大字橫向跑動。

整體是活潑、年輕的品牌網站：品牌藍、白、黃三色，Red Hat Display 的幾何粗體字，大字、斜字、跑馬燈和杯子動畫一起用。

• Primary（#0068B7）：50嵐的品牌藍。第一屏上方的整條藍、標題、按鈕的字和框線、選單的字、飲料標籤、店家卡片的底，全站最主要的顏色。

• Canvas（#FFFFFF）：白底；第一屏大字、標語卡上的字。

• Text（#000000）：白底上的英文內文和新聞標題。

• Text muted（#727171）：標語卡上的說明文字。

• Peach（#FDEBD6）：「EVERY CUP = 100%」那段的淺米色底。

• Yellow（#FAD91F）、Yellow soft（#F4D231）：頁尾的黃色大區塊、部分店家卡片和標語卡的黃底。

• Surface（#E3E3E3）：圓形按鈕的淺灰底。

全站用 Red Hat Display（Google Fonts），英文為主，多半是粗體、全大寫。

• 第一屏的「FIFTYLAN」是撐滿寬度的粗體大字（圖片或 SVG）；段落的斜放大字（FIFTY DRINKS、STORE）也是。

• 標語卡的大標「50% FLAVOR 50% DELICIOUSNESS」51px／700、行高 1.2，品牌藍，兩行。

• 第一屏左邊的小標 22px／600（HALF DELICIOUSNESS）、數字 52px／700（+50%）。

• 選單、新聞標題「NEWS」32px／700；店家名稱（CANADA、USA）35px／500。

• 說明文字 24px／400、行高 36px；小字 14px。

• 按鈕的字是 20px／700 的斜體（Read More、Visit Us），品牌藍。

• 頁首只有左上角藍色的標誌加「FIFTYLAN」字樣，右上角兩條線的選單；打開選單是全螢幕，品牌藍的大字 HOME、OUR TEA、NEWS、STORE、CONTACT。

• 大部分段落都是一個畫面高、固定住（sticky），捲動時畫面裡的東西在動，而不是整頁往上捲。

• 標語卡：左半是米色底上重複的「EVERY CUP = 100%」大字，中間疊一張卡（白、黃、藍輪流），卡上一個淺藍的大數字 1～4、標語和說明，右半是滿版的照片，杯子跨在兩半中間。

• 飲料：一排圓形的飲料照片，下面一個藍底白字的飲料標籤（TEA LATTE、MACCHIATO），最後一顆「Read More」。

• 新聞：藍底上一個「M」形的白色大波浪，裡面左邊大字 NEWS，右邊兩張圓角的新聞卡片。

• 一條細藍線上下夾著的斜體跑馬燈：「HALF + HALF = FULL VIBE. EVERY CUP = 100%.」。

• 頁尾：圓角的黃色大區塊，左上標誌，中間白色大字橫向跑動，下面一排藍色的連結。

Responsive

• 375px 寬時，「FIFTYLAN」大字縮成一行撐滿寬度，下面的照片改成直式，杯子放在正中間。

沒有陰影。層次靠捲動：杯子、卡片、照片疊在不同的層，捲動時以不同速度移動。

• 按鈕是白底、細藍框的橢圓（134×48，圓角 100%，不是膠囊），或淺灰的正圓（86px）。

• 新聞卡片和照片 25px 圓角、店家卡片 20px、頁尾黃色區塊 24px。

• 大量的圓和曲線：半圓照片、圓形飲料照片、「M」形的波浪。

• 飲料標籤和標語卡是直角。

• Read More／Visit Us 按鈕：白底、1.25px 品牌藍框的橢圓，134×48px，裡面 20px／700 的藍色斜體字。

• 圓形按鈕：#E3E3E3 淺灰的 86px 正圓，裡面一個藍色圖示。

• 飲料標籤：品牌藍底、白色 24px／700 的大寫字，直角，壓在圓形飲料照片下面。

• 標語卡：白、黃或藍底的直角卡片，左上一行 14px 的小字「Half and Half」，51px 的兩行藍色標語，灰色的說明，左下「01 / 04」的頁碼。

• 店家卡片：品牌藍或黃底、20px 圓角，上面一張照片，下面 35px 的國家名稱和一行 #分店名，斜放、互相疊著。

• 新聞卡片：25px 圓角的方形插圖，下面日期和 20px／500 的標題。

• 頁尾：黃底、24px 圓角的大區塊，白色大字的跑馬燈，藍色的連結。

• 要用品牌藍當主角，白和黃當配色，米色只當一段的背景。

• 標題要用 Red Hat Display 的粗體大寫；按鈕的字用粗斜體。

• 要多用大字、斜放的字和跑馬燈，讓畫面有動感。

• 按鈕要是白底細藍框的橢圓，不要做成實心的藍色按鈕。

• 不要加陰影，層次交給捲動動畫和疊放。

• 不要用細字和小字當主要的資訊；這個網站的字幾乎都很大。