字标与标记
字标使用 League Spartan Black，橙色方点的位置与比例固定。
Next Token / Design system
设计系统
品牌、排版、颜色与界面规范
适用于 Next Token 网站的视觉样式、组件和页面布局。
01 / Identity
品牌识别
品牌识别由字标、橙色方点、暖纸底色和录制现场摄影组成。
界面构成
界面使用直线布局、统一对齐线和细分隔线。
摄影与封面
品牌摄影使用真实录制现场，节目封面按原始比例完整显示。
02 / Typography
字体与层级
字体按品牌字形、中文、英文与代码分别定义。字号以 rem 为准；下列 px 按 16px 根字号换算。48rem 为移动与桌面层级的分界，流式字号标注上下限，行高使用比例。
品牌拉丁字形
Next Token · 0123456789
League Spartan Black用于字标、品牌展示标题及指定数字。仅加载本地 900 字重；不用于长篇正文。标准 Logo 使用轮廓文件。
League Spartan 不提供中文字形。混排中的中文使用系统中文字体序列。
中文正文与界面
词元之外，正在发生的世界。
PingFang SC → Hiragino Sans GB → Microsoft YaHei → Noto Sans CJK SC → Noto Sans SC → sans-serif用于中文标题、正文、按钮与元信息。macOS / iOS 通常使用苹方，Windows 通常使用微软雅黑；其他系统按已安装字体依次回退。
采用设备已有字体，不额外下载中文字体。正文 400，强调 600，标题 700；品牌展示可请求 900，实际粗细取决于系统字体可用字重。
英文正文与界面
Ideas, grounded in experience. 0123456789
-apple-system → BlinkMacSystemFont → Segoe UI → sans-serif用于英文正文、导航、按钮和中英混排中的拉丁字母。Apple 系统使用系统无衬线字体，Windows 优先 Segoe UI，其他平台使用系统 sans-serif。
中文与英文共享 --sans 字体栈，由字符覆盖范围选择字体。正文 400，强调 600，标题 700；条目标题使用 650，按字体可用字重匹配。
代码与技术标注
--type-body: 1.0625rem;
ui-monospace → SFMono-Regular → Consolas → monospace用于代码、token 名称和技术参数，不用于正文段落。表格数字使用等宽数字特性对齐。
字号遵循元信息层级；完整字体栈保留系统回退。
中文与英文采用相同的字号层级，中文正文行高为 1.8–1.85，标题为 1.25；品牌展示行高为 1.15。正文不额外增加字距；短英文大写标签可使用正字距。英文单词自然换行，中文按字形断行。
品牌主标题
type-hero不只预测，下一个词元。
页面标题
type-title来自中文世界的 AI 现场观点
阅读标题
heading-reading-title从一段对谈，到一个新问题
展示章节
heading-section-display一张开放的圆桌。
内容章节
heading-section-content这一期，聊了什么？
辅助章节
heading-section-compact相关人物与产品
订阅章节
heading-follow-display继续聊下去。
条目标题
type-entry把经验放回真实语境
正文
type-body从真实使用出发，讨论技术、产品、创业与创作。
界面
type-ui搜索节目、人物与产品
元信息
type-metaNext Token｜词元之外
AI、Agent 与创作 · 0123456789 · #006
03 / Color
颜色体系
Logo 固定使用暖纸、墨黑与信号橙，色号分别为 #f1eee5 / #111111 / #ff4b18。扩展色与用途变体用于网站界面。 品牌素材使用同一套名称与色号 →
基础色承载大部分界面，信号橙建立品牌识别，远空蓝辅助信息组织。语义色只表达明确的状态。
强调色系
信号橙为主强调色，远空蓝为辅助色；包含基准、浅底与文字变体；信号橙另有深底使用的浅色变体。基准色用于图形，文字色用于浅底上的小字号文字与图标。
信号橙
主强调色 · 品牌识别与选中状态
基准
--signal品牌方点与图形强调
浅底
--signal-soft选中控件的背景
浅色
--signal-light深色背景上的强调文字
文字
--signal-text浅底上的强调文字与焦点
远空蓝
辅助色 · 信息承载与内容分组
基准
--sky辅助色块与编辑图形
浅底
--sky-soft信息面板与表格重点行
文字
--sky-text浅蓝底上的文字与图标
大字适配：--signal-display #f24816，仅用于暖纸底上的品牌大标题。
基础色
基础色用于页面背景、内容表面、正文和辅助文字。
暖纸
--paper页面底色
暖白
--white输入框与阅读表面
纸影
--surface次级区域与禁用背景
墨黑
--ink正文、主操作与反色背景
淡墨
--muted辅助文字与元信息
边界用途引用墨黑透明度或淡墨边界变体，分为内容分隔、结构分隔与控件边界。见 线条与叠层。
补充色与变体
暖姜用于人物标记与分类识别；淡墨变体用于反色文字与控件边界。用途别名引用标准色定义。
暖姜
--gold柔和姜黄色的辅助识别色，用于人物标记与分类区分，不用于正文。
淡墨 · 浅色
--muted-light深色背景上的辅助文字
淡墨 · 边界
--muted-border浅色背景上的控件边界
搭配规则
默认阅读
暖纸底 + 墨黑文字
--paper / --ink辅助信息
浅蓝底 + 深蓝文字
--sky-soft / --sky-text信号橙用于品牌强调与选中状态，远空蓝用于辅助信息。浅蓝底搭配墨黑或深蓝文字，深色背景搭配浅色文字。
功能图标继承所在控件的文字色；Next Token 标识使用 Logo 固定色；媒体平台与合作伙伴标识使用各自的品牌颜色。 查看图标用色 →
04 / Layout
尺寸与布局
页面最大宽度 88rem，正文最大宽度 46rem。手机侧边距从 1.25rem 起，基础间距为 0.25rem。尺寸以 rem 定义并标注计算后的 px；根字号为 16px 时，侧边距和基础间距分别为 20px 与 4px。
- rem
- 字号、间距、内边距、控件尺寸与阅读宽度，随根字号一起调整。
- px
- 边框、分隔线与焦点轮廓使用 1px / 2px。px 是 CSS 像素，不等于固定的物理屏幕像素；浏览器页面缩放仍会放大线条。
- em · % · fr
- 图标可跟随文字使用 em；列宽用百分比或 fr；行高用无单位数值。
space-10.25rem · 4pxspace-20.5rem · 8pxspace-30.75rem · 12pxspace-41rem · 16pxspace-61.5rem · 24pxspace-82rem · 32pxspace-123rem · 48pxspace-164rem · 64px05 / Rules & layers
线条与叠层
线条分为内容分隔、结构分隔、控件边界和强调线。默认线型为实线，粗细为 1px 或 2px。
06 / Tables
表格规范
表格文字默认 0.875rem，表头 0.8125rem；单元格内边距为 0.75rem × 1rem。默认只有水平细线，文字左对齐，数值右对齐并使用等宽数字。
| 角色 | rem | px | 用途 |
|---|---|---|---|
| 正文 | 1.0625 | 17 | 长文与说明 |
| 界面 | 0.875 | 14 | 按钮与表格 |
| 桌面控件 | 2.5 | 40 | 最小高度 |
| 触屏控件 · 重点行 | 2.75 | 44 | 更大的触摸区域 |
- 表头下方使用 1px 结构线，数据行使用 1px 轻分隔线。默认不画外框与竖线；多组数据的比较矩阵可增加必要的竖向分组线。
- 高密度版本内边距为 0.5rem × 0.75rem，不缩小正文；重点行使用浅蓝底和文字标记。静态行不显示手形或可点击的悬停效果。
- 保留表格标题、列标题和行标题。空值显示破折号并说明含义；宽表在容器内滚动，不压缩文字，也不撑宽整个页面。
07 / Iconography
图标与标识
图标按功能、媒体平台和品牌标识分类。功能图标继承文字颜色；平台与品牌标识保留各自的轮廓、比例和颜色，统一展示区域与对齐方式。
08 / Interaction
交互控件
桌面控件最小高度为 2.5rem，触屏为 2.75rem。根字号为 16px 时分别为 40px 和 44px。控件圆角为 1px。控件支持键盘和触摸操作，键盘焦点使用外轮廓标识。
09 / Reading
正文排版
节目介绍
Next Token Weekly 是一档 AI 对谈节目，内容涉及技术、产品、创业与创作。节目页面包含内容简介、章节目录和参考资料。
节目内容包括音频、视频和文字稿。
重要的概念保留解释，提及的人物和产品链接到 资料库。节目详情页提供完整对谈的访问入口。
- 清晰的章节与完整的上下文
- 可访问的链接与可核对的来源
身份标记
人物用色是标准色的固定别名，配合姓名、头像与 2px 侧线识别身份。姓名使用墨黑，未指定身份使用淡墨。
杨攀
歸藏
橘子
向阳乔木人物标识由头像与姓名组成，身份色用于辅助区分。静态标识用于署名；链接形式用于访问人物页面，并提供悬停与键盘焦点状态。
分类链接
分类使用不同底色，文字保持墨黑。默认不透明度 8%，强调模式 22%；键盘聚焦分别为 16% 和 30%，同时显示下划线与轮廓。
文本状态
搜索命中：Next Token
定位目标：当前跳转到的段落。
搜索命中与定位目标共用 信号橙 · 浅底；定位目标另加 2px 信号橙轮廓。
搜索词使用 0.125em × 0.2em 内边距，换行时逐行保留底色留白。定位目标底色外扩 0.375rem，轮廓与底色边缘间距为 3px。高亮范围独立于段落布局。
注释块
10 / Composition
组合示例
内容卡片由封面、标题、元信息、分类标签与操作入口组成，使用统一的字号、颜色与控件规范。
