Val Town 网站预览
Val Town 网站预览

Val Town

近白色基底、细线分隔与扁平表面。

页面以近白色为基底,搭配深蓝色文字。字体采用 IBM Plex Sans、iA Writer Mono。视觉特点包括细线分隔、扁平表面、分屏构图、网格布局。适合参考的场景:开发者工具官网、API 服务介绍页。

查看原始网站

使用规范

建议采用

  • 每个视口使用 Cyan Pulse #00bcff 作为唯一填充按钮——主要操作——并搭配一个透明描边按钮作为次要操作
  • 所有正文与展示文本均使用 IBM Plex Sans 400,字间距 -0.025em;字号增大时进一步收紧
  • 将 Plasma Violet #8e51ff 和 Signal Magenta #e12afb 保留用于标题或句子中的单个单词,绝不用于完整元素
  • 所有代码、文件名及技术标签均使用 iA Writer Mono 渲染;绝不使用 Plex Mono 或系统默认的等宽字体作为替代
  • 分层表面顺序为:Canvas(#e2e8f0)→ Paper(#ffffff)→ Mist(#f1f5f9);使用细线边框 #e2e8f0 而非阴影来分隔卡片
  • 仅在首屏代码编辑器卡片上添加柔软的 20px 阴影;其余所有组件保持扁平
  • 按钮和认证控件使用 8px 圆角,卡片和代码编辑器使用 12px,小日期胶囊控件使用 4px

建议避免

  • 禁止引入第二个饱和的 CTA 颜色;Cyan Pulse 是系统中唯一的填充操作色
  • 禁止将 Plasma Violet 或 Signal Magenta 应用于背景填充、边框或完整句子——它们仅作为单词级强调色
  • 禁止为模板卡片、证言卡片或标识栏添加阴影;这些表面保持扁平
  • 禁止将正文或展示文本设置为除 IBM Plex Sans 以外的任何字体,或在 iA Writer Mono 代码块中用 IBM Plex Sans 替代
  • 禁止在非首屏代码输出亮点场景中使用 128px 的标题字号——该尺寸仅用于该特定时刻
  • 禁止同时使用 Carbon #314158 作为文本和深色背景;需要深色填充时使用 Graphite #1d293d
  • 禁止在任何表面添加渐变——系统设计为扁平,青色/紫罗兰色/洋红配色已承担了渐变通常完成的功能