01
设计气质 DNA
企业银行API基础设施开发者
一个为金融基础设施精密设计的仪表盘。
02
色彩
#31F2CCAccent#1A2B3BInk#687887Ink soft#FFFFFFBG#F5F6F7BG soft#E4E5E9BG quiet#314352Mutedrgba(26, 43, 59, 0.1)Line一套整洁、专业的配色方案，以深海军蓝为信任基石，辅以充满活力的青绿和酸橙渐变，营造现代科技感。
03
字体
- display
72px · 700 - h2
40px · 700 - body
16px · 400 - caption
14px · 400
04
间距
4px8px16px24px32px48px64px96px采用一致的4px网格系统，构建清晰的视觉层级。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(26, 43, 59, 0.1)
rgba(12, 25, 39, 0.05) 0px 6px 8px 0px · rgba(12, 25, 39, 0.06) 0px 16px 20px 0px · rgba(12, 25, 39, 0.1) 0px 50px 60px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
带有12列网格的最大宽度容器，将主要内容居中。
07
动效与交互
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素悬停状态的平滑过渡 · 交互时微妙的颜色和阴影变化
微妙的颜色过渡或轻微的阴影抬升。 · 即时的视觉反馈，通常通过颜色或缩放变化实现。
08
组件
- button 深色的药丸形主按钮，配白色文字；白色的次要按钮，带有深色边框和图标。
- card 整洁的白色卡片，带有微妙的阴影和12px的圆角边框。
- chip 小巧的、圆角的药丸形标签。
- input 带有微妙边框和圆角的整洁文本输入框。
- hero 搭配动态、重叠几何渐变的大尺寸、有冲击力的排版。
09
文案语气与禁用清单
- 语气 专业、权威且面向开发者。
- 标题风格 直接、有力的陈述，强调企业级可靠性。
- 按钮文案 以行动为导向，带有明确的指向性箭头。
- 不要使用衬线字体——截图显示展示和正文均使用 grotesque-sans
- 不要使用复杂、有机的插图——截图显示的是大胆、扁平的几何渐变
- 不要使用缺乏清晰层级的宽阔、空旷布局——截图显示的是紧凑、结构化的网格
- 不要将明亮、霓虹色作为主要UI元素——截图使用深海军蓝作为基底，搭配鲜艳的点缀色
- 不要在所有元素上都使用厚重的阴影——截图仅在卡片和按钮上使用微妙阴影
- 不要使用杂乱的导航栏——截图显示的是整洁、极简的顶部导航
- 避免: 过于随意的口语
- 避免: 花哨的形容词
- 避免: 模糊的营销话术
10
包内真实截图
11
System Prompt
这是一款专为企业开发者设计的专业金融科技SaaS产品。配色方案以深海军蓝（#1A2B3B）为信任基石，与充满活力的青绿色（#31F2CC）和酸橙绿渐变形成对比，营造现代感。排版方面，展示和正文使用 grotesque-sans，代码片段使用等宽字体。布局基于网格，空间充裕且高度易读。关键限制：不要使用衬线字体，避免杂乱的UI，绝不使用过于俏皮或有机的视觉元素。确保深海军蓝用于主按钮和文字以保持权威感。