Featurebase

近黑色基底、紧密字距与细线分隔。
页面以近黑色为基底,搭配白色文字。字体采用 Inter。视觉特点包括紧密字距、细线分隔、居中构图、产品图像展示。适合参考的场景:SaaS 产品官网、功能介绍页。
查看原始网站使用规范
建议采用
- 使用 Void Canvas #050608 作为默认页面背景,并保留 Ink Surface #0a0b0f 至 Steel Panel #151822 用于嵌套层。
- 将公共导航和紧凑按钮设置为 Inter 14px/500,行高 20px。
- 使用 Inter 48px/500 且字间距为 -0.96px 用于显示角色,Inter 36px/500 且字间距为 -0.72px 用于主要区块标题。
- 使用 rgba(255,255,255,0.92) 与 Charcoal Panel #0f1219 文字搭配,用于填充的公共转化按钮。
- 按钮和输入控件使用 12px 圆角,卡片和产品框使用 16px 圆角,胶囊形控件和圆形启动器使用 9999px 圆角。
- 使用 1px Slate Edge #1f1e2a 边框来划分深色产品区域,并勾勒深色次级控件的轮廓。
- 保持 Signal Violet #7064f2 的浓度集中在标志、选中状态以及软性产品演示的照明中。
建议避免
- 不要引入明亮颜色的填充转化按钮;公共填充操作仍保持为 rgba(255,255,255,0.92)。
- 不要为按钮设置小于 12px 的圆角,或为产品卡片设置大于 16px 的圆角。
- 不要将显示标题设置为 600 或 700 字重;使用 Inter 500 在 48px 或 36px。
- 不要用浅灰色或白色分隔线替代 Slate Edge #1f1e2a 分隔线。
- 不要将合作伙伴标志转为带边框的卡片;保持其在 Void Canvas #050608 上无框显示。
- 不要将 Signal Violet #7064f2 涂抹到正文、全屏背景或每个控件上。
- 不要使用厚重的明亮阴影;仅在浮动面板和提升的链接上使用提供的黑色阴影堆叠。