Slite — warm illustrated knowledge-base landing page

---
version: alpha
name: Slite — warm illustrated knowledge-base landing page
colors:
  surface: '#fdf9f4'
  ink: '#3f434a'
  accent: '#f67748'
  primary: '#3f434a'
typography:
  primary:
    fontFamily: Garnett
    fontSize: 64px
    fontWeight: 500
    lineHeight: 76.8px
  body:
    fontFamily: UniversalSans
    fontSize: 19.2px
    fontWeight: 400
    lineHeight: 26.88px
  control:
    fontFamily: UniversalSans
    fontSize: 15px
    fontWeight: 600
    lineHeight: 15px
components:
  primary-text:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
  sampled-control:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
rounded:
  control: 999px
---

## Overview

A cream knowledge-base landing page with large Garnett typography, coral pill actions, hand-drawn accents and framed product demonstrations arranged among pastel feature cards.

Source: https://slite.com/. Captured 2026-10-09T06:23:50.289553+00:00. This guide describes the observed page, not an official brand specification.

## Colors

Observed surface and computed-style palette: surface: #fdf9f4; ink: #3f434a; accent: #f67748; primary: #3f434a. Keep the documented accents distinct from neutral copy and form surfaces. Decorative artwork contains additional tones not represented by these core tokens.

## Typography

The primary sampled text uses Garnett, FixEmoji, sans-serif at 64px/76.8px, weight 500, with normal tracking. The body sample uses UniversalSans, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" at 19.2px/26.88px. These are measured element styles, not a universal brand scale.

## Layout

Center the opening promise, supporting copy and coral action over a framed product demonstration. Use pale scribbles around the hero, followed by customer marks and a three-part feature row. Continue through integration graphics, maintenance cards, review/diff demonstrations, enterprise search, agent-ready knowledge, security, testimonials and three small pricing cards. Close with a centered invitation and a multi-column footer.

The main screenshot records a 1440px-wide desktop page with a document height of 11606px. Mobile evidence is the opening 390×844px viewport, not a complete mobile-page audit.

At 390px navigation becomes a wordmark/menu row. The mobile hero uses verification and integration badges within a reflowed heading, then stacked supporting text, trust marks and a broad coral action. A product-demo container is independently scrollable; its unshown internal content is not claimed as captured.

## Elevation & Depth

Warm cream is the base; near-white product windows and pale peach, pink, green and blue panels organize the features. Fine outlines and restrained shadows keep demos legible without turning every block into an elevated card. Exact shadow blur and motion easing were not measured.

## Shapes

The sampled action has a computed corner radius of 999px and padding 0px 12px. Treat additional spacing or breakpoint choices as adaptation decisions, not measured source constants.

## Components

The consent banner was rejected through its Do not allow control. Product demonstrations animate independently, so desktop and mobile may show different example documents. Source customer claims, security marks and testimonials are displayed content, not independently verified outcomes.

## Do's and Don'ts

- Do preserve the documented hierarchy and observed mobile content order.
- Do keep field labels, source attribution and alternative actions visibly associated with their content.
- Do treat prices, metrics and testimonials as dated source content, not verified results.
- Don't infer unseen interaction states, successful authentication or application behavior.
- Don't reproduce low-contrast text without checking accessibility in the new implementation.