OpenDesign·你的设计资产库

网页参考

Byhumankind

一个专注于清晰系统状态与引导的极简深色主题实用页面。

SaaSDark ModeCleanCalmRestraint

预览暂时不可用,请通过原站查看。

01

设计气质 DNA

实用主义极简系统化效用

一个安静的深色工具间。

02

色彩

#f0f0f0Ink
#0b1110BG
#889a96Muted
rgba(136, 154, 150, 0.3)Line

近黑色背景搭配高对比度米白色文本,以实现最大可读性并营造宁静、专注的氛围。

03

字体

humanist-sans

  • display56px · 400
  • h232px · 400
  • body18px · 400

所有文本居中对齐。 · 链接带下划线。 · 不使用装饰性字体排印。

04

间距

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

充裕的垂直间距营造出宁静、整洁的感觉。

05

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

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

1px solid rgba(136, 154, 150, 0.3)

0 0 0 1px rgba(136, 154, 150, 0.3)

06

布局

1200container
12columns
24pxgutter
768 / 1024breakpoints

居中栏布局,包含一个圆角卡片元素。

07

动效与交互

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

此静态状态页面未见动态模式。

链接可能具有标准的下划线悬停效果,但在静态截图中不可见。 · 预期为标准的链接点击行为。

08

组件

  • button 未见按钮。
  • card 一个大型圆角卡片,带有细微边框,用于承载次要信息。
  • chip 未见标签。
  • input 未见输入框。
  • hero 一个占据整个视口、居中的首屏区域,显示主要系统状态信息。

09

文案语气与禁用清单

  • 语气 信息明确、直接且有帮助。
  • 标题风格 清晰、陈述性的系统状态声明。
  • 按钮文案 在提供有益建议的段落中使用带下划线的行内文本链接。
  • 不要使用多栏内容——截图显示为单一的居中垂直布局。
  • 不要使用明亮的强调色——截图显示为严格柔和的双色调。
  • 不要使用复杂图像或图标——截图显示为纯文本界面。
  • 不要使用厚重的投影或3D效果——截图显示为仅带边框的扁平化表面。
  • 不要使用两端对齐——截图显示所有文本均为居中对齐。
  • 不要使用按钮作为主要操作方式——截图显示操作以内联链接形式呈现。
  • 避免: 营销术语
  • 避免: 俏皮语言
  • 避免: 过多感叹号
  • 避免: 模糊指令

11

System Prompt

该设计是一个极简主义的深色主题系统状态页面。它使用近黑色(#0b1110)背景,搭配高对比度米白色(#f0f0f0)文本,字体为清晰的无衬线字体。布局严格居中,包含一条主要状态信息和一个提供指引的圆角卡片。关键色彩为深色背景与浅色文本,无明亮强调色。关键设计规则:避免复杂布局或多栏、避免明亮强调色或彩色图像、避免使用按钮作为操作方式——仅使用带下划线的文本链接。整体基调宁静、信息明确且纯功能化。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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