---
name: Slite
description: "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."
version: alpha

colors:
  background: "#FDF9F4"
  primary: "#3F434A"
  secondary: "#2D2F34"
  tertiary: "#F67748"
  neutral: "#A8AAAF"
  bg-soft: "#FFFFFF"
  line: "rgba(244,244,244,1.0)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 600
    letterSpacing: "-1.5px"
  h1:
    fontFamily: humanist-sans
    fontSize: 36px
    lineHeight: 1.2
    fontWeight: 600
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: humanist-sans
    fontSize: 13.6px
    lineHeight: 1.45
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 6px
  md: 10px
  lg: 16px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

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

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

## Colors

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

- **Background (`#FDF9F4`)** — uses `bg` token
- **Primary text (`#3F434A`)** — uses `ink` token
- **Secondary text (`#2D2F34`)** — uses `ink-soft` token
- **Accent (`#F67748`)** — uses `accent` token
- **Muted (`#A8AAAF`)** — uses `muted` token
- **Borders (`rgba(244,244,244,1.0)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** 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.

## Layout

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

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

## Elevation & Depth

- 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)

## Shapes

- `sm`: 6px
- `md`: 10px
- `lg`: 16px
- `pill`: 999px

## Components

- **button:** Pill-shaped, high-contrast primary buttons (orange bg, white text) and ghost buttons (outlined).
- **card:** Light background cards with subtle shadows or outlines, containing headings and lists.
- **chip:** Pill-shaped tags with icons (e.g., 'Verified', 'Self-maintained') and soft background colors.
- **input:** Clean, minimal search or input fields with subtle borders and rounded corners.
- **hero:** Large, centered headline with a subheadline, primary CTA button, and trust badges (SOC 2, HIPAA, GDPR).

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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