精选 · 开放 · 免费
Qatalog
一款消除工作分散、统一生产力的企业级AI工作空间。
SaaSProductivityAICleanTooling
01
设计气质 DNA
AI生产力工作空间企业级统一
面向现代团队的AI驱动指挥中心,融合工具与信息。
02
色彩
#5D5D85Accent
#292D34Ink
#646464Ink soft
#FFFFFFBG
#F0F0F0BG quiet
#838383Muted
rgba(41, 45, 52, 0.1)Line
以干净、高对比度的白色为基础,搭配中性灰和单一紫色点缀,营造高端、专注的视觉美感。
03
字体
humanist-sans · monospace
- display
60px · 700 - headline
18px · 500 - body
16px · 400 - caption
14px · 400
展示标题使用紧凑的字距和粗体权重,以传达权威感。 · 正文保持舒适的行高,以确保可读性。 · 等宽字体专用于特定的技术标签或代码元素。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
通过4px的倍数建立一致的垂直和水平节奏。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 30px
使用浅灰色的细微1px边框来定义卡片边缘和容器。
0px 4px 12px rgba(0, 0, 0, 0.08)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
响应式布局,从桌面端的多列网格过渡到移动端的单列堆叠。
07
动效与交互
200msmicro
250mssmall
800msmedium
cubic-bezier(0.5, 0, 0.5, 1)easing
交互元素上微妙的opacity和transform过渡。 · UI状态变化时平滑的缓动效果。
通过背景色或字体权重的微妙变化来指示交互性。 · 通过颜色变化或细微缩放提供即时视觉反馈。
08
组件
- button 主按钮为高对比度的圆润胶囊形状,次级按钮则使用较浅的背景色。
- card 卡片通过细微的边框和充足的内边距来定义,偶尔会使用柔和的渐变或背景图像。
- chip 用于状态更新或类别标记的小型圆角标签或标记。
- input 搜索栏具有明显的圆角和集成的图标。
- hero 大段文字内容,搭配动态的、以AI为中心的插图或产品模型。
09
文案语气与禁用清单
- 语气 自信、专业且富有前瞻性。
- 标题风格 清晰、以效益为导向的陈述,强调AI集成和统一的工作方式。
- 按钮文案 直接且以行动为导向,聚焦于开始免费之旅或获取演示。
- 不要使用深色主题作为主要模式——截图显示的是浅色主题配深色文字。
- 不要使用装饰性的衬线字体——截图显示的是人文主义无衬线字体。
- 不要使用高饱和度或霓虹色作为主要强调色——截图显示的是以紫色点缀的克制调色板。
- 不要在主按钮上使用尖锐的方形圆角——截图显示的是圆润的胶囊形状。
- 不要使用过多的投影或厚重的3D效果——截图显示的是干净的平面或带有细微边框的表面。
- 不要在移动端使用复杂的多列网格——截图显示的是小屏幕上的单列堆叠。
- 避免: 过于技术性的术语
- 避免: 被动语态
- 避免: 泛泛的企业流行语
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
一款为企业生产力设计的优质AI工作空间工具,采用干净的浅色主题,白色基础(#FFFFFF)和中性灰(#292D34, #646464)。字体使用人文主义无衬线字体,展示标题采用紧凑字距。紫色(#5D5D85)作为主要强调色。布局为响应式12列网格。关键注意事项:避免深色主题、避免衬线字体、避免霓虹色、避免方形按钮、避免厚重阴影、避免复杂的移动端网格。
en · zh-CN · zh-TW · ja · ko