UI/UX Design System v1.0

介面設計系統規範

將品牌「純粹黑白雙生」與 46° 熾羽之刃鋒利美學具象化為數位介面標準。定義跨平台原生繁中字型棧、Tailwind 語意相容 Tokens、按鈕互動階層與業務導向純向量微圖標系統。

色彩階梯與 Design Tokens (Palette & Semantic Roles)

Tailwind Zinc Compatible

950 #09090b

900 (Surface) #121215

850 (Elevated) #18181c

800 (Border) #27272a

700 #3f3f46

600 #52525b

500 (Muted) #71717a

400 (Secondary) #a1a1aa

300 #d4d4d8

200 (Light Border) #e4e4e7

100 (Primary) #f4f4f5

White #ffffff

跨平台繁中字型棧 (Typography Hierarchy & Font Stacks)

Apple 蘋方微軟正黑思源黑體

--font-sans: 'Inter' 'PingFang TC' 'Microsoft JhengHei UI' 'Noto Sans TC' sans-serif UI & Body Text

Display · 次世代自主智能雲端架構 SERAMONX 46°

Heading 1 · 極致工程美學與微服務架構治理

Heading 2 · 繁體中文與西文字形光學對齊測試（蘋方 / 正黑體平滑渲染）

Body Base · SERAMONX 採用純粹黑白雙生作為核心視覺識別，母標由羽冠 Crest、中央骨幹 CoreX、左羽刃 LeftWing 與右羽刃 RightWing 四大和風部件構成，具備 10px 負空間通透切割。字體排版在 macOS Retina 享有蘋方平滑筆劃，在 Windows PC 享有微軟正黑體的飽滿次像素對齊，弱網離線絕不失真。

--font-mono: 'JetBrains Mono' 'SF Mono' 'Consolas' ui-monospace, monospace Data, Metric & Code

>seramonx deploy --service=quotabar --cluster=ap-northeast-1

[STATUS] CoreX Spline Fitting: 52 Beziers (Δx = 0.00px · 100% Symmetrical)

[ASSET] Baked seramonx_vertical_lockup_dark_800.png via @resvg/resvg-js (Analytical AA)

8px 空間網格與俐落幾何圓角 (Spacing Grid & Radii)

8px Baseline System

8px 空間網格階梯 (Spacing Scale)

--space-2 (8px)

--space-4 (16px)

--space-6 (24px)

--space-8 (32px)

--space-12 (48px)

--space-16 (64px)

幾何圓角梯隊 (Geometric Radii)

sm · 6px (Badge)

md · 10px (Button)

lg · 16px (Card)

xl · 22px (Hero Frame)

完整按鈕系統實機展示 (Comprehensive Button System)

3 Variants 3 Sizes 5 States

Primary (黑白雙生反轉)

最高行動召喚 (CTA)，全站最具決定性動作。

Secondary (微表面細線框)

標準操作、跨頁跳轉與微調控制項。

Ghost (幽靈透明按鈕)

導覽列輔助連結、對話框取消、靜態開關。

業務導向純向量微圖標系統 (Micro Vector Icons)

1.5px Stroke · currentColor Response

專為數位介面與核心操作量身打造，以 1.5px 精密等寬線條進行幾何放樣。全數支援色彩語意繼承 (currentColor)，於深淺色模式下維持極致的高清晰度與秩序感：

Contrast Circle

黑白雙生模式切換環

Download Tray

極簡幾何資產下載托盤

Copy Blocks

幾何雙層參數複製塊

Arrow Line

破空推進折線細箭頭

External Link

跳轉外部生態指引標

Checkmark

驗收合規狀態指示標