OpenDesign·你的设计资产库

网页参考

Mercury

将电影感摄影与精致的人文主义字体相结合的金融科技界面。

FintechRefinedSaaS

封面待补录，可通过原站查看设计。

01

设计气质 DNA

金融科技银行初创企业信赖现代感

一家高端金融科技初创公司，融合编辑摄影与简洁的 SaaS 界面，传达可靠性与现代创新精神。

02

色彩

#5266EBAccent
#EDEDF3Ink
#C3C3CCInk soft
#171721BG
#1E1E2ABG soft
#9CB4E8BG quiet
rgba(237,237,243,0.1)Line

采用深沉、柔和的暗色背景，搭配高对比度的浅色文字，并以单一的活力蓝色作为点缀。

03

字体

transitional-serif · humanist-sans

  • display56px · 500
  • h242px · 500
  • subtitle28px · 400
  • body16px · 420
  • caption12px · 400

使用过渡衬线字体作为醒目的展示标题，以建立高端的编辑风格基调。 · 使用人文主义无衬线字体作为正文和导航文字，确保高可读性和友好的外观。 · 避免使用装饰性或过度风格化的字体，以免破坏精致的整体美感。

04

间距

4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px
96px
128px

采用标准 4px 基础网格，并定义特定的水平与垂直内边距增量。

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

1px solid rgba(237,237,243,0.1)

0px 0px 6px 0px rgba(86, 86, 118, 0.1)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全出血摄影主视觉，后接受约束的网格布局区域。

07

动效与交互

220msmicro
300mssmall
500msmedium
cubic-bezier(0, 0, 0.2, 1)easing

在 hover 状态下平滑过渡背景色和文字颜色。 · 为交互元素添加细微的 transform 过渡效果。

颜色和背景色在 300ms 内过渡。 · transform 缩放在 300ms 内过渡。

08

组件

  • button 药丸形的主要按钮，采用纯色蓝色（#5266EB）背景和白色文字。
  • card 大型功能卡片，带有圆角（12px）和柔和、细微的阴影。
  • chip 在当前可见区域中未突出使用。
  • input 内联表单，采用透明背景、药丸形圆角设计，并带有占位符文本。
  • hero 视口全高，背景图片上居中放置衬线标题和内联表单。

09

文案语气与禁用清单

  • 语气 自信、专业且富有前瞻性。
  • 标题风格 粗体、简洁且具宣言性（例如，“银行，截然不同”）。
  • 按钮文案 直接且以行动为导向（例如，“开立账户”）。
  • 不要使用明亮、饱和的背景色——截图显示的是深沉、柔和的暗色背景。
  • 不要使用纯粹的几何形或怪诞无衬线字体作为标题——截图显示的是精致的过渡衬线字体。
  • 不要使用尖锐、方正的角落——截图显示的是一致的圆角（4px 至药丸形）。
  • 不要使用多种相互竞争的强调色——截图显示的是单一的主导蓝色（#5266EB）强调色。
  • 不要使用密集、杂乱的布局——截图显示的是充足的留白和居中对齐。
  • 不要使用刺眼、高对比度的边框——截图显示的是非常细微、半透明的分隔线。
  • 避免: 大量术语堆砌
  • 避免: 过于激进的销售口吻
  • 避免: 杂乱的视觉布局

10

包内真实截图

Mercury — 桌面首屏（hero）
桌面首屏（hero）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 移动首屏
移动首屏

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

11

System Prompt

一个高端金融科技 SaaS 设计系统，其特点是深沉、柔和的暗色背景和单一的活力蓝色强调色。它融合了用于展示标题的过渡衬线字体和用于正文的人文主义无衬线字体，营造出兼具编辑感与现代感的氛围。布局简洁宽敞，运用充足的留白和居中对齐。关键颜色包括深海军蓝背景（#171721）、浅灰白色文字（#EDEDF3）以及用于主要操作的标志性蓝色（#5266EB）。关键约束：保持精致、整洁的美感；避免使用多种强调色；并通过合适的字体对比度和间距确保高可读性。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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