Dialog

近白色基底、胶囊形控件与大字排版。
页面以近白色为基底,搭配近黑色文字。局部操作控件以橙色强调。字体采用 PP Radio Grotesk Light、Inter。视觉特点包括胶囊形控件、大字排版、宽松留白、网格布局。适合参考的场景:品牌电商首页、商品展示页。
查看原始网站使用规范
建议采用
- 仅在 32px 及以上字号的标题中使用 PP Radio Grotesk Light(字重 400);绝不可在大字号标题中用 Inter 替代
- 仅将 #f69251 应用于主要行动号召按钮 —— 绝不可用于文字、图标、装饰性图形或背景
- 所有按钮的圆角半径统一设为 28px(胶囊形状),无论按钮宽度如何;这是系统中唯一的圆润 UI 元素
- 保持 #f7f7f7 作为页面背景,所有卡片表面使用 #ffffff —— 2 色近白表面系统定义了视觉平面
- 正文与导航文字使用 Inter 在 -0.01em 至 -0.02em 字间距(字间距) —— 绝不可使用默认或正向字间距
- 卡片阴影设为 rgba(24,24,37,0.12) 0px 2px 3px -2px —— 单一低偏移阴影,绝不可叠加高抬升的阴影
- 为证言和功能卡片设置 24px 圆角半径,并带有 24px 内部内边距 —— 大容器不可使用更小的圆角
建议避免
- 不可将 #f69251 用于超过一个元素类别(仅限行动号召) —— 在图标、文字或装饰中引入橙色会破坏单一强调色的设计原则
- 不可对卡片容器应用小于 24px 的圆角半径 —— 8px 或 12px 的圆角属于内部 UI 芯片,而非布局层级的卡片
- 不可在 PP Radio Grotesk 中使用粗体或重字重(600 及以上) —— 轻量无衬线字体在高字重下会失去其身份特征
- 不可引入彩色区块背景(蓝色、绿色、紫色条带) —— 区块变化仅来自 #f7f7f7 与 #ffffff 的切换
- 不可使用大于 8px 模糊半径或不透明度高于 0.12 的外扩阴影 —— 抬升系统刻意与页面平面保持平齐
- 在内页中不可裁剪或溢出摄影图像至页面边缘 —— 摄影内容仅存在于 24px 圆角半径的卡片容器内
- 不可将输入字段设置为圆角边框 —— 输入框使用 0px 或极小圆角,以区别于胶囊按钮系统