精选 · 开放 · 免费
Rippling
通过AI将人力资源、IT、财务与薪酬管理无缝集成的智能化平台。
fintechsaas
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
- display
48px · 500 - heading
32px · 500 - body
16px · 400 - small
14px · 400 - micro
12px · 400
大尺寸展示标题采用紧凑字间距。 · 小型界面文字使用略松字间距(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
组件
- button 主操作按钮为橙色(强调色)圆角药丸样式;次级操作采用带下划线的文字链接。
- card 浅米灰(bgSoft)卡片配柔和阴影与中圆角(md)。
- chip 用于导航与分类标识,通常采用浅色背景与微边框。
- input 白色背景输入框配微边框与中圆角(md),常纵向排列。
- hero 全宽深紫色背景板块,搭配大型展示标题与醒目邮箱订阅表单。
09
文案语气与禁用清单
- 语气 自信权威,以效益为导向。
- 标题风格 简短有力,聚焦核心价值主张。
- 按钮文案 直接行动导向,使用高对比度亮色按钮。
- 避免在紫色背景上使用低对比度主文本——截图显示采用高对比度黑白文字。
- 避免使用过多字重——截图显示严格限定400/500两级字重。
- 避免按钮与卡片使用尖锐直角——截图显示采用圆角(8px/12px/药丸形)。
- 避免使用杂乱多彩配色——截图显示聚焦于深紫、橙、黑、白、米色系。
- 避免使用密集紧凑布局——截图显示元素间保留充足间距(24px-64px)。
- 避免使用装饰性衬线字体——截图显示采用简洁的几何无衬线与人文无衬线字体类别。
- 避免: 脱离语境的行业术语
- 避免: 模糊承诺
- 避免: 被动语态
- 避免: 拥挤布局
- 避免: 不一致的字体排印
- 避免: 低对比度文本
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是Rippling,一个B2B SaaS平台。其设计基因是高端、简洁且权威的,专注于整合复杂业务运营。主色调为深紫色(#7A005D)用于主视觉区,活力橙色(#FFA81D)用于强调与行动号召,纯净白色/米色用于内容区域。字体采用几何无衬线与人文无衬线类别,建立清晰字重层级(标题500/正文400)。关键禁忌:避免紫色背景上的低对比度文字,不使用多种字重,避免界面元素的尖锐边角。布局宽敞居中,采用12列网格,最大宽度1280px。
en · zh-CN · zh-TW · ja · ko