01
设计气质 DNA
设计研究策展AI 智能体参考资料库以人为本
一个精致、通透的设计档案库，同时也是智能的研究助手。
02
色彩
#000000Inkrgba(2,18,73,0.38)Ink soft#F7F8FBBG#EEF0F6BG soft#FFFFFFBG quiet#9FA5BAMuted浅色通透的冷灰背景上使用高对比度的黑色排版，多彩的调色板仅用于浮动 UI 资源。
03
字体
- display
80px · 400 - body
20px · 400 - label
16px · 500
展示性字体使用过渡衬线体，营造优雅、权威的标题效果。 · 正文和 UI 文本使用简洁的人文主义无衬线体。 · 排版大量依赖字重 500，营造现代、中等字重的观感。
04
间距
4px8px12px16px24px32px48px64px96px宽松的留白定义了布局，创造出通透、画廊般的韵律感。
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
包内真实截图
11
System Prompt
Refero 是一个设计研究工具和画廊，为人类和 AI 提供策展的产品界面、流程和模式。其设计特点是轻盈、通透的配色，使用柔和的冷灰色（#F7F8FB、#EEF0F6）、深黑色（#000000）排版，以及仅存在于浮动 UI 资源预览中的多样化彩色点缀。字体搭配上，展示部分使用经典的过渡衬线体，正文使用现代的人文主义无衬线体。关键设计规则包括：优先考虑宽松的留白和透气的布局；绝不使用厚重、密集的容器；确保黑色文本与浅色背景之间的高对比度。界面依靠微妙的层次感变化和平滑的微交互，营造精致、高端的体验。