Resend 网站预览
Resend 网站预览

Resend

黑色天鹅绒搭配紫罗兰色霓虹

Resend 位于近乎完全的黑暗之中 — 纯黑色画布,细线石墨边框,以及白底黑字的排版,感觉像是在阅读印在哑光玻璃上的文字。首屏区域不具装饰性:一个96px的无衬线标题(Domaine)与一个3D黑色立方体并列,无渐变渲染,也无营销插图。品牌标识是一个紧致的紫罗兰色(#9281f7),出现在邮箱地址字符串、状态图标和代码示例中,从不用于按钮。等宽字体(Commit Mono)贯穿每一个代码块、徽章和内联标签,使页面读起来如同一个终端被豪华界面包裹。组件采用锐利的直角或柔和的圆角(6px / 16px),低层级,依赖1px边框而非阴影来分隔层次。运动表现克制但富有表现力:首屏文字的淡入滑动、首屏立方体的微妙WebGL旋转,以及悬停时150ms的缓动过渡。

查看原始网站

使用规范

建议采用

  • 使用纯 #000000 作为页面画布 —— 从不使用深灰或染色的深黑色作为背景。
  • 所有UI层之间使用 #292d30 的1px边框分隔,而非阴影。卡片、输入框、代码块均以细线边框与黑色画布形成对比。
  • 任何代码、邮箱地址或面向开发者的字符串均使用 Commit Mono。正文和UI元素使用 Inter。
  • 按钮保持透明填充、1px边框、白色文字:始终使用透明或轮廓按钮,绝不使用彩色填充的按钮作为主要行动号召。
  • 按钮、徽章、输入框使用6px圆角,卡片和代码窗口使用16px圆角。绝不混合 —— 圆角尺度仅两个值。
  • 让紫罗兰色(Iris Violet,#9281f7)标记代码字符串和开发标识符。它是唯一的品牌色,应感觉像语法高亮,而非装饰。
  • 在56px显示尺寸时使用紧致的 -0.05em 字间距,在96px首屏尺寸时使用 -0.01em。这种压缩的字间距是标题显得自信的原因。

建议避免

  • 不要在首屏或区块背景中添加渐变、发光或色彩渲染。画布保持纯黑。
  • 不要使用彩色填充的强调按钮(蓝色、紫罗兰色、绿色)作为主要操作。按钮保持透明或白色文字在黑色背景上。
  • 不要在单个表面使用多个边框圆角。卡片为16px,按钮/徽章/输入框为6px —— 每个组件只选一个。
  • 不要使用彩色卡片背景。卡片置于黑色背景上,带有细线边框;不使用 #292d30 填充。
  • 不要使用阴影来表现层级。设计依赖1px边框和微妙的背景模糊,而非投影阴影。
  • 不要将紫罗兰色与大字号标题搭配作为装饰性标题颜色。它只属于代码和开发标识符。
  • 不要打破单色加一紫罗兰色的设计原则,通过在UI元素中引入多种强调色。状态颜色(绿色、蓝色、红色、琥珀色)仅用于数据或状态指示。