OpenDesign·你的设计资产库

网页参考

Empower Me

一个大胆、高对比度的金融科技平台,运用超大号排版和摄影叙事来解析信用与金融潜能。

FintechBold TypographyDark ModeCleanApp UI
Empower Me 网站截图

01

设计气质 DNA

大胆赋能易访问现代值得信赖

一位身着剪裁考究的深色西装、佩戴亮黄色口袋方巾,风格大胆且赋能用户的金融顾问。

02

色彩

#E4E24EAccent
#FFFFFFInk
#171616BG
#F7F5EFBG soft
#FDFDF6BG quiet
#64635CMuted
rgba(16,15,15,1.0)Line

高对比度的深色模式,以单一、充满活力的霓虹感黄绿色点缀色来引导视线至主要操作区域。

03

字体

geometric-sans · grotesque-sans

  • display96px · 900
  • heading48px · 900
  • body16px · 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

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

这是一个金融科技平台的设计系统,利用深色模式美学,并以单一、充满活力的黄绿色点缀色(#E4E24E)引导用户注意力到主要操作。排版以巨大、粗体的几何无衬线标题为特色,搭配更简洁的 grotesque 无衬线字体用于正文。布局特征包括充裕的间距、高对比度的区域过渡,以及写实摄影与活泼、圆角的UI组件的混合。关键禁忌:不要使用多种竞争性的点缀色;避免使用纤细、精致的字体作为标题;绝不使用按钮或卡片上的尖锐直角。该系统通过直接的语言和有冲击力的视觉层次,优先体现大胆、赋能的语气。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。