OpenDesign·你的设计资产库

网页参考

Deepgram

使用最准确、最具成本效益的实时 API 构建语音转文本、文本转语音和语音代理。

AIVoice
Deepgram 网站截图

01

设计气质 DNA

Voice AI语音转文本企业级基础设施API

语音智能的基础设施层,类似于支付领域的 Stripe。

02

色彩

#00F099Accent
#FFFFFFInk
#E1E1E5Ink soft
#0F0F13BG
#1F1F24BG soft
#88888CMuted
rgba(44, 44, 51, 1)Line

以深色模式为主导,搭配活力 teal 强调色,以突出创新性和面向开发者的工具。

03

字体

geometric-sans · humanist-sans · monospace

  • display56px · 700
  • body-lg18px · 400
  • body-sm14px · 400
  • mono14px · 400

Display 尺寸使用紧凑的字距(-1.2px)以增强冲击力。 · 正文保持充足的行高(1.55)以提高可读性。 · 字体粗细严格限定为 400、500、600 和 700。 · 几何无衬线字体用于标题,传达现代技术精确感。

04

间距

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

一致的 4px 网格系统,垂直间距充足(32px、48px、64px),以分隔不同的内容块。

05

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

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

1px solid rgba(44, 44, 51, 1)

0px 24px 48px -12px rgba(38, 44, 52, 0.25) · 6px 0px 15px 0px rgba(56, 237, 172, 0.2) · -6px 0px 15px 0px rgba(20, 154, 251, 0.2)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

内容居中,章节划分清晰。主视觉区域采用全宽居中文本,过渡到用于功能和合作伙伴的多列网格。

07

动效与交互

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

hover 时平滑的颜色和背景过渡(0.15s-0.2s)。 · 交互元素微妙的透明度和滤镜变化。 · 用于视觉强调关键短语的渐变动画。

按钮和链接上微妙的背景色和文字颜色变化。 · 通过状态变化提供即时视觉反馈(例如按钮按下或颜色偏移)。

08

组件

  • button 主按钮为纯白色配深色文字;次按钮为透明背景配活力 teal 边框。两者均采用胶囊形圆角。
  • card 深灰色卡片(#1F1F24),带细微边框、圆角(8-12px)和一致的内部 padding(32px)。
  • chip 用于分类或功能的胶囊形徽章,激活状态使用 teal 强调色。
  • input 深色输入框,带细微边框和浅色文字,遵循深色主题美学。
  • hero 居中的巨型标题,使用活力 teal 渐变文字('Powered by Deepgram'),后跟描述性文字和两个醒目的 CTA。

09

文案语气与禁用清单

  • 语气 自信、技术性强且具有前瞻性。
  • 标题风格 大胆、陈述性的句子,强调市场领导地位和技术优势。
  • 按钮文案 直接且面向行动('免费注册'、'开始构建'、'体验环境')。
  • 不要使用浅色或粉彩背景——截图显示深色主题(#0F0F13)作为主要画布。
  • 不要对所有元素应用渐变——截图将活力 teal 渐变用于主标题文字,且使用得很有节制。
  • 不要使用小而拥挤的排版——截图采用大而粗的 display 尺寸(56px+)和充足的行高。
  • 不要对所有元素使用圆角——截图在卡片和按钮上使用锐利或略微圆化的角(4-12px),除了药丸形徽章外不使用完全圆形。
  • 不要使用多色调色板——截图以深色调、白色文字和单一的活力 teal 强调色为主。
  • 不要隐藏主要操作——截图在主视觉区域醒目地展示了'免费注册'和'体验环境',作为大而高对比度的 CTA。
  • 避免: 随意或过于俏皮的语言。
  • 避免: 缺乏清晰上下文的过多术语。
  • 避免: 被动或犹豫的措辞。

10

包内真实截图

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

11

System Prompt

Deepgram 的设计系统是以暗色模式为先、面向开发者的 SaaS 美学。它将品牌定位为 Voice AI 领域的高端技术基础设施提供商。关键颜色包括深炭灰背景(#0F0F13)、清晰的白色文字(#FFFFFF)和用于强调的活力 teal 色(#00F099)。字体依赖于几何和人文主义无衬线字体类别,标题使用较大的 display 尺寸(56px+)和紧凑字距。关键禁忌:切勿使用浅色背景,避免过度使用渐变(仅用于关键标题),不要缩小 CTA——它们必须保持大而醒目。布局简洁居中,使用 12 列网格和充足间距以维持规模感和技术精致感。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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