精选 · 开放 · 免费

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

悬停和聚焦时，平滑的颜色与背景过渡。 · 交互元素的微妙 transform 和 box-shadow 变化。

通过颜色变化和微妙的背景位移来指示可交互性。 · 通过背景颜色变化提供即时视觉反馈。

08

组件

button 高对比度的主按钮，采用标志性的电光黄背景和黑色文字。
card 简洁的白色表面，带有微妙边框或柔和阴影，常包含复杂的界面预览。
chip 小型、圆润的胶囊形标签或徽章，用于数据点和状态指示器。
input 极简输入框，主要由底边框或微妙的背景填充定义。
hero 大型、以排版为主的板块，包含醒目的标题、副标题和聚焦的电子邮件输入框。

09

文案语气与禁用清单

语气专业、直接且权威，聚焦于效率和财务成果。
标题风格 大胆、直接的陈述或提问，突出核心价值主张。
按钮文案 以行动为导向、清晰明了，常强调即时后续步骤或利益。

除标志性的电光黄外，不使用其他主色——截图显示其为唯一的高饱和度强调色。
所有文本均不使用衬线字体——截图显示严格的无衬线字体系统。
不在界面元素上使用厚重的投影或复杂的渐变——截图显示具有最小深度的扁平表面。
不使用过多的装饰性图标或表情符号——截图显示简洁、图标精简的界面。
不使用深色背景作为主容器——截图显示以白色和浅灰色为主的色板。
不为主文本内容使用多栏布局——截图显示聚焦、单栏的阅读宽度。
避免: 避免使用过于随意的语言或过多的感叹号。
避免: 避免使用杂乱或过于复杂的视觉布局，以免分散核心信息。

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