精選 · 開放 · 免費

Relief

一款協助你減少債務、更快邁向無債生活的金融應用程式。

FintechApp UIMobile UICleanCalm

↓ 下載設計系統包 (6 MB)在 OpenDesign 中開啟

原站: https://www.relief.app

📦 瀏覽包內檔案 →

設計氣質 DNA

紓緩債務儲蓄財務自由保障

一個為正在處理債務的人們提供的平靜、安全的港灣。

色彩

#328DD1Accent

#333333Ink

#F9F7F0BG

#EAF4FFBG soft

#FFFFFFBG quiet

#D0D5DDMuted

rgba(51,51,51,0.1)Line

一種沉穩、可信賴的配色方案，結合溫暖的灰白色與多種藍色，傳達紓緩與安全感。

字型

humanist-sans · monospace

display49px · 800
display31px · 700
display20px · 700
body18px · 400
body16px · 400
body14px · 400

間距

4px

8px

16px

24px

32px

48px

64px

96px

基於 4px 格網的統一間距，運用如 14px、21px、28px 及 56px 等數值。

表面 (圓角 / 陰影 / 邊線)

sm · 4px

md · 8px

lg · 18px

pill · 999px

幾乎無邊框，依賴背景顏色的對比度。

0px 7px 0px 0px rgba(154, 207, 246, 0.5) · 0px 3px 0px 0px rgba(0, 0, 0, 0.05) · 6px 6px 44px 0px rgba(22, 31, 53, 0.1)

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

居中的首頁佈局，過渡至雙欄式功能區塊。

動效與互動

150msmicro

200mssmall

400msmedium

cubic-bezier(0.25, 0.46, 0.45, 0.94)easing

互動元素的 hover 轉場效果

hover 時的細膩轉場效果 · 在截圖中未顯示可見的點擊狀態變化

組件

button 藥丸形的主要按鈕，採用實心藍色填充並具有明顯的 3D 偏移陰影。
card 推薦感言卡片，採用深藍色背景並附有 5 星評等。
chip 圓角標籤，附有頭像以顯示使用者信任度。
input 簡潔、圓角的輸入欄位。
hero 插畫式的首頁橫幅區域，包含手機應用程式模型與浮動的 3D 元素。

文案語氣與禁用清單

語氣支持、鼓勵且直接。
標題風格 直接、以行動為導向的短語，例如「讓我們助你擺脫債務」。
按鈕文案 清晰且簡單，例如「獲得紓緩」或「查看我的儲蓄」。

不要使用深色背景作為首頁橫幅 — 截圖顯示的是帶有雲朵的淺藍色背景。
不要使用尖銳、矩形的按鈕邊角 — 截圖顯示的是完全圓潤的藥丸形按鈕。
不要使用扁平化設計作為主要按鈕 — 截圖顯示的是具有明顯 3D 陰影偏移的按鈕。
不要使用複雜的導覽選單 — 截圖顯示的是一個極簡的頂部列，僅包含標誌和一個行動號召按鈕。
不要使用多種高對比顏色 — 截圖顯示的配色方案主要限制在藍色與灰白色。
不要為首頁橫幅使用密集的多欄佈局 — 截圖顯示的是居中的單欄焦點。
避免: 過於技術性的金融術語
避免: 激進或急迫的語氣
避免: 複雜的句子結構

包內真實截圖

Relief — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

擷取自真實頁面 · 真 computed styles

System Prompt

Relief 是一款專注於債務紓緩與金融安全的金融科技手機應用程式。設計採用以柔和藍色（#BADEFF, #2E96FF）與溫暖灰白色（#F9F7F0）為主的沉穩、可信賴配色方案。字型為人文無襯線字體（Gilroy），具有粗壯、友善的標題與簡潔的內文。關鍵設計元素包括帶有 3D 偏移陰影的藥丸形按鈕、盾牌與雲朵的俏皮 3D 插畫，以及寬敞、居中的佈局。避免使用尖銳邊角、深色首頁背景或過於複雜的介面；設計依賴克制與清晰、鼓舞人心的訊息。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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