精選 · 開放 · 免費

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) · 為按鈕與卡片內嵌陰影以增加深度感

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

這是一款用於個人財務追蹤與財富管理的高端金融科技應用程式。其設計基因採用深海軍藍深色模式（#000F24）作為主要背景，搭配清晰的白色字體以確保高可讀性。強調色為鮮明的藍色（#1C6CFF），用於「立即開始」等主要操作。字體方面，標題採用幾何無襯線字體，內文則使用人文主義無襯線字體，以維持簡潔現代的美學。佈局上採用寬裕的留白、圓角（24px 半徑），以及帶有細微陰影的卡片式元件。關鍵的禁止事項包括：切勿在深色區域使用明亮的白色背景、避免為行動號召使用多種強調色、不要使用裝飾性字體，並在元件之間維持寬裕的間距。介面優先考慮清晰度與條理性，反映產品的核心價值主張——讓財務資料「呈現優雅且井然有序」。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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