Ramp 网站预览
Ramp 网站预览

Ramp

编辑型金融工作台,黑白页面配以单个荧光笔。近乎单色的出版表面,唯独翠绿色标记将每一次互动转化为金钱信号。

Ramp 作为一个黑白分明的编辑系统,仅以一道高亮的黄色点缀——这相当于一本金融期刊中用荧光笔勾画的视觉效果。界面整体保持近乎单色:温暖的米白色画布、白色卡片、细线灰色边框,以及深近黑色的文字。唯一鲜明的翠绿色(#e4f222)仅在涉及金钱流动的地方出现——如行动号召(CTAs)、实时计数器和激活状态,使每一次操作都显得生动而有响应感。字体采用单一粗细的无衬线定制字体(lausanne),字重400,用于大尺寸展示,行高(lineHeight)在64px时约为1.0,且在小字号大写标签中具有正向字间距。组件为扁平化设计,带有细线边框且无阴影:卡片依靠边框支撑,而非阴影,圆角为12–16px;按钮为6px圆角矩形。整体密度舒适,节奏为8/12/16/24px,运动效果中等且以实用为导向,而非装饰性。

查看原始网站

使用规范

建议采用

  • 使用 lausanne 字重400,仅此一种——绝不引入粗体或中粗变体;层级通过大小和字间距实现。
  • 仅将 #e4f222 用于主要操作填充、实时计数器和激活状态——绝不可作为背景晕染或装饰性高亮。
  • 通过1px #e5e7eb边框表达卡片的抬升效果,填充为#ffffff时——除导航栏内嵌白色高亮外,禁止使用box-shadow。
  • 将展示标题设为64px / 48px / 40px,行高≤1.05,以保持编辑类字体的语感。
  • 在10px大写微标签和计量说明上,应用0.018em正字间距。
  • 按钮和标签使用6px圆角,输入框使用10px,清洗卡片使用12px,内容卡片使用16px。
  • 在每个 lausanne 声明中加入 "ss01" 到 font-feature-settings 以保留字体的编辑风格特征。

建议避免

  • 不要引入额外的色彩高亮——该系统的效力依赖于单个高亮黄色彩信号与单色背景的对比。
  • 不要使用粗体或中粗字重——在较大尺寸下,lausanne 400已承载全部标题层级。
  • 不要在内容卡片、弹窗或面板上使用box-shadow——改用1px #e5e7eb边框。
  • 不要将#0c0a08用于大区域背景填充——仅保留用于文字;倒置面板使用#1a1919。
  • 不要居中正文或标题——Ramp 的布局在最大宽度居中容器内始终左对齐。
  • 不要添加装饰性渐变、插图或图片素材——视觉语言仅限于字体、产品截图和灰度标志。
  • 不要在UI元素上使用超出系统的圆角:仅限6 / 10 / 12 / 16px——绝不可使用4px或完全圆润的胶囊形设计。