厳選・オープン・無料

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

見出しテキストはインパクトのためにtightな文字間隔を使用 · 本文テキストは読みやすさを保つため、適切な行間を維持 · 数値データは視覚的な階層のために一貫したウェイトを使用

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

これは個人資産管理と資産追跡のためのプレミアムなフィンテックアプリケーションです。デザインDNAは、主な背景としてダークネイビーのダークモード(#000F24)を採用し、高い読みやすさのために鮮明な白のタイポグラフィを使用します。アクセントカラーは、主に「無料で始める」ボタンなどのプライマリアクションに使用される鮮やかなブルー(#1C6CFF)です。タイポグラフィには、見出しに幾何学的サンセリフフォント、本文にヒューマニストサンセリフを使用し、クリーンでモダンな美感を維持します。レイアウトは、ゆったりとしたホワイトスペース、角丸(24px半径)、控えめなシャドウを持つカードベースコンポーネントを採用しています。重要な禁止事項は以下の通りです：ダークセクションで明るい白の背景を使用しないこと、CTAに複数のアクセントカラーを使用しないこと、装飾的なフォントを使用しないこと、要素間にゆったりとしたスペースを保つことです。インターフェースは明瞭さと整理整頓を優先し、「美しく整理された」金融データという製品の核心的な価値提案を反映しています。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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