OpenDesign·你的设计资产库

网页参考

Resend

黑色首屏采用左侧衬线标题和操作，右侧是低明度立体方块组合。

Developer ToolsSaaSCleanPremiumDark Mode
Resend 网站截图

理解与复用

从这份设计中借鉴什么

基于收录时的历史截图解读

设计亮点

  • 衬线标题与技术主题形成辨识
  • 右侧暗色视觉未挤占左侧阅读区域

适合什么项目

  • 开发者服务
  • 技术产品品牌页

如何带进你的设计

  • 用清楚的产品类别标题配合简短说明
  • 装饰图与文字保持分栏并设置移动端替代

使用边界

  • 无法从截图确定字体名称或三维图形制作方式
  • 仅依据已检查的历史预览；未核实现行网站、交互、精确 Tokens 或素材授权。

此解读由 Agent 编写，尚未经过人工终审；不代表原作者规范或使用授权。

01

设计气质 DNA

电子邮件基础设施开发者API事务性可靠性

一座黑色巨石，或为工程师打造的精密工具。

02

色彩

#44FFA4Accent
#F0F0F0Ink
#A1A1A1Ink soft
#000000BG
#141517BG quiet
#70757EMuted
rgba(217, 237, 254, 0.15)Line

高对比度单色搭配单一霓虹强调色，以传递现代感与技术精确性。

03

字体

transitional-serif · grotesque-sans · monospace

  • display76px · 400

标题使用精炼的过渡衬线体，字距紧凑。 · 正文与界面文字使用中性无衬线体。 · 代码示例使用专用等宽字体。

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

采用标准 4px 基准网格，导航和主视觉区域留有充裕的内边距。

05

表面 (圆角 / 阴影 / 边线)

sm · 4px
md · 8px
lg · 16px
pill · 999px

细微的 1px 边框仅用于分隔元素和代码块轮廓，克制使用。

rgba(176, 199, 217, 0.145) 0px 0px 0px 1px · rgba(0, 0, 0, 0.1) 0px 1px 3px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全宽深色主视觉区域，文字左对齐，右侧悬浮一个 3D 物体。

07

动效与交互

150msmicro
200mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

交互元素的颜色、背景和 transform 属性采用 0.15 秒的细微过渡。 · 悬停状态采用平滑的透明度与 transform 变化。

细微的颜色和透明度变化，通常伴随光标变为指针。 · 通过标准系统过渡提供即时视觉反馈。

08

组件

  • button 深色背景上的实心白色文字，带细微边框；胶囊状的「开始使用」行动号召。
  • card 深色代码编辑器窗口，配有彩色圆点和语法高亮。
  • chip 带细微边框和箭头的轮廓式胶囊标签。
  • input 深色输入框，带细微边框，符合开发者工具美学。
  • hero 大型衬线标题、副文案，以及一个突出的 3D 立方体视觉。

09

文案语气与禁用清单

  • 语气 专业、直接、技术化，但不过于正式。
  • 标题风格 粗体、富有表现力的衬线陈述，用以阐释产品价值。
  • 按钮文案 以行动为导向的简洁指令，如「开始使用」和「文档」。
  • 不要使用明亮的多色背景——截图显示环境以黑色和深灰色为主。
  • 不要在标题中使用俏皮或圆润的无衬线字体——截图显示展示文字使用精炼的过渡衬线体。
  • 不要在容器上使用过多的投影——截图显示主要是平面表面配合细微的 1px 边框。
  • 不要使用密集、文字过多的布局——截图显示有大量留白和聚焦的主视觉信息。
  • 不要使用低对比度文字——截图显示深色背景上使用高对比度的白色和浅灰色文字。
  • 不要使用多种多样的强调色——截图显示为特定高亮区域使用了一种克制的霓虹绿色。
  • 避免: 避免使用过于随意或「创业兄弟」式的语言。
  • 避免: 避免使用晦涩难懂、模糊核心价值主张的复杂术语。
  • 避免: 避免使用分散主要信息的杂乱布局。

10

包内真实截图

Resend — 桌面首屏（hero）
桌面首屏（hero）
Resend — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Resend — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Resend — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Resend — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Resend — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Resend — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Resend — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Resend — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Resend — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Resend — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Resend — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Resend — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Resend — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Resend — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Resend — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Resend — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Resend — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

Resend 是一款面向电子邮件基础设施的优质开发者工具，定位为为工程师提供的高端可靠服务。其视觉标识建立在鲜明、精致的暗色模式调色板之上，主背景为 #000000，文字为 #F0F0F0。字体对比包括精炼的过渡衬线体（用于展示）与中性无衬线体（用于正文）及等宽字体（用于代码）。关键颜色包括用于次要文本的 #A1A1A1 和作为稀有、高饱和度强调色的 #44FFA4。关键禁忌：避免使用明亮或多色的背景；不要在标题中使用俏皮字体；不要用过多的投影或元素使布局杂乱；不要使用低对比度的文字；避免使用多种多样的强调色；并且不要在主要部分使用密集、文字过多的段落。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明，可复制给 Agent。