Handshake

白色基底、胶囊形控件与渐变展示。
页面以白色为基底,搭配近黑色文字。字体采用 NoiGrotesk、SansPlomb。视觉特点包括胶囊形控件、渐变展示、紧密字距、网格布局。适合参考的场景:软件产品首页、服务说明页。
查看原始网站使用规范
建议采用
- 仅在每个页面最重要的操作上使用 #d3fb52 Voltage Lime —— 即 CTA(行动号召)、激活的导航胶囊和首屏渐变终点
- 在所有 NoiGrotesk 使用场景中,将字体特性设置设为 'ss03' 开启、'ss06' 开启、'ss12' 开启——这些风格集是品牌身份的一部分
- 为所有卡片、输入框和大容器设置 24px 圆角;按钮和导航项为 8px;标签和芯片为 9999px
- 仅在首屏和氛围性区块背景中使用从青到青绿的径向渐变——禁止用于内容卡片或 UI 表面
- 所有间距以 8px 为基准单位:8、16、24、32、40、80、120px
- 将画布保持 #ffffff 占整个页面的 90%——仅在首屏渐变和 #052326 脚部区域使用深色表面
- 在 40px 字号时设置字间距为 -0.025em,并随着字号增大进一步收紧——系统依赖密集的字间距
建议避免
- 不要在正文、边框、图标或非操作表面使用 #d3fb52 —— 它是操作色,而非装饰色
- 不要使用多个色彩——系统为单色,仅有一个强调色;引入第二个色调会破坏二元结构
- 不要在卡片或面板上添加阴影——深度来自 24px 圆角和细线边框,仅此而已
- 不要在 UI 尺寸下用系统字体替代 NoiGrotesk —— 定制字形和特性设置承载品牌身份
- 不要在单页中重复使用显示字号(201px SansPlomb)——其尺寸本意是作为唯一声明存在
- 不要将 24px 输入框或卡片的圆角缩小到与 8px 按钮圆角一致——柔软/柔软与紧凑的对比是刻意设计的
- 不要用 #000000 作为大面积背景——系统偏好 #ffffff 画布,仅用 #052326 作为唯一深色表面