큐레이션 · 오픈 · 무료

Copilot Money

계좌, 소비, 투자를 아름답게 정돈된 단일 뷰로 통합하는 프리미엄 개인 금융 앱입니다.

FintechDark ModeCleanPremiumProductivity
Copilot Money 스크린샷
↓ 디자인 시스템 다운로드 (25 MB)OpenDesign 에서 열기

원본 사이트: https://copilot.money

📦 팩 내용 보기 →

01

디자인 DNA

개인 금융자산 추적미니멀정돈된

개인 자산 관리를 위한 매끈하고 다크 테마의 금융 조종석

02

컬러

#1C6CFFAccent
#FFFFFFInk
#11263BInk soft
#000F24BG
#F5F7FABG soft
#597CAAMuted
rgba(0,0,0,0.07)Line

선명한 타이포그래피와 주요 액션을 위한 생동감 있는 블루 강조색을 적용한 깊은 네이비 다크 모드

03

타이포그래피

geometric-sans · humanist-sans · sans-serif

강조를 위해 디스플레이 텍스트는 좁은 자간을 사용합니다 · 본문 텍스트는 가독성을 위해 편안한 행간을 유지합니다 · 숫자 데이터는 시각적 계층 구조를 위해 일관된 두께를 사용합니다

04

여백

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

프리미엄 느낌을 위해 넉넉한 여백을 둔 일관된 4px 그리드 시스템

05

표면 (라운드 / 그림자 / 경계선)

sm · 8px
md · 12px
lg · 16px
xl · 24px
pill · 999px

카드 경계를 위해 불투명도가 낮은 섬세한 1px 테두리

0 3px 5.4px -3px rgba(0,0,0,0.05) · 0 4px 10.4px -2px rgba(0,0,0,0.04) · 버튼과 카드에 깊이감을 주는 inset 그림자

06

레이아웃

1200container
12columns
24pxgutter
768 / 1024breakpoints

모바일에서 스택된 카드로 전환되는 유연한 그리드

07

모션과 인터랙션

200msmicro
300mssmall
600msmedium
cubic-bezier(0.44, 0, 0.56, 1)easing

모든 인터랙티브 요소에 부드러운 트랜지션 · 부드러운 애니메이션이 적용된 부유하는 카테고리 필 · 미세한 움직임이 있는 차트 데이터 포인트

링크와 버튼에 0.4초 지속 시간의 색상 트랜지션 · 미세한 크기 또는 불투명도 변화로 즉각적인 시각적 피드백

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

이것은 개인 금융 추적 및 자산 관리를 위한 프리미엄 핀테크 애플리케이션입니다. 디자인 DNA는 깊은 네이비 다크 모드(#000F24)를 주요 배경으로 특징으로 하며, 높은 가독성을 위해 선명한 타이포그래피를 적용합니다. 강조색은 'Get started' 버튼과 같은 주요 액션에 사용되는 생동감 있는 블루(#1C6CFF)입니다. 타이포그래피는 헤드라인에 기하학적 고딕체를, 본문에는 휴머니스틱 고딕체를 사용하여 깔끔하고 현대적인 미학을 유지합니다. 레이아웃은 넉넉한 여백, 둥근 모서리(24px 반경), 그리고 미세한 그림자가 적용된 카드 기반 컴포넌트를 사용합니다. 주요 제약 사항은 다음과 같습니다: 다크 섹션에 절대 밝은 흰색 배경을 사용하지 말 것, CTA에 여러 강조색을 사용하지 말 것, 장식용 폰트를 사용하지 말 것, 요소 간 넉넉한 간격을 유지할 것. 인터페이스는 명확성과 정리된 모습을 우선시하며, 금융 데이터를 '아름답게 정돈된' 것으로 만든다는 제품의 핵심 가치 제안을 반영합니다.

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

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

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

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