OpenDesign·你的设计资产库

网页参考

Mongodb

一个以开发者为中心的简洁数据平台UI,平衡深色技术权威感与亲切的绿色点缀。

Developer ToolsSaaSProductCleanRestraint
Mongodb 网站截图

01

设计气质 DNA

数据库开发者平台数据基础设施AI-ready云原生

为数据打造的精密瑞士腕表:简洁、可靠,专为严肃工作而生。

02

色彩

#00ed64Accent
#ffffffInk
#000000Ink soft
#001e2bBG
#21313cBG soft
#f5f7faBG quiet
#b8c4c2Muted
rgba(255,255,255,0.15)Line

以高对比度深色模式为主导,辅以单一高饱和度霓虹绿作为主要操作的高亮色。

03

字体

geometric-sans · humanist-sans · monospaced

  • display72px · 500
  • h240px · 500
  • body18px · 400
  • caption12px · 500

标题使用几何无衬线字体,字重500,营造技术感又不失亲和力。 · 正文使用人文无衬线字体,字重400,确保最佳可读性。 · 等宽字体严格保留给代码片段和技术指示符。 · 小标签采用严格的大写字母间距,以维持视觉层次。

04

间距

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

基于一致的8px基线网格,主要章节采用96px以上的充裕垂直内边距。

05

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

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

采用微妙的1px边框:深色背景上为rgba(255,255,255,0.15),浅色背景上为rgba(0,0,0,0.1)。

0px 3px 9px 0px rgba(0,0,0,0.15) · 0px 7px 13px 0px rgba(0,0,0,0.13) · 0px 26px 44px 0px rgba(0,30,43,0.12)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全宽章节,在深色与浅色中性背景间交替。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.46, 0.45, 0.94)easing

悬停状态下的微妙透明度过渡。 · 交互元素平滑的背景色变化。 · 轮播导航的水平滑动过渡。

按钮和链接在悬停时发生微妙的颜色或透明度变化。 · 通过背景色过渡提供即时视觉反馈。

08

组件

  • button 主按钮:药丸形(#00ed64)配深色文字;次按钮:深色药丸形配白色边框。
  • card 浅色背景卡片,采用充裕内边距(24px)和微妙的圆角(16px)。
  • chip 体验选择器采用药丸形分段控件,激活状态为绿色。
  • input 搜索和助手输入框采用药丸形深色容器,配有微妙的边框。
  • hero 位于深色渐变背景上的大型中央标题,文字分为白色与绿色两部分。

09

文案语气与禁用清单

  • 语气 权威、技术化、直接。
  • 标题风格 简短、有力的陈述句,聚焦规模和潜力。
  • 按钮文案 清晰且以行动为导向(例如:“开始使用”、“文档”)。
  • 不要使用鲜艳的多色渐变——截图显示了深蓝、白色和单一绿色点缀的克制调色板。
  • 不要使用装饰性衬线字体作为标题——截图显示所有展示文本均采用几何无衬线字体。
  • 不要在主按钮上使用尖锐的方形圆角——截图显示的是完全圆润的药丸形状。
  • 不要在深色背景中隐藏主要操作——截图使用高饱和度绿色作为主要CTA。
  • 不要使用浓重的投影来营造深度感——截图依赖微妙的阴影和扁平表面。
  • 不要用元素挤满布局——截图显示了充裕的留白和清晰的视觉层次。
  • 避免: 过于华丽或情绪化的营销语言。
  • 避免: 缺乏上下文的模糊术语。
  • 避免: 过多的感叹号或炒作。

10

包内真实截图

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

11

System Prompt

这是一个面向开发者的数据基础设施SaaS平台。设计采用深邃的深蓝色(#001e2b)背景,搭配活力十足的霓虹绿(#00ed64)作为主要号召性用语的高亮色。字体严格使用几何和人文无衬线体,保持技术感与可读性的美学。关键设计约束包括避免多色渐变、使用药丸形按钮而非尖锐矩形,以及通过充裕的留白来强调简洁、专业的层次感。该UI平衡了深色模式的技术权威感与亲切、高对比度的绿色高亮。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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