川正製造所 Kawamasa

新北市新莊的 CNC 精密加工廠川正製造所（Kawamasa CNC Precision）的網站，英文為主。第一屏的背景是一大片銅色的零件插畫（齒輪、螺桿、軸承疊在工程圖紙上），上面浮著一條半透明米色、12px 圓角的導覽列：左邊深咖啡色的「川正製造所」字樣，中間 Home、Equipment、QC、Showcase、Workflow、FAQ、Contact 和語言選單，目前那一頁下面一條咖啡色的線。

往下是米色底（#E8E5DE），整頁用細的虛線畫出三欄的格線：左欄固定一塊半透明的側邊面板（公司概要的目錄、聯絡電話、QR code、「Email Us」）；中間是主內容：深咖啡底白字的小標籤「ESTABLISHED IN 2013」、兩行粗體大字「Cut to Perfection. Build for Excellence.」（「for」換成細的斜體襯線字）、加工的照片、公司簡介、三欄的服務、規格卡、設備照片、ISO 證書、產品照片的格狀牆。右下角固定三顆圓形按鈕（電話、分享、回到頂端）。

整體是工業但有溫度：米色和深咖啡兩色，像工程圖紙的虛線格線，字是幾何感的 Onest 粗體，重點的字下半部用淡黃綠色像螢光筆畫線。

• Canvas（#E8E5DE）：米色底，也是深咖啡按鈕上的字色。

• Text／Primary（#632209）：深咖啡。所有的字、框線、小標籤、「Email Us」按鈕、圓形按鈕的框都用它。

• Glass（#E8E5DEE6、#E8E5DEB3）：導覽列、側邊面板、圓形按鈕的半透明米色，後面透出零件插畫。

• Highlight（#EAFFBCCC）：內文裡重點字（地名、ISO 9001）下半部 80% 的淡黃綠底色，像螢光筆畫線。

• Text muted（#A39C85）：格線的虛線和次要的灰褐色。

• Surface（#FFFFFF）：少數白底的地方。

英文用 Onest（Google Fonts 的幾何無襯線字），強調的單字用 Hoefler Text 的細斜體；中文標誌是圖片。

• 第一屏兩行大字 67px／700、字距 -0.4px，其中「for」換成 67px／400 的 Hoefler Text 斜體。

• 段落標題（Company Profile、Services）38px／700。

• 服務、規格的小標 21px／700，前面一個深咖啡的圓形數字。

• 導覽 16px／700；內文 16px／400、行高 23.2px。

• 小標籤、側邊目錄的標題 12.8px／700 大寫、字距 0.32px。

• 整頁有三條直的虛線，把畫面分成左（側邊面板）、中（主內容）、右三欄，像工程圖紙。

• 導覽列浮在最上面，左右留白，半透明、12px 圓角。

• 左欄的側邊面板捲動時固定：目錄（Profile、Services、Capabilities…，每項後面一個深咖啡的小方塊）、聯絡資訊、QR code。

• 主內容約 760px 寬：標題、照片、三欄的文字或卡片。

• 產品照片三欄的格狀牆，照片直角。

• 右下角固定三顆圓形按鈕。

Responsive

• 375px 寬時，導覽列剩下「川正製造所」、語言和選單；第一屏是零件插畫，下面「ESTABLISHED IN 2013」和「Cut to Perfection.」的大字。

陰影量到兩種：一種很淡的米灰陰影（0 2px 11px，42% 的 #A39C85）；一種往下 5px、不模糊的深咖啡實心陰影（0 5px 0 #632209），像印章壓出來的邊。其他的層次靠半透明的米色面板疊在零件插畫上，和細虛線的格線。

• 導覽列和側邊面板是 12px 的圓角；圓形按鈕是正圓。

• 小標籤、規格卡、照片都是直角；規格卡是 1px 的深咖啡框。

• 側邊目錄每一項後面一個實心小方塊。

• 導覽列：半透明米色（90%）、12px 圓角，深咖啡 16px／700 的字，目前那一頁下面一條粗的咖啡色線。

• 主要按鈕：深咖啡底、米色字 14.4px／700，直角（Email Us）。

• 圓形按鈕：45px 正圓，半透明米色底、1px 深咖啡框，中間一個深咖啡的圖示（電話、分享、回到頂端、More）。

• 小標籤：深咖啡底、米色字 12.8px／700 大寫，直角（ESTABLISHED IN 2013）。

• 規格卡：1px 深咖啡框、直角，上面粗體小標、下面一段說明（Specifications、Materials、Surface Treatments）。

• 側邊面板：半透明米色、12px 圓角，目錄、聯絡資訊、QR code。

• 電話、地址這類連結：下面一條很細的咖啡色線。

• 要用米色和深咖啡兩色，像銅和圖紙；不要加其他亮色。

• 字用幾何感的 Onest 粗體，偶爾一個單字換成細斜體襯線字做對比。

• 要用細虛線的格線把版面分欄，像工程圖紙。

• 面板和導覽列可以半透明，疊在零件插畫上。

• 陰影只用很淡的米灰，或不模糊的深咖啡實心陰影；不要加大圓角，按鈕、標籤、卡片是直角。