Warp

近黑色基底、胶囊形控件与紧密字距。
页面以近黑色为基底,搭配近白色文字。字体采用 Matter Regular、Matter。视觉特点包括胶囊形控件、紧密字距、分屏构图、居中构图。适合参考的场景:技术产品首页、开发工具说明页。
查看原始网站使用规范
建议采用
- 所有暗色背景上的主要文本使用 #faf9f6(骨色),绝不用 #ffffff,温暖色调避免了临床的生硬感
- 在显示尺寸下强力应用负字间距:56px 时为 -2.24px,42px 时为 -1.13px,24px 时为 -0.29px
- 所有操作按钮使用 33px 半径,分类标签使用 50px 半径——胶囊形是系统的按钮特征
- 标题在 42px 以内使用 Matter 400(而非 700);信任字号和字间距来传递层级关系
- 通过 #121212 → #1e1e1d → #333333 → #40403f 的阶梯叠加表面,绝不使用阴影实现层级感
- 将 #cbb0f7(磷光紫)专用于图标描边、代码高亮和链接强调——绝不用于填充按钮或大面积背景
- 保持间距紧凑:行内元素 10px,组件内边距 8-12px,区块分隔 64px
建议避免
- 不要引入第二个色彩强调——0% 色彩度是系统的核心,而非疏漏
- 不要使用阴影或模糊效果来分隔卡片;系统通过平滑 1px 边框和表面阶梯实现分层
- 不要在正文或 UI 标签中使用粗体(700)字重——界面中仅 Matter 400 和 600 为可用字重
- 不要在暗色背景上使用纯白(#ffffff)作为文字颜色——温暖的 #faf9f6 是刻意选择
- 不要为按钮使用 9999px 半径——系统采用诚实的 33px(略小于完整胶囊)用于填充操作
- 不要在背景、按钮或卡片中添加渐变——表面处理严格保持平面
- 不要使用除 Matter 以外的任何字体用于标题和 UI;Inter 仅作备用,绝非风格化选择