OpenDesign·你的设计资产库

网页参考

Missive

一个团队电子邮件协作工具的专业SaaS着陆页。

ProductivityEmail
Missive 网站截图

01

设计气质 DNA

协作生产力电子邮件团队工作流程

一个用于管理电子邮件和任务的、干净高效的团队驾驶舱。

02

色彩

#2266EDAccent
#333333Ink
#646C76Ink soft
#FFFFFFBG
#F5F6F6BG soft
#CDCDE4Muted
rgba(228, 230, 233, 1)Line

清爽的白色背景、深色文字,以及单一的鲜明蓝色用于主要操作。

03

字体

transitional-serif · humanist-sans

  • display48px · 400
  • h232px · 400
  • body16px · 400
  • caption14px · 400

主营销标题使用 Tiempos Headline(过渡衬线字体)。 · 正文、导航和UI元素使用 Inter(人文主义无衬线字体)。 · 保持正文为400字重,导航链接为500字重,以形成清晰的层次结构。

04

间距

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

以4px为基础单位,使用8和16的倍数来保持一致的间距。

05

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

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

使用1px实线 #E4E6E9 作为细微的分隔线和输入框边框。

rgba(0, 0, 0, 0.1) 0px 0px 32px 0px

06

布局

1280container
12columns
32pxgutter
768 / 1024breakpoints

居中的内容布局,配有标准顶部导航栏和交替的白色/灰色区块。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

所有交互元素采用微妙过渡(0.3秒透明度或变换效果)。

按钮和链接的透明度或颜色变化。 · 交互元素的即时视觉反馈。

08

组件

  • button 圆角蓝色(#2266ED)主要按钮配白色文字,次要按钮为白底深色文字。
  • card 干净的白色卡片,带有细微阴影或边框,用于UI模型和功能区块。
  • chip 小圆角标签,用于应用界面内的类别或状态显示。
  • input 标准输入框,带有浅灰色边框和细微圆角。
  • hero 居中的大型衬线字体标题,后接无衬线字体正文和主要/次要CTA按钮。

09

文案语气与禁用清单

  • 语气 专业、 helpful、直接。
  • 标题风格 衬线字体,大字号,聚焦于明确的利益和价值主张。
  • 按钮文案 行动导向(免费试用、观看演示、注册),使用清晰、简洁的语言。
  • 不要使用鲜艳的多色渐变——截图显示的是干净的白色/灰色背景。
  • 不要使用浓重、深色的阴影——截图显示的是如 rgba(0,0,0,0.1) 0px 0px 32px 这样的细微、柔和的阴影。
  • 不要在大型区块中使用全大写字母——截图显示的是标准的句子大小写或标题大小写。
  • 不要在正文中使用过于装饰性的字体——截图显示的是干净、易读的无衬线字体(Inter)。
  • 不要到处使用刺眼、高对比度的强调色——截图将鲜明的蓝色限制用于主要按钮和链接。
  • 不要使用复杂、拥挤的布局——截图显示的是充足的留白和清晰的视觉层次。
  • 避免: 俚语
  • 避免: 过于随意的语言
  • 避免: 充满术语的描述

10

包内真实截图

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

11

System Prompt

Missive 是一个团队电子邮件协作工具的专业SaaS着陆页。其设计DNA采用干净的白色背景(#FFFFFF)、深灰色文字(#333333)和单一的鲜明蓝色(#2266ED)作为主要行动号召的强调色。字体排印方面,显著的营销标题使用过渡衬线字体(Tiempos Headline),正文和UI元素使用人文主义无衬线字体(Inter)。布局居中且宽敞,使用4px为基础间距单位。关键禁忌:绝不使用多色渐变,避免使用浓重的深色阴影,并且不要在大段文字中使用全大写。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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