ToDesktop 网站预览
ToDesktop 网站预览

ToDesktop

白色基底、渐变展示与细线分隔。

页面以白色为基底,搭配近黑色文字。局部操作控件以蓝色强调。字体采用 Aeonik Pro、Inter。视觉特点包括渐变展示、细线分隔、扁平表面、居中构图。适合参考的场景:技术产品首页、开发工具说明页。

查看原始网站

使用规范

建议采用

  • 主要 CTA 填充色必须严格使用 #0036ff ——这是唯一的饱和色,必须保持唯一性
  • 所有按钮、标签及胶囊形元素的边框半径必须设置为 999px
  • 标题的字间距设为 -0.01em 或 -0.015em ——在展示文本中绝不可使用默认值或正向字间距
  • 使用 1px 透明细线 #e5e7eb 边框进行结构分隔,而非阴影
  • 保持深色首屏渐变的方向性(顶部为白色到底部为近乎黑色)——绝不可反转
  • 大写眉题标签采用Geist Mono,字间距为+0.03em。
  • 卡片的边框半径设为 14-24px ——避免使用尖锐的 0px 或过大的 40px 以上数值

建议避免

  • 不要引入第二个饱和色——该系统本质上是单色系,仅有一个电光蓝点缀
  • 不要在展示标题上使用粗体 700 字重——Aeonik Pro 的 500 字重是上限
  • 不要使用厚重的阴影——阴影应几乎不可察觉,或仅为 1px 细线
  • 不要在交互元素上使用方形角(0px)——最小值为 6px
  • 不要混合深色与浅色区域的视觉风格——深色首屏与明亮功能区是两个独立的环境
  • 不要将 #0093ff 用于填充按钮——该色仅用于链接和辅助元素,不应用于主要操作
  • 不要在正文内容中使用 Inter 字体超过 18px ——24px 及以上时应由 Aeonik Pro 取代