[STYLE] 統一全站次要資訊字體規範並更新 UI Skill 文件
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 1m9s

This commit is contained in:
2026-03-17 17:44:09 +08:00
parent fc79148879
commit 99243d4206
7 changed files with 52 additions and 33 deletions

View File

@@ -319,6 +319,25 @@ y items-center gap-2">...</button>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
```
## 10. 字體與技術資訊規範 (Typography & Technical Data)
為了確保全站「次要資訊」具備極一致的高級感,必須遵守以下「機台標竿」規範:
### 核心樣式級別 (Core Typography Scale)
| 資訊類型 | 客戶/配置名稱 (標題) | 技術代碼 (ID, SN, Code) | 分隔符號 (•) |
| :--- | :--- | :--- | :--- |
| **字體族** | `font-sans` (Plus Jakarta Sans) | `font-mono` (微縮型單雙格) | `font-sans` |
| **尺寸** | `text-base` | `text-xs` (不可使用 10px) | `text-xs` |
| **字重** | `font-extrabold` (800) | `font-bold` (700) | `font-bold` |
| **字距** | `tracking-tight` (-0.02em) | `tracking-widest` (最寬) | `tracking-normal` |
| **格式** | 保持原始名稱 | `uppercase` (強制大寫) | N/A |
| **色彩** | `slate-900` / `slate-100` | `slate-500` / `slate-400` | `slate-300` / `slate-700` |
### 實作禁忌與準則
- **禁止斜體 (No Italics)**: 名稱欄位嚴禁附帶 `italic`(特別是標題或配置名稱),保持直挺專業感。
- **作用範圍 (Mono Scoping)**: `font-mono` 僅限作用於「純英文/數字」的代碼。Email 或分隔點必須回歸 `font-sans` 以確保圓潤。
- **權重載入 (Font Weights)**: 確保 HTML Header 載入了 `800``900` 權重,避免瀏覽器模擬出的假粗體。
---
> [!IMPORTANT]
> **開發新功能前,必須確認 `app.css` 中的 `.btn-luxury-*` 系列組件是否滿足需求。**