Wope 网站预览
Wope 网站预览

Wope

近黑色基底、胶囊形控件与渐变展示。

页面以近黑色为基底,搭配白色文字。字体采用 Inter V、Rebond Grotesque。视觉特点包括胶囊形控件、渐变展示、大字排版、紧密字距。适合参考的场景:软件产品首页、服务说明页。

查看原始网站

使用规范

建议采用

  • 以 Night Violet #0a0118 作为主导画布,并保持大多数区块处于同一深紫色调家族内。
  • 首屏区域和区块标题使用 Rebond Grotesque 56px 或 72px,搭配 -1.12px 至 -1.44px 的字间距。
  • 正文和导航文本使用 Inter V,常规文本采用 Ash Lilac #9b96b0,强调文本使用 Soft Quartz #ffffff。
  • 按钮和徽章使用 999px 半径;卡片保留 16px 半径,浮层叠加元素使用 10px 半径。
  • 通过 Ultraviolet Core #713dff、Lilac Beam #b7a4fb 和 Horizon Glow #8562ff 渐变构建发光效果,而非使用厚重的投影阴影。
  • 在胶囊形、玻璃卡片和框定表面使用 rgba(255,255,255,0.1) 的 1px 边框。
  • 保持垂直区块节奏较大:主要内容区块使用 108px 的区块间距和 124px 的内边距。

建议避免

  • 不要在主要UI操作中引入明亮的非紫色强调色,如青色、绿色或橙色。
  • 不要使用方形或轻微圆角的按钮;所有控件均为 999px 半径的胶囊形。
  • 不要在页面上放置强对比的纯白色卡片;表面保持深色或半透明,覆盖在 #0a0118 上。
  • 不要使用传统的黑色边框阴影;深度来自模糊、边框和发光渐变。
  • 不要在正文、标签或按钮中使用 Rebond Grotesque。
  • 不要将弱色文本和主色文本合并为单一色调;支持文本保持 #9b96b0,主要内容保持 #ffffff。
  • 不要使用带边框的矩形输入框;输入本身无边框,其表现依赖于容器的处理方式。