byteTuto 設計規範
概念：▶_ — 一個影片播放按鈕轉化為終端機提示符號。
簽名標語：「Apprends la tech, un byte à la fois.」（一次一個位元組學習科技）
品牌名稱永遠寫作 byteTuto（在一般文字中，絕不使用 Bytetuto、ByteTuto、BYTETUTO 等形式）。
色彩（色票）
| 色票 | 淺色模式 | 深色模式 | 用途 |
|---|---|---|---|
| surface | #F6F5F0 | #0E1116 | 頁面背景 |
| surface-raised | #FFFFFF | #171B22 | 卡片、程式碼區塊 |
| ink | #0E1116 | #F2F1EC | 主要文字 |
| ink-muted | #565B66 | #A3A8B3 | 次要文字 |
| line | #DDDBD2 | #2A2F38 | 分隔線、網點 |
| byte | #B8F03C | #B8F03C | 品牌綠色：磁磚、主要按鈕、色塊 |
| byte-ink | #3B6B00 | #B8F03C | 當綠色作為文字使用時 |
| byte-tint | #E9F9C8 | #24300F | 淺色背景、徽章 |
| on-byte | #0E1116 | #0E1116 | 放置在 byte 或 spark 色塊上的文字 |
| spark | #FF5A1F | #FF6B33 | 重點色：每個畫面僅一個元素使用 |
| tile | #0E1116 | #1E232C | 深色色塊、橫幅 |
| danger | #C4320A | #FF7A5C | 僅限錯誤訊息使用 |
規則：
- 在淺色背景上，絕對不能將
byte(#B8F03C) 作為文字顏色使用 → 請使用byte-ink。 - 在
byte或spark色塊上，絕對不能使用白色文字 → 請使用on-byte。 - 標誌上不得使用漸層或陰影。霓虹光暈效果是動畫效果，並非標誌的一部分。
- 文字與背景的對比度必須 ≥ 4.5:1。
字體（Google Fonts）
- Space Grotesk 700（標題，字距緊縮 −0.02em 至 −0.03em）
- IBM Plex Sans 400/600（內文）
- JetBrains Mono 500（程式碼、命令、類似終端機的小標籤）
形狀
圓角半徑：6px（徽章）、12px（按鈕、卡片）、24px（大區塊，標誌磁磚 = 邊長的 23%）。
自訂圖案：深色背景上使用 line 顏色的點狀網底，byte/spark 色塊可超出邊界。
標誌
標誌是一個圖形（9 單位粗細的單線條，圓頭端點），不是字體：絕對不要用文字重新輸入。
路徑定義在 site/index.html（SVG .logo）。深色背景上：「byte」使用 #F2F1EC，「Tuto」使用 #B8F03C。
單獨符號：site/favicon.svg。
語氣
使用「你」，句子簡短，採用動作動詞。先展示，再解釋。 不使用未經說明的術語，不做誇大承諾。 範例：「2 分鐘安裝 Node」、「那個讓我花了 4 小時的 bug」。
無障礙設計
所有新的動畫效果都必須遵循 prefers-reduced-motion。焦點必須可見（使用 byte 顏色的外框）。