精選 · 開放 · 免費

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

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