精选 · 开放 · 免费

Mercury

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

fintechrefinedsaas
Mercury 网站截图
↓ 下载设计系统包 (31 MB)在 OpenDesign 中打开

原站: https://mercury.com

📦 浏览包内文件 →

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

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

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

组件

09

文案语气与禁用清单

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 — 移动首屏
移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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