精选 · 开放 · 免费

N26

一个干净、自信的金融科技界面，以标志性的青绿色引导用户完成首要操作。

01

设计气质 DNA

一个掌中现代、友好的银行网点，以清晰度和信任感为核心。

02

色彩

温暖的米白背景搭配主导的青绿色强调色，为金融操作创造了值得信赖且易读的对比度。

03

字体

geometric-sans

• display58px · 500
• heading32px · 400
• body18px · 400
• small14px · 400

04

间距

标准4px基础网格，搭配宽裕的padding以确保呼吸空间

05

表面 (圆角 / 阴影 / 边线)

用于结构分隔和交互元素的微妙1px边框

rgba(0, 0, 0, 0.2) 0px 4px 8px 0px

06

布局

居中容器，各板块间留有充足的垂直留白

07

动效与交互

交互元素的background-color、transform和scale平滑过渡

background-color或颜色变化，伴随平滑过渡 · 缩放或位移transform以提供即时反馈

08

组件

• button 高对比度的圆润胶囊形行动号召按钮，可为浅色背景上的青绿色或青绿色背景上的白色
• card 用于媒体和内容的圆角大容器，通常带有24px border-radius
• hero 全宽青绿色或图片背景的板块，配有居中的大字号排版和单一的首要行动号召

09

文案语气与禁用清单

• 语气 友好、令人安心且高度专业
• 标题风格 直接、以收益为导向的陈述，采用第一人称视角
• 按钮文案 行动导向且清晰，聚焦于核心目标

• 不要使用纯白色（#FFFFFF）作为主背景——截图显示的是温暖的米白色（#FAF8F5）。
• 不要使用多种相互竞争的强调色——截图显示的是单一的主导青绿色（#088177）作为强调色。
• 不要使用装饰性或花体字体——截图中所有UI文本均使用简洁的定制几何无衬线字体。
• 不要为主要容器使用尖锐的方角——截图中媒体卡片使用的是大而宽的border-radius（24px）。
• 不要使用纤细、浅色的边框进行分隔——截图中水平分割线使用的是非常微妙的浅灰色（#E9E9E9）。
• 不要将深色模式作为默认——截图主要展示的是带有青绿色强调的明亮浅色界面。
• 避免: 避免复杂的金融术语
• 避免: 避免过于激进的销售语言
• 避免: 避免密集、令人望而生畏的文本块
• 避免: 避免杂乱的布局或过多的视觉干扰
• 避免: 避免冰冷、纯企业化的传达

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko