큐레이션 · 오픈 · 무료

Mercury

시네마틱 사진과 세련된 휴머니스트 타이포그래피를 결합한 프리미엄 핀테크 인터페이스.

fintechrefinedsaas
Mercury 스크린샷
↓ 디자인 시스템 다운로드 (31 MB)OpenDesign 에서 열기

원본 사이트: https://mercury.com

📦 팩 내용 보기 →

01

디자인 DNA

핀테크뱅킹스타트업신뢰모던함

편집 사진과 깔끔한 SaaS UI를 결합하여 신뢰성과 현대적인 혁신을 전달하는 프리미엄 핀테크 스타트업.

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

호버 상태에서 부드러운 배경색 및 텍스트색 전환. · 인터랙티브 요소를 위한 미세한 트랜스폼 전환.

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)를 포함합니다. 핵심 제약 조건: 세련되고 지저분하지 않은 미학을 유지하고, 여러 액센트 색상을 피하며, 적절한 타입 대비와 간격을 통해 높은 가독성을 보장합니다.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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