RGF Professional Recruitment

日本的高階人才仲介 RGF Professional Recruitment（Recruit 集團）的網站，日文為主。左邊固定一塊 280px 寬、12px 圓角的淺灰側邊欄：上面「RGF Professional Recruitment」的標誌，中間一列小字的選單（ホーム、RGFが選ばれる理由…），最下面「English」和兩顆膠囊按鈕（求人情報を見る、転職を相談する）。第一屏是白底，數十張小小的辦公室、人物照片散在整個畫面，右下角超大的英文「Unleash Potential」（Unleash 是紫色的漸層），下面一行「of Clients, Candidates, and Ourselves.」。

往下整段變成黑底：一顆一顆彩虹色（紫、黃綠、青）光暈的玻璃球體，球裡面是幾何圖形和節點（IT、Healthcare、Finance；Company、Candidate、360°；日本地圖），左邊白色的英文大標「Specialized, But Connected.」「Human-Powered, 360° Recruitment.」「Global Talent, Local Insight.」和日文小標；接著黑底的統計卡片（12,000+、10万+、4,000+、96%）；然後回到白底的「求人情報」、細框的職種標籤、滿寬的黑色膠囊「求人一覧を見る」；最後是黑底的頁尾。側邊欄在黑底的段落會變成深灰底、白字。

整體是乾淨、科技感的人資公司：白和黑兩段大色塊，介面只有黑白灰，彩色只出現在漸層的光暈球體和「Unleash」；英文用 PP Neue Montreal、日文用 Aoto Gothic，按鈕都是膠囊。

• Canvas（#FFFFFF）、Text（#000000）：白底黑字的段落。

• Inverse（#000000）：中段和頁尾的黑底，上面是白字。

• Primary（#000000）：黑色的膠囊按鈕（転職を相談する、求人一覧を見る）。

• Surface（#F2F2F2）：側邊欄的淺灰；黑底段落時側邊欄是 #262626。

• Text muted（#7A7A7A）、Neutral（#999999、#535353、#404040）：說明文字、註解，和黑底上卡片的框。

• Border（#CCCCCC、#D9D9D9、#E0E0E0）：細框和分隔線。

• Glass（#FFFFFF40、#FFFFFF80）：黑底上半透明的白，球體裡的節點和小字。

• 漸層：「Unleash」的字和球體外圈的光暈是紫 → 藍、黃綠 → 青這種彩虹色的漸層（是圖片和影像，量測沒有收進色票）。

英文用 PP Neue Montreal（Pangram Pangram，Google Fonts 沒有），日文用 A P-OTF Aoto Gothic（Morisawa，Google Fonts 沒有；可以用 Noto Sans JP 代替）。

• 第一屏「Unleash Potential」是超大的英文（量不到字級，是圖或動畫，從截圖看約 90px），下面一行 24px／500。

• 黑底段落的英文大標 44px／500、行高 59.4px，兩行，白字。

• 日文段落標題 40px／700、行高 64px（求人情報、RGFが選ばれる理由）；小標 24px／700。

• 統計數字是大的 PP Neue Montreal，「+」是灰色。

• 英文小標（Why RGF、Jobs、Our Vision）18～20px／500。

• 按鈕 17px／500、字距 0.34px；內文 16px、行高 24px。

• 左邊固定 280px 的側邊欄（上下留 12px，不貼齊畫面邊緣），右邊是內容，內容區約 1014px。

• 第一屏滿版，小照片散在畫面上、隨捲動移動。

• 黑底的段落：左下文字、右上一顆大的光暈球體，一個畫面一個主題。

• 統計卡片兩欄兩列，左邊一張照片。

• 求人情報：左邊標籤群組，右邊一張黑底的介面示意圖，下面滿寬的黑色膠囊按鈕。

Responsive

• 375px 寬時，側邊欄收成右上角黑色的「Menu」按鈕和左上的標誌；「Unleash Potential」改成兩行，右對齊在畫面下方。

沒有陰影。層次靠白底和黑底的大段交替，和黑底上發光的漸層球體。

• 按鈕都是膠囊；語言切換也是細框的膠囊。

• 側邊欄、統計卡片 12px 圓角，報告卡片 14px，標籤 10px。

• 球體是正圓的玻璃球，裡面是六角形、方形、圓形的節點和細線。

• 主要按鈕：黑底白字 17px／500，膠囊形，高 74px，右邊一個白色圓形裡的圖示（求人一覧を見る），常常滿寬。

• 次要按鈕：白底、細灰框、黑字的膠囊，高 74px。

• 側邊欄按鈕：側邊欄最下面兩顆，一顆黑底白字、一顆白底黑字的膠囊，高 60px，右邊一個放大鏡或人像圖示。

• 語言切換：細框的膠囊「English 🌐」，高 34px。

• 統計卡片：黑底、1px 深灰框、12px 圓角，白色的大數字和灰色的「+」，下面兩行小字。

• 職種標籤：白底、1px 深灰框、10px 圓角的小標籤。

• 介面只用黑、白、灰；彩色只留給漸層的光暈球體和少數的關鍵字。

• 用白底和黑底的大段交替，一個畫面講一件事。

• 英文標題用 PP Neue Montreal 這種乾淨的無襯線字，日文用黑體的粗體。

• 按鈕都做成膠囊，主要的用黑底。

• 不要加陰影；層次交給黑底上發光的球體。