精选 · 开放 · 免费
Refero
一个为产品界面、流程和模式策展的设计库与搜索引擎。
designgallery
01
设计气质 DNA
设计研究策展AI 智能体参考资料库以人为本
一个精致、通透的设计档案库,同时也是智能的研究助手。
02
色彩
#000000Ink
rgba(2,18,73,0.38)Ink soft
#F7F8FBBG
#EEF0F6BG soft
#FFFFFFBG quiet
#9FA5BAMuted
浅色通透的冷灰背景上使用高对比度的黑色排版,多彩的调色板仅用于浮动 UI 资源。
03
字体
transitional-serif · humanist-sans
- display
80px · 400 - body
20px · 400 - label
16px · 500
展示性字体使用过渡衬线体,营造优雅、权威的标题效果。 · 正文和 UI 文本使用简洁的人文主义无衬线体。 · 排版大量依赖字重 500,营造现代、中等字重的观感。
04
间距
4px
8px
12px
16px
24px
32px
48px
64px
96px
宽松的留白定义了布局,创造出通透、画廊般的韵律感。
05
表面 (圆角 / 阴影 / 边线)
sm · 6px
md · 8px
lg · 20px
pill · 999px
1px solid rgba(2,18,73,0.38)
0px 0px 0px 2px #F7F8FB inset · 0px 0px 0px 2px rgba(45, 49, 63, 0.2) · 0px 1px 3px 0px rgba(12, 41, 126, 0.09) · 0px 3px 8px 0px rgba(12, 41, 126, 0.09) · 0px 8px 16px 0px rgba(12, 41, 126, 0.07)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
流动、居中的容器,具有宽松的边距和干净、通透的网格结构。
07
动效与交互
150msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover 状态下的平滑过渡(box-shadow、opacity、border-radius) · 首屏装饰性 UI 资源采用浮动或缩放动画。
通过 box-shadow 和 opacity 调整实现微妙的层次感变化。 · 通过缩放或颜色变化提供即时响应。
08
组件
- button 主按钮为药丸形状,纯黑背景配白色文字;次级按钮为柔和的灰色背景。
- card 浅灰色容器,带有柔和阴影,常用于展示 UI 资源或浮动网格元素。
- chip 小巧、圆润的药丸标签,用于分类 UI 元素和页面类型。
- input 简洁的搜索栏,带有圆角和微妙的灰色边框。
- hero 大面积的居中文字区域,周围环绕着浮动的彩色 UI 资源预览。
09
文案语气与禁用清单
- 语气 专业、有帮助、权威且平易近人。
- 标题风格 直接、以行动为导向的陈述,强调人与 AI 的协作。
- 按钮文案 清晰、以行动为导向的标签,例如“开始探索”或“登录或注册”。
- 不要使用扁平的无衬线标题 —— 截图显示的是优雅、高对比度的过渡衬线展示字体。
- 不要使用单一、单色的品牌配色方案 —— 截图显示的是一系列多彩的浮动 UI 资源。
- 不要默认使用厚重、深色的容器或深色模式 —— 截图显示的是以白色和浅灰色为主的通透背景。
- 不要对所有元素使用尖锐的 4px 圆角 —— 截图显示的是 8px、20px 和完全圆润的药丸形状的混合使用。
- 不要使用密集、杂乱的布局 —— 截图显示的是大量留白和透气的画廊结构。
- 不要对主按钮使用刺眼、明亮的强调色 —— 截图显示的是纯黑色的药丸按钮。
- 避免: 术语堆砌的描述
- 避免: 销售或过度推广的语言
- 避免: 激进的行动号召
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
Refero 是一个设计研究工具和画廊,为人类和 AI 提供策展的产品界面、流程和模式。其设计特点是轻盈、通透的配色,使用柔和的冷灰色(#F7F8FB、#EEF0F6)、深黑色(#000000)排版,以及仅存在于浮动 UI 资源预览中的多样化彩色点缀。字体搭配上,展示部分使用经典的过渡衬线体,正文使用现代的人文主义无衬线体。关键设计规则包括:优先考虑宽松的留白和透气的布局;绝不使用厚重、密集的容器;确保黑色文本与浅色背景之间的高对比度。界面依靠微妙的层次感变化和平滑的微交互,营造精致、高端的体验。
en · zh-CN · zh-TW · ja · ko