OpenDesign·你的设计资产库

网页参考

Amplitude

一个面向B2B分析平台、高对比度且以排版为重点的法律策略页面。

SaaSAnalytics

封面待补录,可通过原站查看设计。

01

设计气质 DNA

分析平台B2B策略法律

一个专业的软件仪表盘布局,经过调整以适应法律文档。

02

色彩

#000000Accent
#171717Ink
#373D42Ink soft
#FFFFFFBG
#565656Muted
rgba(0,0,0,0.1)Line

高对比度单色,以确保最大的可读性和专业清晰度。

03

字体

geometric-sans · humanist-sans · monospace

  • display56px · 600
  • heading24px · 600
  • body18px · 400
  • small14px · 400

正文使用高度易读的人文主义无衬线字体。 · 标题使用结构感稍强的无衬线字体。 · 展示尺寸的字体采用紧凑的字间距,营造现代、高端的感觉。

04

间距

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

基于一致的4px网格,内容章节之间采用充裕的垂直内边距。

05

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

sm · 4px
md · 6px
lg · 12px
pill · 9999px

极少使用1px实线边框,主要依靠间距和排版实现内容分隔。

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

标准顶部导航栏,配合居中的窄栏用于法律文本。

07

动效与交互

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

hover状态下细微的背景色过渡。 · 交互状态下的透明度变化。

按钮背景色变化,文本链接的细微透明度变化。 · 通过背景色变化提供即时的视觉反馈。

08

组件

  • button 实心黑色主按钮,采用药丸形圆角;辅以文本链接按钮。
  • card 在此文本密集的法律页面中不使用卡片组件。
  • chip 不适用
  • input 不适用
  • hero 纯文本主视觉区域,采用大字号排版和清晰的元数据行。

09

文案语气与禁用清单

  • 语气 专业、清晰、权威且具法律效力。
  • 标题风格 直接且具描述性。
  • 按钮文案 行动导向且高对比度。
  • 避免使用装饰性背景图片——截图为干净、纯白的背景。
  • 避免使用多色调色板——截图为严格的黑白单色方案。
  • 避免正文居中对齐——截图为左对齐文本以提升可读性。
  • 避免使用装饰性边框——截图主要通过间距实现布局分隔。
  • 避免使用宽文本栏——截图为一个狭窄、优化的阅读栏宽。
  • 避免使用随意的字体——截图为一个高度易读、专业的无衬线字体。
  • 避免: 俏皮或随意的语言
  • 避免: 过于复杂的视觉装饰
  • 避免: 明亮或分散注意力的强调色

10

包内真实截图

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

11

System Prompt

此设计代表了一个专业B2B软件的法律文档页面,其核心是绝对清晰与权威性,而非视觉表现力。核心色调是严格的单色,采用白色背景(#FFFFFF)和深炭黑墨色(#171717),主要行动召唤按钮使用黑色(#000000)。字体依赖于高度易读的人文主义与几何无衬线类别(IBM Plex Sans),展示标题采用紧凑字间距以保持现代、高端的感觉。关键设计约束包括:保持窄而居中的内容栏以优化阅读行宽,避免任何装饰性背景图像或图案,并确保完全不使用彩色强调色。布局是经典的单栏编辑式结构,采用充裕的垂直间距来分隔逻辑内容块。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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