Twitch

浅色基底、视频展示与分屏构图。
页面以浅色为基底,搭配近黑色文字。字体采用 Inter、Roobert。视觉特点包括视频展示、分屏构图、网格布局。适合参考的场景:音视频产品介绍页、媒体内容展示页。
查看原始网站使用规范
建议采用
- 所有按钮、标签、头像和输入框都使用 9000px 圆角。胶囊形是网站默认形态,而不是方角的备选方案。
- 正文保持在 11–14px 的 Inter 范围内;18px 的 Roobert 只用于文字标志和区块标题。
- #eb0400 仅表示 LIVE 状态,绝不用于错误、破坏性操作或装饰。
- 页面画布使用 #efeff1,卡片表面使用 #ffffff,不要倒置成白色页面配灰色卡片。
- 文字标志、链接和底部社区横幅使用 Deep Iris #5c16c5;实心操作按钮使用 Twitch Purple #9147ff。
- 所有直播缩略图和视频框架都采用 4px 圆角,以区别广播内容框架与界面胶囊。
- 每张直播缩略图都必须配有左上角红色 LIVE 徽章,以及左下角深色观看人数标签。这是一项必须遵守的视觉约定。
建议避免
- 按钮或标签不要使用 8px 或 12px 圆角。系统仅有 4px 的卡片与缩略图圆角,以及 9000px 的交互元素圆角。
- 不要引入第二种红色。#eb0400 是唯一红色,而且只表示“直播”。
- 文字标志或大型品牌表面不要使用浅紫色 #9147ff。Deep Iris #5c16c5 承担标志级分量,Twitch Purple 承担点击操作级分量。
- 除 Roobert 展示字体外,正文不要小于 11px 或大于 14px。紧凑的字号范围是设计密度的标志。
- 卡片或导航元素不要添加投影。系统采用平面表面和 1px 细线边框,而非悬浮效果。
- LIVE 徽章不要使用 9000px 圆角,胶囊也不要使用 4px 圆角。这两种尺度绝不互换用途。
- 不要使用渐变。系统全部采用平面填充,纵深来自表面叠层,而非颜色过渡。