精选 · 开放 · 免费
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
- display
56px · 600 - heading
24px · 600 - body
18px · 400 - small
14px · 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
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
此设计代表了一个专业B2B软件的法律文档页面，其核心是绝对清晰与权威性，而非视觉表现力。核心色调是严格的单色，采用白色背景(#FFFFFF)和深炭黑墨色(#171717)，主要行动召唤按钮使用黑色(#000000)。字体依赖于高度易读的人文主义与几何无衬线类别（IBM Plex Sans），展示标题采用紧凑字间距以保持现代、高端的感觉。关键设计约束包括：保持窄而居中的内容栏以优化阅读行宽，避免任何装饰性背景图像或图案，并确保完全不使用彩色强调色。布局是经典的单栏编辑式结构，采用充裕的垂直间距来分隔逻辑内容块。
en · zh-CN · zh-TW · ja · ko