精選 · 開放 · 免費

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 狀態下，背景顏色與文字顏色進行平滑過渡。 · 互動元素進行細微的變換過渡。

顏色與背景顏色在 300ms 內進行過渡。 · 變換縮放於 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