永豐 DAWHO 數位帳戶

永豐銀行的數位帳戶 DAWHO（大戶）的產品網站，主打「新世代 VIP」。整站是黑底配香檳金：頁首是近黑的長條，中間一排金色的導覽字，右邊一顆金色膠囊按鈕「我要當DAWHO」；下面是一條金色底的促銷跑馬燈，再往下是黑底的首頁第一屏，置中兩行 100px、字重 900 的金色大字「新世代VIP 數位帳戶」，旁邊用細金線畫的放射線條、球體和一圈旋轉的英文字當裝飾。

往下依序是四張金色拱門形的優惠卡（存款利率、現金回饋、手續費、跨國匯款，各放一個大數字）、細金線框起來的服務說明、左邊條列右邊手機畫面的投資區、一整段金色底的貸款區、白色的活動卡片輪播、App 下載區，最下面是黑底的頁尾。

整體想給人「高級會員」的感覺：大量的黑和金、金色的細線和放射線條、膠囊形的按鈕；只有活動卡片是白底的。

• Canvas（#000000）：整頁的黑底。

• Secondary（#111111）：頁首長條和次要按鈕的底色，比頁面的黑淡一點點。也是金色底上的字色（text）。

• Primary（#CEB071）：香檳金。頁首的「我要當DAWHO」按鈕、跑馬燈的底、導覽字、首頁大標題、細框線都用它。

• Gold deep（#C19E55）：比較深的金，區塊標題用它；首頁的「我要當大戶」按鈕是從 #D3BB88 到 #C19E55 的左右漸層。

• Gold muted（#AF955F）：「了解更多>>」這類金色的文字連結。

• Bronze（#9A6306）：很深的古銅色，只出現在少數幾條框線上。

• Gold tint（#C8AB6E34）：次要按鈕滑鼠移上去時的半透明金底。

• Surface（#FFFFFF）：活動卡片的白底，上面的標題是黑色（#000000）。

• On canvas（#FFFFFF）：頁尾的白字。

• Neutral（#818181、#A3A3A3、#4F4F4F、#AAAAAA）：頁尾的附註、版本說明等次要文字和分隔線。

中文全部用 Noto Sans TC，大優惠卡上的數字（1.5%、6%）用 Roboto 900。

• 首頁大標題 100px／900、行高 110px、字距 5px，金色；「VIP」三個字放大到 120px。

• 首頁副標 26px／400、字距 2px，三行置中。

• 區塊標題 36px／700、行高 52.2px、字距 2px，用比較深的金（#C19E55）；金色底的區塊用 #111111。

• 頁首導覽字 20px／400，金色；跑馬燈的字 24px。

• 卡片標題 18～20px／700；內文 16px，行高 23.2px。

• 按鈕的字都是 22px：頁首的金色按鈕 400、字距 2px，首頁的三顆按鈕 700。

• 內容寬度約 1200px 置中（優惠卡、服務說明框約 1080px）。

• 頁首 76px 高、固定在最上面：左邊金色標誌，右邊五個導覽字和金色按鈕；導覽字展開的下拉選單是黑字 16px。

• 頁首下面一條 80px 高的金色跑馬燈，促銷訊息一則一則往上換，左邊一個金色喇叭圖示。

• 首頁第一屏全部置中：大標題、三行副標、三顆按鈕並排（金色漸層一顆、黑底金框兩顆）。

• 區塊之間的空白很大（上下約 120px），一段黑底、一段金底交替。

• 投資區是左右兩欄：左邊標題和四條金框的連結，右邊一支手機的 App 畫面，後面墊一個金色大圓。

Responsive

• 375px 寬時，頁首只剩左邊的漢堡選單和中間的標誌；跑馬燈縮成兩行的字。

• 大標題縮小、兩行置中，三顆按鈕改成滿寬上下排。

• 畫面最下面固定一條，放「我要當大戶」（金色漸層）和「申請大戶投」（黑底金框）兩顆按鈕。

沒有陰影。層次靠黑底上的金色：金色細線、放射線條和金色大圓當背景裝飾，卡片本身是平的。

• 按鈕都是膠囊形（圓角 35～40px）。

• 優惠卡是上方圓拱、下方直角的金色拱門形，用圖片做的。

• 活動卡片、條列連結、服務說明的框都是直角。

• 小元件（下拉選單、標籤）用 4～12px 的小圓角。

• 頁首按鈕：香檳金（#CEB071）底、#111111 字 22px／400、字距 2px，膠囊形（40px），210×53px。

• 主要按鈕（首頁）：#D3BB88 → #C19E55 的左右金色漸層，#111111 字 22px／700，後面接一個 → 箭頭，膠囊形（35px），271×58px。

• 次要按鈕：#111111 底、金字 22px／700、1px 金色框線，膠囊形（35px），198×58px；滑鼠移上去底色變成半透明的金。

• 跑馬燈：金色底、80px 高，#111111 字 24px，左邊一個圓形的喇叭圖示。

• 條列連結：金色 1px 框線的直角長條，480×67px，左邊小圖示、金字 20px、右邊一個 → 箭頭。

• 活動卡片：白底直角，300×360px；上面一張活動圖，下面是 20px／700 的黑色標題和灰色的說明，右上角一個金色的 ↗ 箭頭。左右用金色的圓形箭頭切換。

• 頁尾連結：白字 16px，四欄，每欄上面一個金色的分類標題。

• 要用黑底配香檳金，讓金色當主角；白色只用在活動卡片和頁尾的字。

• 要用金色細線、放射線條、圓形當背景裝飾，不要用陰影做層次。

• 要讓按鈕都是膠囊形；主要的用金色或金色漸層，次要的用黑底金框。

• 大標題要用最粗的 900，字距拉開一點。

• 不要加金色以外的品牌色；彩色只出現在活動卡片的圖片裡。

• 卡片和框線要用直角，不要跟按鈕一樣做成圓的。