Gamania 橘子集團

台灣遊戲與數位娛樂集團橘子集團（gamania）的企業官網。首頁第一屏幾乎是空的：淺灰白底上一行撐滿整個寬度的超大粗黑體「have a GOOD TIME!」，左下角一行小標語「To Explore the Possibilities of Life.」，右邊直排的「SCROLL ↓」，再往下是一排橫向捲動的圓角大圖卡。

往下捲，背景會整段換色：先是淡藍灰底的集團介紹，中間一排白色圓角的子公司標誌卡；接著是全黑底的新聞區，三張綠、黃、藍的彩色卡片錯開排列；最下面再回到淺灰白底。標誌是黑色圓形裡一個白色的 g，品牌橘只出現在標誌的變化、左下角浮動的圓形按鈕和手機版首頁的大圓上。

整體是「大字、大留白、膠囊形按鈕」的組合：字全部是 Helvetica Neue 的粗體或一般字重，按鈕和導覽連結都是膠囊形，卡片是 23px 的大圓角，沒有陰影。

• Canvas（#F7F8F8）：頁面的底色，接近白的冷灰。

• Text（#000000）：標題、內文、導覽、按鈕上的字都是純黑。

• Primary（#DEE1E6）：主要按鈕的淺灰藍底（「gamania Updates」「Go to ESG Section」），上面是黑字。

• Surface（#FFFFFF）：子公司標誌卡和放在淡藍灰底上的白色膠囊按鈕（「About gamania」）。

• Surface alt／Border（#E9ECF2）：集團介紹那一整段的淡藍灰底色；同一個顏色也當卡片的 1px 框線。

• Brand（#FF6400）：橘子集團的品牌橘。左下角的浮動圓形按鈕、手機版首頁的大圓都用它，量測時沒有出現在一般元件上。

• Inverse（#000000）：新聞區整段的黑底。

• Neutral-2（#353535）：圖卡輪播左右切換用的深灰圓形按鈕。

• 半透明的黑（#00000033、#00000066、#00000099）：淡化的字。集團介紹那段長句一開始是 20% 的淡灰字，捲動時才逐字變深；60% 的黑用在日期和次要說明。

• Accent（#00C08B、#FFB71B、#0073E6）：新聞卡片的底色，綠、黃、藍輪流用，卡片上的字一律黑色。

全站只用 Helvetica Neue，中文跟著系統的黑體顯示，沒有另外指定中文字型。

• 首頁大標題「have a GOOD TIME!」是 700 的粗體，1440px 寬時約 162px，字距收得很緊（-9.65px，約 -6%），字母幾乎貼在一起。大小跟著視窗寬度變（約 11.2vw）。

• 區塊標題 45.65px／700、字距 -1.44px；新聞卡片的標題 30.53px／700。

• 內文 16px／400、行高 24px；頁尾和次要文字 15.26px。

• 膠囊按鈕的字 16px／700；導覽列的連結比較小，13.39px／700、字距 -0.14px。

很多尺寸是用 vw 算的（例如 15.26px、22.9px 的圓角），所以會出現小數點。照抄時可以四捨五入。

• 頁面左右邊界約 38px，內容幾乎撐滿整個寬度，沒有固定寬度的容器。

• 頁首 61px 高，左邊標誌，中間一排六個導覽連結（外連的加一個 ↗），右邊地球（切換語系）和放大鏡兩個圖示。

• 首頁第一屏：大標題靠上，左下標語、右下直排的 SCROLL；圖卡輪播從畫面左邊緣一路排到右邊緣，故意切掉兩邊。

• 集團介紹：置中的一段大字，下面一排橫向排列的白色標誌卡，再下面一顆置中的白色膠囊按鈕。

• 新聞區：黑底，三張卡片左右交錯排成兩欄，最下面一顆置中的灰色膠囊按鈕。

• 區塊之間用整段換底色分開（淺灰白 → 淡藍灰 → 黑 → 淺灰白），不用分隔線。

Responsive

• 375px 寬時，頁首只剩標誌、放大鏡和一顆淺灰膠囊形的選單按鈕（裡面三個橘點）。

• 大標題拆成三行、左右錯開（「have a」靠左、「GOOD」靠右、「TIME!」靠左），下面是一個佔滿寬度的品牌橘大圓，圓裡一個白色的 g。

• 按鈕改成滿寬、高 46px；新聞卡片改成一欄，圓角縮成 15px，內距 15px（下方 23px）。

全站沒有陰影。層次只靠整段換底色和卡片本身的顏色：淺灰底上放白卡，黑底上放彩色卡。

• 卡片和大圖是 23px 的大圓角；手機版和比較小的圖片用 15px、11px。

• 按鈕、導覽連結、浮動按鈕、輪播的切換按鈕都是膠囊形或正圓（9999px）。

• 沒有直角的按鈕。

• 主要按鈕：淺灰藍（#DEE1E6）底、黑字 16px／700，膠囊形，高 53px，左右內距 20px，文字後面接一個 → 箭頭。

• 次要按鈕：同樣的膠囊，白底黑字，放在淡藍灰的集團介紹區。

• 圖示按鈕：#353535 深灰正圓，48px，白色箭頭，在圖卡輪播左右。

• 浮動按鈕：左下角固定的品牌橘正圓，54px，裡面一個白色的 g。

• 導覽連結：13.39px／700 的黑字，膠囊形、上下 4px 左右 16px 內距。

• 新聞卡片：綠、黃、藍輪流的底色，23px 圓角、23px 內距；上面一張圓角照片，下面依序是日期（小字）、30px 的粗體標題（最多三行，超過用 …）、兩行淡化的摘要，右下角一個 → 箭頭。

• 子公司標誌卡：白底、23px 圓角、高 152px，中間放子公司的彩色標誌，一排橫向排列。

• 頁尾連結：15.26px 的黑字，左邊 16px 內距，一行一個。

• 要讓大標題撐滿整個寬度，用粗體、把字距收緊。

• 要用整段換底色分區塊，不要加分隔線或陰影。

• 要把按鈕和連結做成膠囊形，卡片用 23px 的大圓角。

• 要讓品牌橘只出現在標誌和少數重點（浮動按鈕、手機版的大圓），不要拿來當按鈕底色。

• 新聞卡片的彩色底上要用黑字，不要改白字。

• 不要加第二種字型；中文跟著系統的黑體就好。