精选 · 开放 · 免费
Brex
企业级金融软件，整合了卡片、银行服务和 AI 驱动的费用管理。
fintechsaas
01
设计气质 DNA
企业金融现代银行速度掌控AI 自动化
为现代企业打造的高性能金融操作系统。
02
色彩
#FF5900Accent
#15191EInk
#FFFFFFBG
#F3F3F7BG soft
#8B8D98Muted
rgba(21, 25, 30, 0.1)Line
以高对比度为基础，使用单一醒目的点缀色来驱动转化操作。
03
字体
grotesque-sans · humanist-sans · monospace
- display
48px · 400 - heading
36px · 400 - body
16px · 400
展示文本使用紧凑的负字距，营造高级感 · 在所有尺寸上统一使用 400 字重，以获得最佳可读性 · 正文文本使用充足的行高，提升浏览体验
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
基于 4px 的一致网格，并搭配充足的留白间距（水平容器 72px），以保持整洁的对齐。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
结构元素使用最少的 1px 实线深色中性边框（#15191E）。
0px 1px 0px 0px rgba(66, 87, 138, 0.15) · 0px 1px 1px 0px rgba(0, 0, 0, 0.04)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
单列英雄区，连接着交替排列的文本/插画功能行。
07
动效与交互
125msmicro
200mssmall
500msmedium
cubic-bezier(0, 0, 0.38, 0.9)easing
状态变化使用细微的线性过渡 · 复杂视觉切换使用标准的 ease-in-out 缓动
交互元素上细微的不透明度或颜色变化。 · 立即的状态变化，动画延迟极小。
08
组件
- button 主要操作使用实色点缀填充，次要导航使用幽灵或文本样式。
- card 功能亮点使用浅灰色（#F3F3F7）背景和圆角（12px）。
- chip 集成合作伙伴的标准化标签样式。
- input 简洁的带边框输入框，采用圆角设计，并整合主要行动号召。
- hero 大号展示字体搭配高保真度 3D 产品渲染图，置于中性底色上。
09
文案语气与禁用清单
- 语气 权威、高效且高度专业。
- 标题风格 直接、以利益为导向的陈述，强调速度和规模。
- 按钮文案 以行动为导向且简洁（例如“开始使用”、“查看演示”）。
- 不要使用温暖或俏皮的配色方案——截图显示的是严格的黑/白/橙方案。
- 不要在 UI 卡片上使用过多的阴影或 3D 效果——截图显示的是扁平、干净的表面。
- 不要在展示文本上使用装饰性或衬线字体——截图使用的是干净、紧凑的无衬线字体。
- 不要让布局被多个竞争性的点缀色弄得杂乱——截图使用橙色作为唯一的高亮色。
- 不要为重要信息使用低对比度文本——截图使用深色文字保持了高可读性。
- 不要在标题中使用宽松、透气的字距——截图使用紧凑的字距（-0.96px）以产生冲击力。
- 避免: 俏皮或过于随意的语言
- 避免: 不必要的术语或复杂的金融术语
- 避免: 被动语态或弱动词
- 避免: 没有具体价值主张的模糊承诺
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一款为 Brex 打造的高端金融科技 SaaS 设计，特点是干净的白色（#FFFFFF）背景、深中性墨色（#15191E）以及用于转化点的单一醒目橙色点缀（#FF5900）。排版上，展示标题依赖于干净、紧凑的 grotesque-sans 字体（48号，400字重，ls -0.96px），正文则使用高可读性的 humanist-sans 字体。布局遵循严格的12列网格，24px 间距，72px 水平内边距，强调充足的留白和高保真度的 3D 产品渲染图。关键的设计约束包括避免俏皮的语气、保持单点缀色策略，以及在所有展示文本上使用紧凑字距，以传达速度和精准度。
en · zh-CN · zh-TW · ja · ko