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
- 禁止在任何表面添加渐变——系统设计为扁平,青色/紫罗兰色/洋红配色已承担了渐变通常完成的功能