精選 · 開放 · 免費

Slite

由 AI 驅動的知識庫，能精準同步您團隊的實際狀態。

SaaSAIProductivityCleanCalm
Slite 網站截圖
↓ 下載設計系統包 (13 MB)在 OpenDesign 中開啟

原站: https://slite.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

知識已驗證同步精準度可信度

一個組織完善、值得信賴的團隊集體智慧圖書館。

02

色彩

#F67748Accent
#3F434AInk
#2D2F34Ink soft
#FDF9F4BG
#FFFFFFBG soft
#A8AAAFMuted
rgba(244,244,244,1.0)Line

溫暖的高對比中性色調創造易於親近又具專業感的氛圍，並以單一鮮明橘色作為主要行動的強調色。

03

字型

humanist-sans · geometric-sans

使用 display 與 h1 標記作為主副標題，以維持視覺層次。 · 內文行高統一設定為 1.6，確保閱讀舒適度。 · 導覽列與徽章等 UI 元素使用 small 標記，保持視覺上的低調感。

04

間距

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

以 4px 為基準網格，主要區塊採用寬裕的 120px 內距，創造開闊且具呼吸感的佈局。

05

表面 (圓角 / 陰影 / 邊線)

sm · 6px
md · 10px
lg · 16px
pill · 999px

1px solid rgba(244,244,244,1.0)

rgba(0, 0, 0, 0.3) 0px 32px 68px 0px · rgba(0, 0, 0, 0.06) 0px 1px 0px 0px

06

版面

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中單欄主視覺，下方銜接三欄功能網格。

07

動效與互動

220msmicro
400mssmall
800msmedium
cubic-bezier(0.215, 0.61, 0.355, 1)easing

頁面載入與滾動觸發元素採用細膩的淡入與上滑動畫。 · 按鈕與互動元件提供流暢的 hover 過渡效果。

按鈕與連結在 hover 時產生細微的背景色變化或陰影增強。 · 提供即時視覺回饋（例如按鈕按下效果或色彩變化）。

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

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

擷取自真實頁面 · 真 computed styles

11

System Prompt

Slite 是一款 B2B SaaS 產品，定位為團隊值得信賴的 AI 驅動知識庫。其設計簡潔、專業且易於親近，採用溫和的米白色（#FDF9F4）背景、深灰色（#3F434A）文字，以及單一鮮明的橘色（#F67748）作為主要行動強調色。字體排印採用簡潔的人文主義無襯線字體家族（如 UniversalSans），標題使用大而粗的 display 字體。佈局寬敞居中，內距充足，並以三欄網格呈現功能。關鍵禁忌：主要畫布切勿使用純白背景；勿引入單一以上的主強調色；展示文字切勿使用襯線字體；卡片與按鈕避免尖銳邊角；勿建立缺乏充足留白的密集佈局；標題避免使用強勢或誇大的語言。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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