01
设计气质 DNA
银行业金融科技移动优先信任简洁
一个掌中现代、友好的银行网点，以清晰度和信任感为核心。
02
色彩
#088177Accent#1B1B1BInk#FAF8F5BG#6D6D6DMutedrgba(233, 233, 233, 1.0)Line温暖的米白背景搭配主导的青绿色强调色，为金融操作创造了值得信赖且易读的对比度。
03
字体
- display
58px · 500 - heading
32px · 400 - body
18px · 400 - small
14px · 400
04
间距
4px8px12px16px24px32px40px48px64px80px96px标准4px基础网格，搭配宽裕的padding以确保呼吸空间
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 24px
pill · 999px
用于结构分隔和交互元素的微妙1px边框
rgba(0, 0, 0, 0.2) 0px 4px 8px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中容器，各板块间留有充足的垂直留白
07
动效与交互
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素的background-color、transform和scale平滑过渡
background-color或颜色变化，伴随平滑过渡 · 缩放或位移transform以提供即时反馈
08
组件
- button 高对比度的圆润胶囊形行动号召按钮，可为浅色背景上的青绿色或青绿色背景上的白色
- card 用于媒体和内容的圆角大容器，通常带有24px border-radius
- hero 全宽青绿色或图片背景的板块，配有居中的大字号排版和单一的首要行动号召
09
文案语气与禁用清单
- 语气 友好、令人安心且高度专业
- 标题风格 直接、以收益为导向的陈述，采用第一人称视角
- 按钮文案 行动导向且清晰，聚焦于核心目标
- 不要使用纯白色（#FFFFFF）作为主背景——截图显示的是温暖的米白色（#FAF8F5）。
- 不要使用多种相互竞争的强调色——截图显示的是单一的主导青绿色（#088177）作为强调色。
- 不要使用装饰性或花体字体——截图中所有UI文本均使用简洁的定制几何无衬线字体。
- 不要为主要容器使用尖锐的方角——截图中媒体卡片使用的是大而宽的border-radius（24px）。
- 不要使用纤细、浅色的边框进行分隔——截图中水平分割线使用的是非常微妙的浅灰色（#E9E9E9）。
- 不要将深色模式作为默认——截图主要展示的是带有青绿色强调的明亮浅色界面。
- 避免: 避免复杂的金融术语
- 避免: 避免过于激进的销售语言
- 避免: 避免密集、令人望而生畏的文本块
- 避免: 避免杂乱的布局或过多的视觉干扰
- 避免: 避免冰冷、纯企业化的传达
10
包内真实截图
11
System Prompt
N26是一个高端金融科技银行平台，在友好的可访问性语调与专业信任感之间取得平衡。其视觉识别建立在温暖米白色背景（#FAF8F5）上的标志性青绿色强调（#088177）之上，为金融活动营造了一个高对比度且受欢迎的环境。排版采用简洁的几何无衬线字体，优先考虑可读性和现代感，关键标题使用大字号展示。布局开阔居中，依赖一致的4px基础网格和宽裕的padding来防止信息过载。带有胶囊形border-radius的首要行动号召几乎是每个板块的焦点。交互设计微妙，在悬停和点击时使用平滑的0.3s过渡。关键设计约束：绝不使用多种相互竞争的强调色；绝不使用纯白背景；绝不为主要内容卡片使用尖锐的方角；避免密集、术语繁多的文本块；并在每个板块保持单一、强大的首要行动号召，以维持干净、专注的用户体验。