YouTube

白色基底、胶囊形控件与细线分隔。

页面以白色为基底，搭配近黑色文字。字体采用 Roboto、YouTube Sans。视觉特点包括胶囊形控件、细线分隔、扁平表面、网格布局。适合参考的场景：内容网站首页、编辑专题页。

查看原始网站

使用规范

建议采用

所有主要文本和图标描边使用#0f0f0f——永远不要使用纯黑色#000000，这种微妙的暖调定义了品牌调性
链接、轮廓按钮边框/文本以及激活导航状态必须使用#065fd4
所有按钮和搜索输入的圆角半径统一为18px（胶囊形状）
导航项使用Roboto 14px，正文使用13px——在品牌标识外，字体大小绝不能超过16px
内容区块之间使用空白间距分隔，而非分隔线——让网格呼吸
左侧边栏宽度固定为240px且保持固定位置
卡片边界使用1px的#c6c6c6或#d3d3d3，绝不使用阴影

建议避免

永远不要使用#000000——YouTube的文本黑色是#0f0f0f
绝不为卡片、弹窗或按钮添加阴影——系统设计本就追求扁平化
绝不将#065fd4用作填充按钮背景——它仅作为轮廓型操作和链接色使用
绝不将YouTube Sans用于品牌标识以外的场景——它不是标题字体
绝不将#ff0000用于品牌标识之外——它是被锁定的品牌标志，非功能性强调色
绝不使用渐变——系统设计本就为扁平化
在品牌标识外，字体大小绝不能超过20px——字体层级上限为小号

正在读取模板权限…

使用指南

# YouTube — Style Reference
> minimalist broadcast console
 
**Theme:** light
 
Source measurements are normalized; roles and recommendations are interpreted. Font summary lists are independent, not paired by position. HTML examples are reconstructions, not source components.
 
YouTube's interface is a content-first utility: a near-monochrome white canvas with a permanent left sidebar, minimal header chrome, and one blue accent that marks every interactive link. The design language is deliberately restrained — it doesn't compete with video thumbnails, it just gets out of the way. Typography is Roboto at compact functional sizes, with YouTube Sans reserved exclusively for the wordmark. Components are flat and utilitarian — pill-shaped buttons, hairline borders, and zero elevation. The signature black is #0f0f0f, not pure #000000, giving the entire interface a slightly softer, less aggressive feel while maintaining maximum contrast against white.

YouTube

使用规范

建议采用

建议避免

相似设计语言

Spotify

Lottielab

SoundCloud

Twitch

Programa

Apple (España)