CURATED · OPEN · FREE

Slite

An AI-powered knowledge base that stays accurate and synced with your team's reality.

SaaSAIProductivityCleanCalm
Slite screenshot
↓ Download design system (13 MB)Open in OpenDesign

Visit: https://slite.com

📦 Browse pack contents →

01

Identity DNA

knowledgeverifiedsyncaccuracytrust

A well-organized, trustworthy library for your team's collective intelligence.

02

Color

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

Warm, high-contrast neutrals create an approachable yet professional feel, with a single vibrant orange accent for primary actions.

03

Typography

humanist-sans · geometric-sans

Use display and h1 tokens for primary and secondary headings to maintain visual hierarchy. · Maintain a consistent line-height of 1.6 for body text to ensure readability. · Use the small token for UI elements like navigation and badges to keep them unobtrusive.

04

Spacing

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

A 4px base grid with generous padding (120px) for major sections creates an open, breathable layout.

05

Surfaces

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

Layout

1280container
12columns
24pxgutter
768 / 1024breakpoints

Centered, single-column hero with a 3-column feature grid below.

07

Motion & Interaction

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

Subtle fade-in and slide-up animations for page load and scroll-triggered elements. · Smooth hover transitions for buttons and interactive elements.

Subtle background color change or shadow increase on buttons and links. · Immediate visual feedback (e.g., button press or color shift).

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

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 — 移动首屏
移动首屏

Captured from the live site · real computed styles

11

System prompt

Slite is a B2B SaaS product positioning itself as a trustworthy, AI-powered knowledge base for teams. The design is clean, professional, and approachable, using a warm off-white (#FDF9F4) background, dark grey (#3F434A) text, and a single vibrant orange (#F67748) accent for primary actions. The typography is a clean humanist sans-serif family (like UniversalSans) with a large, bold display font for headlines. The layout is spacious and centered, with generous padding and a 3-column grid for features. Critical donts: Never use a pure white background for the main canvas; don't introduce more than one primary accent color; never use serif fonts for display text; avoid sharp corners on cards and buttons; don't create dense layouts without ample whitespace; and don't use aggressive or hyperbolic language in headlines.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

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