# Slite · Design system migration spec

> Source: https://slite.com  ·  Curated by OpenDesign  ·  en

> This site is a strong example of modern B2B SaaS design, balancing professionalism with a warm, approachable aesthetic through its careful use of color, typography, and whitespace.

## 1. Identity DNA

The design system for Slite is built to function like a well-organized, trustworthy library for your team's collective intelligence. Every choice, from the warm canvas to the confident typography, reinforces a sense of knowledge, accuracy, and verified sync. The result is an interface that feels both professionally authoritative and approachably human.

**One-liner:** An AI-powered knowledge base that stays accurate and synced with your team's reality.
**Keywords:** knowledge · verified · sync · accuracy · trust
**Analogy:** A well-organized, trustworthy library for your team's collective intelligence.

## 2. Color

Color is deployed with restraint to direct attention and establish mood. A warm, high-contrast neutral palette creates an approachable foundation, while a single, vibrant orange accent is reserved exclusively for primary actions.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FDF9F4` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--ink` | `#3F434A` | body text |
| `--ink-soft` | `#2D2F34` | secondary text |
| `--muted` | `#A8AAAF` | placeholder |
| `--accent` | `#F67748` | single accent |
| `--line` | `rgba(244,244,244,1.0)` | divider |

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

The principle is clear: the color system exists to support clarity and guide the user, never to decorate.

## 3. Typography

The typographic voice is confident and clear, set in a clean, humanist sans-serif. Display and headline tokens establish a strong hierarchy, while a consistent body line-height ensures calm, readable blocks of text.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 600 | -1.5px | Primary hero headline |
| h1 | 36px | 1.2 | 600 | -0.5px | Section headings |
| body | 16px | 1.6 | 400 | 0px | General body copy |
| small | 13.6px | 1.45 | 400 | 0px | UI labels and secondary text |

**Type rules:**
- 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.

## 4. Spacing

Rhythm is established through a strict 4px base grid and generous section padding, creating an open, breathable layout that guides the eye naturally.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 120 px
- **Rhythm:** A 4px base grid with generous padding (120px) for major sections creates an open, breathable layout.

## 5. Surfaces

Surfaces are defined by subtle depth rather than heavy ornamentation. Light background cards use gentle shadows or fine, light borders to create hierarchy without visual noise.

- **Radius:** sm 6px · md 10px · lg 16px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.3) 0px 32px 68px 0px
  - rgba(0, 0, 0, 0.06) 0px 1px 0px 0px
- **Borders:** 1px solid rgba(244,244,244,1.0)

## 6. Layout

The layout skeleton prioritizes focus and clarity. A centered, single-column hero anchors the top of the page, which then flows into a structured, three-column grid for feature presentation.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is used sparingly to confirm state changes and add polish without distraction. Subtle fade-in and slide-up animations provide a smooth, professional feel for page loads and scroll-triggered reveals.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.215, 0.61, 0.355, 1)`
- **Patterns:**
  - Subtle fade-in and slide-up animations for page load and scroll-triggered elements.
  - Smooth hover transitions for buttons and interactive elements.

- **Hover:** Subtle background color change or shadow increase on buttons and links.
- **Click:** Immediate visual feedback (e.g., button press or color shift).
- **Transition:** Use cubic-bezier(0.215, 0.61, 0.355, 1) for a smooth, natural feel on transforms and shadows.
- **Keyboard:** Standard focus indicators (e.g., outline) for accessibility on interactive elements.

## 8. Voice & Don'ts

The editorial voice is confident, clear, and helpful, focusing on benefits with direct, active language. It communicates trust and accuracy without resorting to hyperbole or jargon.

- **Tone:** Confident, clear, and helpful, focusing on accuracy and trust.
- **Headline style:** Direct, benefit-oriented, and slightly formal, using active voice.
- **CTA style:** Action-oriented and encouraging (e.g., 'Keep your docs up to date').
- **Avoid:** Hyperbolic claims / Jargon-heavy explanations / Aggressive or pushy language

### Don'ts
- ❌ Don't use a pure white background — the screenshot shows a warm off-white (#FDF9F4) as the primary canvas.
- ❌ Don't use a primary accent color other than orange — the screenshot shows a single, vibrant orange (#F67748) for CTAs.
- ❌ Don't use serif fonts for headlines — the screenshot consistently uses a clean, humanist sans-serif.
- ❌ Don't use sharp, rectangular corners for major components — the screenshot shows consistently rounded corners (6px to pill).
- ❌ Don't use dense, multi-column layouts for hero sections — the screenshot shows a spacious, centered, single-column approach.
- ❌ Don't use dark mode or high-saturation color backgrounds — the screenshot maintains a light, airy, and neutral palette.

The system deliberately avoids dense layouts, aggressive language, and a pure white canvas, choosing instead spaciousness, warmth, and measured communication.

## System Prompt (paste into AI tool)

```
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.
```