精选 · 开放 · 免费

Spark

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

productivityemail

Spark 网站截图

↓ 下载设计系统包 (36 MB)在 OpenDesign 中打开

原站: https://sparkmailapp.com

📦 浏览包内文件 →

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 — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko