01
设计气质 DNA
极简简洁企业级SaaS登录
一个空白、专注的工作区，等待用户登录。
02
色彩
#1d4ed8Accent#1a1a2eInk#6b7280Ink soft#f8f9fcBG#ffffffBG soft#9ca3afMutedrgba(0,0,0,0.06)Line高调、冷色调的中性色，搭配单一的深蓝色点缀色。
03
字体
- display
32px · 600 - body
14px · 400
所有界面文本使用humanist-sans字体。 · 字重保持常规到半粗体。 · 主要文本使用高对比度，说明性文本使用较柔和的颜色。
04
间距
4px8px16px24px32px48px64px96px充足的留白，以强调焦点并降低认知负荷。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 16px
pill · 999px
1px solid rgba(0,0,0,0.06)
0 4px 24px rgba(0,0,0,0.04)
06
布局
480container
1columns
24pxgutter
768breakpoints
在全视口背景上的单张居中卡片布局。
07
动效与交互
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
主操作按钮上的细微悬停状态。
按钮边框变深或背景轻微变化。 · 按下时有细微的缩放或颜色变化。
08
组件
- button 带有浅色边框和图标的白色圆角按钮。
- card 带有柔和阴影的白色圆角容器。
- hero 包含认证提示和SSO按钮的居中卡片。
09
文案语气与禁用清单
- 语气 直接、专业且提供帮助。
- 标题风格 以标识为驱动的品牌呈现，无额外标题文本。
- 按钮文案 清晰、以行动为导向的文本，搭配可识别的供应商图标。
- 不要使用深色背景——截图显示的是非常浅、接近白色的背景。
- 不要使用复杂的布局——截图显示的是单张居中卡片。
- 不要使用多栏文本——截图使用的是单一、窄栏。
- 不要添加过多的装饰元素——截图高度极简。
- 不要使用多种点缀色——截图主要使用蓝色。
- 不要使用过重的字重——截图使用的是常规和半粗体字重。
- 避免: 营销导向的文案
- 避免: 分散注意力的动画
- 避免: 复杂的导航
11
System Prompt
该网站是一个名为Propel的AI工具的高度聚焦的SaaS登录界面。它采用极简、高调的配色方案，背景为接近白色的浅色（#f8f9fc），搭配深海军蓝墨色（#1a1a2e）和主蓝色点缀色（#1d4ed8）。字体是简洁的humanist无衬线字体。关键约束：避免深色模式，避免复杂布局，避免装饰元素。设计优先考虑清晰度和快速认证。