OpenDesign·你的设计资产库

网页参考

Upstash

面向 Redis、向量、队列等的统一无服务器数据平台。

Developer ToolsInfra
Upstash 网站截图

01

设计气质 DNA

无服务器数据平台开发者基础设施性能

为现代开发者打造的纯净、高性能数据实用工具

02

色彩

#047857Accent
#022c22Ink
#4b5563Ink soft
#ffffffBG
#f8faf9BG soft
#f1f5f3BG quiet
#9ca3afMuted
rgba(229, 231, 235, 1)Line

纯净、高对比度的亮色主题,搭配象征性能与现代基础设施的鲜明绿色强调色。

03

字体

geometric-sans · humanist-sans · monospace

  • display72px · 600
  • heading32px · 500
  • body16px · 400
  • caption14px · 400

英雄文本和主要标题使用几何无衬线体 · 正文和描述使用人文无衬线体 · 代码片段和 CLI 命令使用等宽字体

04

间距

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

基于 4px 的统一间距单位,配合充足的留白,以体现“无服务器”的简洁性。

05

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

sm · 8px
md · 12px
lg · 16px
pill · 9999px

1px solid #e5e7eb

0px 1px 2px 0px rgba(0, 0, 0, 0.05) · 0px 5px 40px 0px rgba(9, 14, 21, 0.16)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中的单列英雄区域,过渡到多列卡片网格以展示功能。

07

动效与交互

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

交互元素的颜色和背景颜色过渡 · UI 状态变化的平滑透明度和变换过渡

交互元素上的微妙颜色变化或背景填充 · 通过过渡或轻微变换提供即时视觉反馈

08

组件

  • button 药丸形的主按钮,采用实心绿色填充和白色文字;次要变体使用幽灵或描边样式。
  • card 白色卡片,带微妙边框和充足内边距,用于产品模块和功能亮点。
  • chip 可水平滚动的标签式芯片行,用于切换不同的平台产品(Redis、Vector 等)。
  • input 标准文本输入框,带微妙灰色边框和圆角。
  • hero 大尺寸居中排版,主标题使用鲜明渐变色,后接简洁的价值主张和主要行动号召按钮。

09

文案语气与禁用清单

  • 语气 直接、面向开发者、专注于性能
  • 标题风格 大胆、简洁、价值驱动的陈述
  • 按钮文案 以行动为导向且清晰明了(例如“免费开始”、“创建数据库”)
  • 避免使用装饰性衬线字体——截图显示的是纯净的几何和人文无衬线字体。
  • 避免将深色主题作为主要界面——截图显示的是以白色背景为主、通透大气的亮色布局。
  • 避免使用霓虹或过度饱和的霓虹柔色——截图使用一种沉稳的祖母绿色(#047857)作为主要强调色。
  • 避免在主要组件上使用尖锐的方形圆角——截图显示的是充分圆润的圆角(12px,药丸形)。
  • 避免使用过多竞争性颜色使界面杂乱——截图保持了由绿色、白色和灰色构成的紧凑调色板。
  • 避免使用装饰性、复杂的插图——截图使用简单的抽象几何图形和图标。
  • 避免使用小而拥挤的排版——截图使用非常大、加粗的英雄字体,并配有充足的行高。
  • 避免: 营销术语
  • 避免: 模糊的承诺
  • 避免: 过于复杂的句子
  • 避免: 被动语态

10

包内真实截图

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

11

System Prompt

Upstash 的设计基因,这是一个无服务器数据平台。界面是干净、亮色主题的开发者工具,专注于清晰度和性能。关键颜色:背景使用白色(#ffffff),文本使用深绿色(#022c22),主要强调色和行动号召按钮使用鲜明的祖母绿色(#047857)。排版方面,加粗的英雄标题使用几何无衬线体,可读的正文使用人文无衬线体,代码使用等宽字体。关键设计规则:1) 保持宽敞、高对比度的亮色主题,留有充足留白。2) 仅将鲜明绿色用于主要操作和亮点,以吸引注意力而不使界面不堪重负。3) 确保所有交互元素具有清晰、圆润的圆角和平滑的 150ms 过渡,以营造精致、现代的感觉。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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