OpenDesign·你的设计资产库

网页参考

Ramp

面向财务自动化和企业支出管理的高端 SaaS 平台。

FintechSaaS

封面待补录，可通过原站查看设计。

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 — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

Ramp 是一个为企业支出管理和自动化而设计的高端金融科技 SaaS 平台。其视觉系统基于简洁、高对比度的中性色板构建，以白色 (#FFFFFF) 和浅灰色 (#F4F2F0) 为主导，以深邃的黑色文本 (#000000) 为锚点。标志性的电光黄 (#DFFF00) 作为按钮和关键高亮区域的主要操作色。字体排印上严格使用几何无衬线字体，强调清晰度和现代感。关键的设计约束包括：永不使用衬线字体、避免复杂的渐变或厚重的阴影、保持充裕的留白。整体美学专业、高效且具企业级品质，专注于数据清晰度和任务完成。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明，可复制给 Agent。