精选 · 开放 · 免费
Column
一家为构建和资助新型金融产品而设立的全国性特许银行。
fintechbank
01
设计气质 DNA
金融科技银行基础设施API扩展
银行领域的Stripe
02
色彩
#121620Ink
#7C7F88Ink soft
#F6F6F8BG
#FFFFFFBG soft
#7EADFFMuted
rgba(227, 228, 232, 1)Line
简洁、高对比度的中性色，搭配单一的蓝色点缀。
03
字体
geometric-sans · monospace
- display
56px · 500 - body
16px · 400
04
间距
4px
8px
12px
16px
20px
24px
32px
48px
64px
96px
8px 基础单位
05
表面 (圆角 / 阴影 / 边线)
sm · 3px
md · 8px
lg · 12px
pill · 999px
1px solid #E3E4E8
rgba(1, 24, 33, 0.05) 0px 0px 0px 1px · rgba(17, 26, 74, 0.1) 0px 1px 3px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
12列网格
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.76, 0, 0.24, 1)easing
微妙的透明度渐隐。
微妙的颜色过渡。 · 即时响应。
08
组件
- button 极简主义，采用文字按钮或幽灵按钮。
- card 微妙阴影与边框。
- chip 简单的圆角标签。
- input 标准表单元素。
- hero 标题与插图分栏布局。
09
文案语气与禁用清单
- 语气 专业且权威。
- 标题风格 简短、有力、以价值为导向。
- 按钮文案 清晰直接。
- 不要使用装饰性图案——截图显示的是一个干净的点状世界地图。
- 不要使用厚重的投影——截图显示的是非常微妙的多层盒子阴影。
- 不要使用斜体文字——截图只显示常规和粗体字重。
- 不要使用多种点缀色——截图显示的是基于蓝色的调色板。
- 不要使用圆角卡片——截图显示的是直角或略带圆角的边角。
- 不要使用过于活泼的字体——截图显示的是专业的几何无衬线字体。
- 避免: 术语
- 避免: 模糊的承诺
- 避免: 复杂的语言
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（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
设计是一个面向开发者的高端金融科技平台。关键颜色为浅灰色（#F6F6F8）背景、深海军蓝（#121616）文本和亮蓝色（#7EADFF）点缀。字体使用几何无衬线字体用于标题和正文，使用等宽字体用于代码片段。关键禁忌包括：避免厚重的投影，避免活泼的字体，避免复杂的装饰元素，避免低对比度，避免明亮或霓虹色，以及避免过度圆润的形状。
en · zh-CN · zh-TW · ja · ko