精选 · 开放 · 免费

Typesense

一个简洁、面向开发者的 SaaS 落地页，用于推广一款开源搜索引擎。

devsearch
Typesense 网站截图
↓ 下载设计系统包 (29 MB)在 OpenDesign 中打开

原站: https://typesense.org

📦 浏览包内文件 →

01

设计气质 DNA

搜索开源快速开发者API

一个为追求无繁琐搜索体验的开发者打造的锐利、实用的工具箱。

02

色彩

#353FD7Accent
#000000Ink
#4D4D4DInk soft
#FAFAFABG
#FFFFFFBG soft
#F1F1F1BG quiet
#999999Muted
rgba(229,231,235,1)Line

高对比度、以黑与浅灰为主的单色调色板，点缀活力靛蓝色与标志性的高饱和度石灰绿用于交互元素。

03

字体

geometric-sans · humanist-sans · monospace

使用粗体几何无衬线字体作为展示标题。 · 使用简洁的人文主义无衬线字体作为正文，采用细字重。 · 等宽字体保留用于代码片段和技术要点。

04

间距

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

采用一致的 4px 基础网格，广泛用于组件内部间距（内边距和间隙）。

05

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

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

1px solid rgb(229,231,235)

rgba(0,0,0,0.1) -5px 4px 34px 0px · rgba(0,0,0,0.2) 0px 10px 15px -3px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中的单栏主内容区，留有充足空白，特性卡片部分转为多栏网格。

07

动效与交互

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

交互元素上平滑的颜色和背景过渡。 · 用于菜单或元素揭示的裁剪路径动画。 · 主要操作按钮上的细微 hover 变换。

交互元素上的颜色变化、细微背景改变或轻微向上位移。 · 标准指针光标，提供即时视觉反馈。

08

组件

09

文案语气与禁用清单

10

包内真实截图

Typesense — 桌面首屏（hero）
桌面首屏（hero）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 移动首屏
移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

这是一个面向开发者的 SaaS 落地页，用于推广一款开源搜索引擎。其视觉识别干净、自信且略带趣味，使用以浅色为主的背景与高对比度排版。关键颜色包括：用于主要墨色的纯黑 (#000000)、用于强调的活力靛蓝色 (#353FD7)，以及用于主要操作和交互高亮的标志性高饱和度石灰绿 (#C0FF58)。排版特点是使用粗体几何无衬线字体作为展示文本，以及简洁的人文主义无衬线字体作为正文。关键设计约束：切勿使用深色背景作为主画布；避免在交互元素上使用尖锐的直角；并避免使用柔和、低对比度的颜色，以免降低界面的锐利度和清晰度。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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