OpenDesign·你的设计资产库

网页参考

Spark

一款专注于AI驱动清晰度与平台一致性的现代邮件客户端。

ProductivityEmail
Spark 网站截图

01

设计气质 DNA

专注生产力智能AI跨平台

将杂乱的桌面整理成一个专注的单一工作空间。

02

色彩

#205EFFAccent
#111111Ink
#333333Ink soft
#FBFBFDBG
#F5F5F7BG soft
#F8F8FABG quiet
#6E6E6EMuted
rgba(175,175,175,1.0)Line

干净、通透的白色，搭配单一鲜明的蓝色操作色和高对比度文字。

03

字体

humanist-sans · system-sans

  • display56px · 800
  • headline32px · 700
  • body20px · 400
  • small14px · 400

粗体展示字体，紧凑字间距以增强冲击力 · 常规字重正文文本，确保最大可读性 · 几何人文主义主字体，配备系统回退字体

04

间距

4px
8px
12px
16px
24px
32px
40px
64px

8px基础单位，章节间留有充足内边距

05

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

sm · 6px
md · 16px
lg · 24px
pill · 999px

1px solid rgba(175,175,175,0.25)

0px 20px 40px 0px rgba(34,41,69,0.12) · 0px 7px 30px 0px rgba(160,165,209,0.2)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

标准12列居中网格，配有充足留白

07

动效与交互

200msmicro
300mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

悬停时平滑的颜色过渡（0.3秒） · 状态变化时的透明度渐变 · 交互式卡片的细微上浮效果

平滑的背景色填充，过渡时间0.3秒；样机有轻微缩放 · 立即的颜色变化，伴随细微的阴影减弱

08

组件

  • button 高对比度的实色主按钮，采用药丸形圆角；次级按钮为轮廓幽灵按钮
  • card 柔和圆角卡片，在白色背景上带有细微的阴影深度
  • chip 药丸形状态徽章，带有背景渐变（如AI标签）
  • input 简洁的带边框输入框，带有细微的内阴影
  • hero 分栏布局，左侧为大字号排版，右侧为浮动设备样机，背景为蓝色径向渐变

09

文案语气与禁用清单

  • 语气 专业、自信且专注
  • 标题风格 简短、有力、陈述性的句子，带句号
  • 按钮文案 行动导向的动词（购买、下载、查看），置于高对比度按钮中
  • 不要使用深色模式布局——截图显示主要为浅色（#FBFBFD）背景
  • 不要使用衬线字体作为标题——截图显示为人文主义无衬线字体（Sofia-Pro）
  • 不要使用多种相互竞争的点缀色——截图显示单一主导蓝色（#205EFF）
  • 不要创建密集的信息架构——截图显示充足的留白和大边距（64px）
  • 不要在卡片上使用尖锐的直角——截图显示圆角（16px至24px）
  • 不要使用细体字重进行强调——截图显示标题使用粗体（800）
  • 避免: 过度技术术语
  • 避免: 激进的销售语言
  • 避免: 视觉杂乱
  • 避免: 低对比度文字
  • 避免: 复杂的嵌套菜单
  • 避免: 密集的文本块

10

包内真实截图

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

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

11

System Prompt

Spark是一款专注于生产力的邮件客户端，定位为现代专业人士的智能、专注解决方案。其设计DNA具有干净、通透的美学，以白色（#FBFBFD）为主导背景，并使用单一高饱和度蓝色点缀（#205EFF）作为主要操作色。排版依赖人文主义无衬线字体（Sofia-Pro）作为展示标题，字间距紧凑（-1.5px）且字重为800，正文字体则使用系统字体。布局采用充足留白（64px边距）和柔和圆角（16-24px半径）。关键禁忌：切勿将深色模式作为主要界面，切勿使用衬线字体作为展示类型，切勿用多种相互竞争的点缀色分散色彩系统。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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