設計系統

本頁列出網站使用的所有設計變數與元件樣式。變數與元件樣式統一定義於全站共用樣式表 /_base.css（後台系統設定的全站 CSS）。新增頁面時請直接沿用這些 class 與變數，不要另外寫新的色碼或尺寸。

標誌

標誌有兩個版本，圖形與比例不得更動。淺色底一律使用全彩版；深藍底（頁尾、深色區塊）使用反白版，星星保留金色。最小留白為星星的高度，不得加陰影、描邊或放在照片上。

logo_url 全彩版：白底與淺色底，頁首使用。

footer_logo_white 反白版：深藍底，頁尾使用。

色彩

主色為 --jun-blue-700 #0048A0，用於連結、主要按鈕、啟用狀態與圖示。金色僅作為點綴：logo 星星、標題下的短線、選單啟用底線，以及全頁唯一的重點按鈕；金色永遠不作為白底上的文字色。

品牌藍 Jun Star Blue

--jun-blue-950#04204A

--jun-blue-900#062A5C

--jun-blue-800#073070

--jun-blue-700#0048A0

--jun-blue-600#1358B8

--jun-blue-500#3D72C4

--jun-blue-400#7E95C4

--jun-blue-300#A8B8D0

--jun-blue-200#CFDCEC

--jun-blue-100#E1EAF6

--jun-blue-50#EFF5FA

品牌金 Jun Star Gold

--jun-gold-700#9A7A05

--jun-gold-600#D9A80B

--jun-gold-500#F5C518

--jun-gold-300#F9D95E

--jun-gold-100#FDF3D0

語意色 — 品牌

--brand-primary#0048A0

--brand-primary-hover#073070

--brand-primary-active#062A5C

--brand-accent#F5C518

--brand-accent-hover#D9A80B

--rule-accent#F5C518

語意色 — 背景與邊框

--surface-page#FFFFFF

--surface-subtle#F0F6FA

--surface-tint#E8F0F8

--surface-brand-subtle#EFF5FA

--surface-dark#08234B

--surface-footer漸層

--border-hairline#DCE5F0

--border-strong#C2CEDF

--border-control#7F8FA9

語意色 — 文字

--text-heading#10264F

--text-title#073070

--text-body#42506A

--text-muted#5F6E88

--text-link#0048A0

--text-ondark-muted#B7C4DA

中性灰階 Steel（照片周邊使用，介面文字請用上方文字語意色）

--steel-950#0B0D0F

--steel-900#16191D

--steel-800#22272D

--steel-700#3A4048

--steel-600#545C66

--steel-500#6B7480

--steel-400#909AA5

--steel-300#B9C0C8

--steel-200#D8DDE3

--steel-100#EDF0F3

--steel-50#F7F8FA

--steel-0#FFFFFF

字級

中文與大部分拉丁字皆使用 Noto Sans TC；尺寸、行高與字距皆有對應數值，規格、尺寸與日期一律使用等寬的 IBM Plex Mono。中文內文行高不低於 1.8。

--text-hero
clamp(38–60px) / 1.24
700 · +.02em精密製造全球服務

--text-h2
clamp(28–38px) / 1.3
700核心服務

--text-h3
24px · 700尖端機台設備

--text-h4
20px · 700經營理念

--text-lead
17px / 1.9整合精密加工技術，提供多元化零組件製造服務。

--text-body-size
16px / 1.8駿星專注於精密零組件製造，依循 ISO 9001 品質管理系統，落實每一道製程與品質控管。

--text-small
14px針對半導體設備所需，提供耐酸鹼、高強度之製程耗材與精密零件加工。

--text-caption
13px高精度・高穩定性

--font-mono
IBM Plex Mono1100 x 600 x 600 mm ・ 10,000 RPM ・ (4+5L/1000) μm

間距

以 4px 為基準。版面最大寬度 --page-max 1240px，左右內距 --page-pad 32px，區塊上下留白 --section-y clamp(64px, 7vw, 104px)，卡片內距 --card-pad 24px。

圓角與陰影

整體偏方正，呼應加工件的造型語彙：按鈕、控制項與品管標籤 4px，標籤與小徽章 2px，卡片與圖片 8px。介面不使用膠囊形。陰影一律為近黑柔和陰影，卡片靜止狀態幾乎沒有陰影。

圓角

--radius-xs2px

--radius-sm · control4px

--radius-md · card8px

--radius-lg12px

陰影

--shadow-1

--shadow-2

--shadow-3

--shadow-4

漸層

漸層只有功能性用途，不作裝飾：頁尾底色、照片上的文字保護遮罩，以及讓滿版照片融入色帶的邊緣淡出。邊緣淡出是實色疊層元素，不使用 CSS mask。

--surface-footer頁尾

--scrim-hero首圖遮罩

--scrim-bottom圖說遮罩

--fade-subtle-right淡藍底邊緣淡出

--fade-page-right白底邊緣淡出

元件

以下為網站實際使用的元件樣式，直接複製對應的 class 即可。

按鈕 .btn.btn--solid / .btn--outline / .btn--sm

深色底按鈕 .btn--accent （全頁唯一，僅用於收尾深藍帶） / .btn--ondark

立即諮詢

了解更多

圖示 icons （版型變數，SVG 以 data URI 內嵌，顏色寫死於圖示內）

品管流程 .qc-chain

IQC 進料檢驗
IPQC 製程檢驗
FQC 最終檢驗
OQC 出貨檢驗

服務卡片 .svc-card 與機台卡片 .machine + .spec

標準服務整合精密加工、表面處理與組裝製程，提供穩定可靠的製造服務。查看詳情

CNC 立式加工中心機(艾格瑪 VMC-199)

加工行程: 1100 x 600 x 600 mm
主軸轉速: 10,000 RPM
設備數量: 1 台

能力條 .feature 與編號清單 .indus__list

精密加工能力
高精度・高穩定性

01半導體設備零組件
02各類工業設備零件
03客製化金屬加工

動態

一律使用 --ease-standard cubic-bezier(.4,0,.2,1)。沒有彈跳、沒有視差、沒有自動播放的動畫。卡片滑過時上浮 4px，按壓時縮至 --press-scale .985。

80ms

--dur-instant

按壓

150ms

--dur-fast

顏色／邊框

220ms

--dur-base

卡片浮起

400ms

--dur-slow

圖片放大

700ms

--dur-reveal

進場淡入