精選 · 開放 · 免費

Ramp

一個專注於財務自動化與企業支出管理的優質 SaaS 平台。

fintechsaas

Ramp 網站截圖

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

原站: https://ramp.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

專業高效自動化企業級

一套為速度與效率而生的企業級金融作業系統。

02

色彩

#DFFF00Accent

#000000Ink

#333333Ink soft

#FFFFFFBG

#F4F2F0BG soft

#F5F5F5BG quiet

#808080Muted

rgba(0, 0, 0, 0.1)Line

採用高對比的中性色調，並以單一電光黃作為強調色，引導視覺焦點。

03

字型

geometric-sans · monospace

display56px · 400
heading42px · 400
subheading36px · 400
body18px · 400
caption12px · 400

所有文字均採用簡潔、中性的幾何無襯線字體。 · 大型展示文字使用緊湊的字間距。 · 多數元素維持一致的 400 字重，以保留簡潔美感。

04

間距

4px

8px

12px

16px

24px

32px

48px

64px

採用寬裕的留白，並嚴格遵循 4px 的網格基準，確保清晰的視覺區隔。

05

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

sm · 4px

md · 8px

lg · 12px

pill · 999px

使用 rgba(0, 0, 0, 0.1) 的細微 1px 邊框來界定範圍，避免生硬的線條感。

rgba(0, 0, 0, 0) 0px 0px 0px 0px · rgba(0, 0, 0, 0) 0px 0px 0px 0px

06

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

結構化的 12 欄網格，最大寬度 1280px，內容置中對齊。

07

動效與互動

150msmicro

300mssmall

400msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

在 hover 和 focus 時，進行流暢的色彩與背景過渡。 · 互動元素帶有細微的 transform 與 box-shadow 變化。

透過色彩變化與細微的背景位移來提示互動性。 · 透過背景色彩的即時變化提供視覺回饋。

08

組件

button 高對比的主要按鈕，採用標誌性的電光黃背景與黑色文字。
card 簡潔的白色面板，搭配細微邊框或柔和陰影，常用於呈現複雜的 UI 預覽。
chip 小型、圓角的膠囊狀標籤或徽章，用於顯示數據點與狀態指示。
input 極簡的輸入欄位，主要透過底部邊框或細微的背景填充來定義。
hero 一個以排版為主的大型區塊，包含醒目的標題、副標題以及聚焦的電子郵件輸入欄位。

09

文案語氣與禁用清單

語氣專業、直接且具權威性，聚焦於效率與財務成果。
標題風格 粗體、直接的陳述或問句，用以凸顯核心價值主張。
按鈕文案 以行動為導向且清晰明確，常強調即時的下一步或效益。

除了標誌性的電光黃之外，勿使用其他主要色彩——截圖顯示其為唯一的高飽和度強調色。
勿對任何文字使用襯線字體——截圖顯示採用嚴格的無襯線排版系統。
勿在 UI 元素上使用厚重陰影或複雜漸層——截圖顯示為平坦、深度極簡的面板。
勿使用過多裝飾性圖示或表情符號——截圖顯示為簡潔、圖示極簡的介面。
勿將深色背景作為主要容器——截圖顯示以白色與淺灰色為主的色盤。
勿對主要文字內容使用多欄佈局——截圖顯示為聚焦、單欄的閱讀寬度。
避免: 避免過於口語化的語言或過多的驚嘆號。
避免: 避免擁雜或過於複雜的視覺佈局，以免偏離核心訊息。

10

包內真實截圖

Ramp — 桌面首屏（hero） — 桌面首屏（hero）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ramp — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

Ramp 是一個優質的金融科技 SaaS 平台，專為企業支出管理與自動化而設計。其視覺系統建立在簡潔、高對比的中性色盤上，以白色 (#FFFFFF) 與淺灰色 (#F4F2F0) 為主，並以深邃的黑色文字 (#000000) 作為基準。標誌性的電光黃 (#DFFF00) 作為按鈕與關鍵標示的主要互動色彩。字體採用純粹的幾何無襯線體，強調清晰度與現代感。關鍵設計限制包括：永不使用襯線字體、避免複雜漸層或厚重陰影、並維持寬裕的留白。整體美學專業、高效且具企業級水準，聚焦於數據清晰度與任務完成。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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