精选 · 开放 · 免费

Rippling

通过AI将人力资源、IT、财务与薪酬管理无缝集成的智能化平台。

fintechsaas
Rippling 网站截图
↓ 下载设计系统包 (17 MB)在 OpenDesign 中打开

原站: https://www.rippling.com

📦 浏览包内文件 →

01

设计气质 DNA

统一平台业务运营AI驱动高效集成化

如同企业神经中枢,替代数十个零散工具。

02

色彩

#FFA81DAccent
#000000Ink
rgba(0,0,0,0.7)Ink soft
#7A005DBG
#E1D8D2BG soft
#FFFFFFBG quiet
#383838Muted
rgba(255,255,255,0.15)Line

深邃饱和紫色主视觉区与纯净白色内容区形成高对比度,活力橙色作为强调色贯穿全局。

03

字体

geometric-sans · humanist-sans · monospace

大尺寸展示标题采用紧凑字间距。 · 小型界面文字使用略松字间距(0.25px)。 · 建立清晰的字重层级:标题500/正文400。

04

间距

4px
8px
12px
16px
24px
32px
48px
64px
96px

基于4px增量的统一纵向节奏,主要板块间保留充足留白(40px-64px)。

05

表面 (圆角 / 阴影 / 边线)

sm · 4px
md · 8px
lg · 12px
pill · 9999px

极简边框应用,主要通过间距与色彩差异分隔内容。主边框色值为rgb(229, 231, 235)。

0px 6px 6px 0px rgba(0, 0, 0, 0.06) · 0px 96px 160px 48px rgba(27, 16, 20, 0.6)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中最大宽度容器,主视觉区采用双栏结构(内容左侧/视觉右侧),内容板块使用全宽居中单栏。

07

动效与交互

150msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

交互元素采用微妙的透明度与色彩过渡。 · 悬停时平滑改变背景色与透明度。

文字与背景色在0.15秒内完成微妙色彩过渡。 · 即时视觉反馈,常表现为细微缩放或色彩偏移。

08

组件

09

文案语气与禁用清单

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

这是Rippling,一个B2B SaaS平台。其设计基因是高端、简洁且权威的,专注于整合复杂业务运营。主色调为深紫色(#7A005D)用于主视觉区,活力橙色(#FFA81D)用于强调与行动号召,纯净白色/米色用于内容区域。字体采用几何无衬线与人文无衬线类别,建立清晰字重层级(标题500/正文400)。关键禁忌:避免紫色背景上的低对比度文字,不使用多种字重,避免界面元素的尖锐边角。布局宽敞居中,采用12列网格,最大宽度1280px。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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