精选 · 开放 · 免费
Empower Me
一个大胆、高对比度的金融科技平台,运用超大号排版和摄影叙事来解析信用与金融潜能。
FintechBold TypographyDark ModeCleanApp UI
01
设计气质 DNA
大胆赋能易访问现代值得信赖
一位身着剪裁考究的深色西装、佩戴亮黄色口袋方巾,风格大胆且赋能用户的金融顾问。
02
色彩
#E4E24EAccent
#FFFFFFInk
#171616BG
#F7F5EFBG soft
#FDFDF6BG quiet
#64635CMuted
rgba(16,15,15,1.0)Line
高对比度的深色模式,以单一、充满活力的霓虹感黄绿色点缀色来引导视线至主要操作区域。
03
字体
geometric-sans · grotesque-sans
- display
96px · 900 - heading
48px · 900 - body
16px · 400
为大号标题使用紧凑的字间距(-0.6px 至 -1px) · 为导航和小标签使用大写字母间距(+1.2px) · 将巨型几何展示字体与更简洁的 grotesque 字体结合用于界面元素
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
主要内容区块周围采用充裕的内边距,首屏区域内部则采用巨大的内边距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 16px
lg · 24px
pill · 99999px
用于分隔深色首屏与浅色区域的细(2px)、高对比度边框。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全幅深色首屏区域过渡到浅色、居中的内容区域,该区域包含三列功能网格。
07
动效与交互
150msmicro
300mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
悬停和聚焦状态下的平滑颜色过渡
按钮和链接上平滑的背景颜色过渡。 · 带有微妙缓动效果的即时响应。
08
组件
- button 药丸形,采用充满活力的黄绿色背景、深色文字和粗体大写字母间距。
- card 浅色圆角卡片,拥有充裕的内边距和活泼的、手绘风格的插图。
- chip 带有图标和文字的小型浮动徽章,通常呈药丸形。
- hero 巨大的深色区域,展示一个巨大的白色标题,以及一个漂浮的、不对称拼贴的摄影肖像,配有小型数据徽章。
09
文案语气与禁用清单
- 语气 赋能、直接且易访问,将复杂的金融概念分解为简单、易懂的语言。
- 标题风格 极其粗体、简洁且以效益为导向,常使用商标符号进行品牌宣传。
- 按钮文案 强有力、以行动为导向的祈使动词,全大写并使用充满活力的颜色。
- 不要使用纤细、精致的字体——截图显示的是巨大、厚重的排版。
- 不要使用复杂、多色的配色方案——截图显示的是严格的深色/白色/黄绿色方案。
- 不要使用尖锐的直角——截图显示的是高度圆角的药丸形按钮和卡片。
- 不要使用微小、不明显的行动号召——截图显示的是大型、高对比度的黄色按钮。
- 不要使用密集、以文字为主的布局——截图显示的是充裕的空白和大型图片。
- 不要使用衬线字体作为主要文本——截图显示的是清一色的粗体无衬线展示字体和 grotesque 正文字体。
- 避免: 过于技术性的术语
- 避免: 被动语态
- 避免: 通用的公司套话
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
这是一个金融科技平台的设计系统,利用深色模式美学,并以单一、充满活力的黄绿色点缀色(#E4E24E)引导用户注意力到主要操作。排版以巨大、粗体的几何无衬线标题为特色,搭配更简洁的 grotesque 无衬线字体用于正文。布局特征包括充裕的间距、高对比度的区域过渡,以及写实摄影与活泼、圆角的UI组件的混合。关键禁忌:不要使用多种竞争性的点缀色;避免使用纤细、精致的字体作为标题;绝不使用按钮或卡片上的尖锐直角。该系统通过直接的语言和有冲击力的视觉层次,优先体现大胆、赋能的语气。
en · zh-CN · zh-TW · ja · ko