Charte byteTuto
概念 : ▶_ — 视频的播放按钮变为终端提示符。
签名 : « 学技术，一次一个字节。 »
名字始终写作 byteTuto（正文中永远不要写成 Bytetuto、ByteTuto、BYTETUTO）。
颜色 (tokens)
| Token | 浅色模式 | 深色模式 | 用途 |
|---|---|---|---|
| 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。- logo 上不要使用渐变或阴影。 “霓虹”光效是动画装饰，不是 logo。
- 文本/背景对比度 ≥ 4.5:1。
字体 (Google Fonts)
- Space Grotesk 700 (标题，字间距 −0.02em 至 −0.03em)
- IBM Plex Sans 400/600 (正文)
- JetBrains Mono 500 (代码、命令、小标签，终端风格)
形状
圆角 : 6px（徽章）、12px（按钮、卡片）、24px（大色块、logo 瓷砖 = 边长的 23%）。
自定义图案 : 深色背景上使用 line 颜色的点网格，byte/spark 色块可超出边缘。
Logo
Logo 是绘图（单线条 9 单位，圆角端点），不是字体：永远不要用文本重新输入。
路径位于 site/index.html（SVG .logo）中。深色背景上：“byte”用 #F2F1EC，“Tuto”用 #B8F03C。
仅符号：site/favicon.svg。
语调
使用“你”，短句，动词驱动。先展示再解释。 不使用未解释的术语，不夸大承诺。 示例：“2 分钟安装 Node”、“那个让我花了 4 小时的 Bug”。
可访问性
所有新动画必须遵循 prefers-reduced-motion。焦点可见（outline 使用 byte）。