Slite

---
version: alpha
name: Slite-design-analysis
description: A warm, editorial knowledge-base SaaS interface built on a near-white canvas (#fdfdfd) with cream content surfaces (#fdf9f4), an oversized Garnett display headline, and a single warm-orange CTA (#f67748). The system reads as calm and document-first — large pill buttons, deeply rounded cream cards (32px), real product UI fragments embedded inside cards, and hand-drawn doodle accents that soften an otherwise clean grid. Brand voltage comes from the big Garnett wordmark-scale headline and the warm orange action color against the cream paper.

colors:
  primary: "#f67748"
  primary-soft: "#ffbda6"
  primary-tint: "#f9efe4"
  ink: "#2d2f34"
  ink-strong: "#1d1e20"
  body: "#3f434a"
  muted: "#5e646e"
  muted-alt: "#6a707c"
  faint: "#9da3af"
  faint-alt: "#98999a"
  dark: "#2f2f30"
  black: "#000000"
  canvas: "#fdfdfd"
  surface: "#fdf9f4"
  white: "#ffffff"
  on-primary: "#ffffff"
  accent-purple: "#a478c4"
  accent-blue: "#176ae5"
  accent-blue-deep: "#0f57db"
  accent-blue-deeper: "#0a4ecd"
  accent-blue-soft: "#a2c3f5"

typography:
  display:
    fontFamily: "Garnett, Inter, sans-serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: normal
  title-lg:
    fontFamily: "Universal Sans, Inter, sans-serif"
    fontSize: 21.75px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: normal
  title-md:
    fontFamily: "Universal Sans, Inter, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: normal
  body:
    fontFamily: "Universal Sans, Inter, sans-serif"
    fontSize: 19.2px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: normal
  button:
    fontFamily: "Universal Sans, Inter, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: normal

rounded:
  none: 0px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 18px
  xl: 32px
  xxl: 40px
  pill: 999px
  full: 9999px

spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 40px
  xxxl: 48px
  huge: 60px
  section: 72px

components:
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.body}"
    typography: "{typography.button}"
  nav-link:
    backgroundColor: transparent
    textColor: "{colors.body}"
    typography: "{typography.button}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 0px 12px
  button-dark:
    backgroundColor: "{colors.ink-strong}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 0px 12px
  button-outline:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 0px 12px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.xl}"
  feature-card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.title-md}"
    rounded: "{rounded.xl}"
    padding: 32px
  product-ui-card:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
  badge-pill:
    backgroundColor: "{colors.primary-tint}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 0px 12px
  input:
    backgroundColor: "{colors.white}"
    textColor: "{colors.body}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
---

## Overview

Slite's marketing surface is a calm, document-first knowledge-base interface built on a warm near-white canvas (`{colors.canvas}` — #fdfdfd) with cream content surfaces (`{colors.surface}` — #fdf9f4). The voice is editorial and paper-like rather than glossy SaaS: an oversized **Garnett** display headline anchors the hero, and a single warm-orange action color (`{colors.primary}` — #f67748) carries every primary CTA against the cream paper.

Type splits into two roles: **Garnett** (a high-personality display face used at the hero scale of 64px / weight 500) and **Universal Sans** (the workhorse for headings, body, buttons, and UI labels). The display headline runs at a near-wordmark scale and sits beside hand-drawn doodle circles and underlines that soften the grid — the brand's signature visual flourish.

Component voltage comes from **real product UI fragments embedded directly inside cards** — the Slite editor sidebar, channel trees, "Verified / Self-maintained" badges, and maintenance-routine panels appear as actual product chrome at small scale rather than as marketing illustration. The cream `{component.card}` (deeply rounded at `{rounded.xl}` — 32px) is the system's primary container; product fragments often render on a brighter white surface (`{colors.white}`) nested inside.

Buttons are fully pill-shaped (`{rounded.pill}` — 999px). The dominant CTA is orange; a near-black `{component.button-dark}` ("Start for free") and an outlined `{component.button-outline}` ("Book demo") complete the action set in the top nav.

**Key Characteristics:**
- Warm paper palette: near-white canvas (`{colors.canvas}` — #fdfdfd) over cream card surfaces (`{colors.surface}` — #fdf9f4). No stark pure-white background page.
- Single warm-orange CTA (`{colors.primary}` — #f67748) for the primary action; everything else stays neutral.
- Oversized Garnett display headline (64px / weight 500) — high-personality, near-wordmark scale.
- Pill-shaped buttons (`{rounded.pill}` — 999px) across primary, dark, and outline variants.
- Deeply rounded cream cards (`{rounded.xl}` — 32px) holding embedded product UI fragments.
- Hand-drawn doodle accents (circles, underlines, scribbles) layered behind headlines and around hero artifacts.
- Soft, layered drop shadows on product cards; cream cards themselves run flat (shadow none).
- A secondary chromatic accent set — purple (`{colors.accent-purple}`) and a blue family (`{colors.accent-blue}` → `{colors.accent-blue-deeper}`) — surfaces only inside product UI fragments and integration glyphs, never on CTAs.

## Colors

### Brand & Accent
- **Primary** (`{colors.primary}` — #f67748): The warm-orange action color. All primary CTAs ("Keep your docs up to date"), plus the single orange focus-glow shadow observed on one interactive element. The defining brand voltage.
- **Primary Soft** (`{colors.primary-soft}` — #ffbda6): A lighter orange used for tints, doodle accents, and soft highlights.
- **Primary Tint** (`{colors.primary-tint}` — #f9efe4): A pale cream-orange wash used for badge pills and gentle highlight zones.
- **Accent Purple** (`{colors.accent-purple}` — #a478c4): Appears inside product UI fragments (icon accents, status dots). Not used on marketing CTAs.
- **Accent Blue family** (`{colors.accent-blue}` — #176ae5, `{colors.accent-blue-deep}` — #0f57db, `{colors.accent-blue-deeper}` — #0a4ecd, `{colors.accent-blue-soft}` — #a2c3f5): A blue ramp surfacing in product chrome, links, and integration glyphs. Slite keeps blue out of the hero action layer.

### Surface
- **Canvas** (`{colors.canvas}` — #fdfdfd): The default warm near-white page floor.
- **Surface** (`{colors.surface}` — #fdf9f4): Cream card background — feature cards, content cards, section panels.
- **White** (`{colors.white}` — #ffffff): A brighter pure white used for nested product UI fragments inside cream cards, and for input fills.

### Text
- **Ink** (`{colors.ink}` — #2d2f34): Headlines and max-contrast text (h3 measured ground-truth).
- **Ink Strong** (`{colors.ink-strong}` — #1d1e20): Near-black used for the dark button surface and the wordmark.
- **Body** (`{colors.body}` — #3f434a): Default running-text color (the most frequent measured text tone).
- **Muted** (`{colors.muted}` — #5e646e) / **Muted Alt** (`{colors.muted-alt}` — #6a707c): Secondary text, sub-labels, nav.
- **Faint** (`{colors.faint}` — #9da3af) / **Faint Alt** (`{colors.faint-alt}` — #98999a): Tertiary text, placeholders, fine-print.
- **Dark** (`{colors.dark}` — #2f2f30) / **Black** (`{colors.black}` — #000000): Deep neutral tones used in dark glyphs and compliance marks.
- **On Primary** (`{colors.on-primary}` — #ffffff): Text on the orange and dark buttons.

## Typography

### Font Family
The system runs two custom faces: **Garnett** for the hero display headline and **Universal Sans** for everything else (headings below h1, body, buttons, nav, UI labels). Both are commercial/custom typefaces — neither was flagged in `fonts_licensed`, but both are licensed faces that should not be assumed shippable. See the substitute note below.

The split is functional:
- Garnett (display, weight 500) — the hero h1 only, at near-wordmark scale
- Universal Sans (weights 400–700) — section headings, body copy, buttons, navigation

### Hierarchy

| Token | Family | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|---|
| `{typography.display}` | Garnett | 64px | 500 | 1.2 | normal | Hero h1 ("Verified knowledge, kept in sync with reality") |
| `{typography.title-lg}` | Universal Sans | 21.75px | 700 | 1.3 | normal | Section headings (h2) |
| `{typography.title-md}` | Universal Sans | 20px | 700 | 1.25 | normal | Card titles, sub-section heads (h3) |
| `{typography.body}` | Universal Sans | 19.2px | 400 | 1.4 | normal | Default running-text, descriptions |
| `{typography.button}` | Universal Sans | 15px | 600 | 1.0 | normal | Button labels, nav links, badge pills |

### Principles
Garnett is reserved for the single biggest moment on the page — the hero headline. Everything else is Universal Sans. Section headings use weight 700 at a relatively modest 20–22px, which keeps hierarchy reading as document-like rather than billboard-like. Body copy runs large (≈19px) for comfortable reading, in keeping with the knowledge-base subject matter.

### Note on Font Substitutes
**Garnett** and **Universal Sans** are commercial typefaces and should not be self-hosted without a license. For Garnett (a high-contrast geometric display face), **Fraunces** at a lower optical weight or **Inter** at weight 500 with slightly tightened tracking are usable substitutes — the substitution preserves the calm, mid-weight display feel but loses Garnett's character. For Universal Sans (a neutral grotesque), **Inter** is a close open-source substitute across all weights. The fallback stacks declared above walk `Inter, sans-serif`.

## Layout

### Spacing System
- **Base unit:** 4px.
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 40px · `{spacing.xxxl}` 48px · `{spacing.huge}` 60px · `{spacing.section}` 72px.
- **Dominant rhythm:** `{spacing.xs}` (8px) is by far the most frequent measured gap (158 occurrences), with `{spacing.sm}` (12px) next — the system packs UI fragments tightly inside cards.
- **Card / band spacing:** `{spacing.xl}` (32px) and `{spacing.xxl}` (40px) carry card internal padding and inter-card gaps; `{spacing.huge}` (60px) and `{spacing.section}` (72px) handle larger band separations.

### Grid & Container
- **Editorial body:** Centered single-column hero with the headline + sub-head + CTA stacked, followed by a large product-mockup card.
- **Feature grids:** 3-up feature cards ("Single source of truth" / "Knowledge bases go stale" / "Slite Agent finds answers"), reducing on smaller widths.
- **Sub-feature row:** 4-up label rows (Engineering / Product / Support / Sales) under the agent band.
- **Two-up content cards:** Larger maintenance cards pair 2-up below the feature grid.

### Whitespace Philosophy
Slite uses generous vertical breathing room between bands while keeping UI fragments inside cards tightly packed (8–12px gaps). The contrast — airy bands, dense product chrome — reinforces the "real product shown at small scale" reading.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Cream `{component.card}` surfaces, top nav, body bands |
| Soft layered | `rgba(0,0,0,0.1) 0 1px 3px`, `rgba(0,0,0,0.05) 0 2px 6px`, `rgba(0,0,0,0.01) 0 4px 12px` | Product UI cards / embedded fragments (most common elevated shadow, 17 occurrences) |
| Deeper layered | `rgba(0,0,0,0.01) 0 4px 16px`, `rgba(0,0,0,0.04) 0 4px 16px`, `rgba(0,0,0,0.06) 0 2px 12px`, `rgba(0,0,0,0.08) 0 1px 4px` | Larger floating product panels |
| Strong drop | `rgba(0,0,0,0.2) 0 2px 6px` | Small high-contrast popovers / chips |
| Orange focus glow | `rgb(246,119,72) 0 0 8px 1px` | A single focused/active interactive element — the orange focus ring |

The elevation philosophy is **soft and layered** — multiple low-alpha shadow stacks create gentle depth around product fragments. Cream content cards stay deliberately flat; depth is reserved for the embedded product chrome to make it feel "lifted off the page."

### Decorative Depth
- Hand-drawn doodle accents (circles around the headline, scribbled underlines, marginalia strokes) sit behind and beside content as a signature flourish — they read as ink-on-paper, reinforcing the cream-canvas voice.
- Embedded product UI fragments carry their own internal chrome shadows; these are product content, not system tokens.

## Shapes

### Border Radius Scale

| Token | Value | Use |
|---|---|---|
| `{rounded.none}` | 0px | Text inputs (measured square corners) |
| `{rounded.xs}` | 8px | Small chips, inner UI elements (most common small radius) |
| `{rounded.sm}` | 12px | Small cards, badges within product fragments |
| `{rounded.md}` | 16px | Medium cards, nested panels |
| `{rounded.lg}` | 18px | Product-UI cards and panels (frequent measured radius) |
| `{rounded.xl}` | 32px | Primary cream content cards — the signature deep round |
| `{rounded.xxl}` | 40px | Largest container rounding |
| `{rounded.pill}` | 999px | Buttons, badge pills |
| `{rounded.full}` | 9999px | Avatars, circular icon buttons (most frequent radius overall) |

### Photography & Glyph Geometry
Avatars and circular icon tiles use `{rounded.full}`. Integration glyphs and small status dots inside product fragments use the smaller radii (8–18px). The cream cards' 32px corners are the visual signature — soft, generous, paper-like.

## Components

### Top Navigation

**`top-nav`** — Warm near-white nav bar (`{colors.canvas}`). Carries the "slite" wordmark at left, a horizontal menu (Product, Solutions, Resources, Pricing) using `{component.nav-link}`, and a right cluster: "Sign in" text link, `{component.button-outline}` ("Book demo"), and `{component.button-dark}` ("Start for free"). Nav labels in `{typography.button}` (Universal Sans 15px / 600), text color `{colors.body}`.

**`nav-link`** — Inline menu item. Transparent background, `{colors.body}` text, `{typography.button}`.

### Buttons

**`button-primary`** — The signature warm-orange CTA. Background `{colors.primary}` (#f67748), text `{colors.on-primary}`, type `{typography.button}`, fully pill-shaped `{rounded.pill}` (999px), measured padding 0px 12px (the rendered button is much taller than the inline padding suggests — see Known Gaps). Used for "Keep your docs up to date" and inline section CTAs.

**`button-dark`** — Near-black secondary CTA. Background `{colors.ink-strong}` (#1d1e20), text `{colors.on-primary}`, `{rounded.pill}`. Used for "Start for free" in the top nav.

**`button-outline`** — Outlined tertiary button. Transparent background, `{colors.ink}` text, 1px outline, `{rounded.pill}`. Used for "Book demo."

### Cards & Containers

**`card`** — The primary cream content container. Background `{colors.surface}` (#fdf9f4), rounded `{rounded.xl}` (32px), no shadow (flat). Holds headings, body copy, and embedded product fragments.

**`feature-card`** — Used in the 3-up feature grid. Background `{colors.surface}`, rounded `{rounded.xl}`, internal padding `{spacing.xl}` (32px). Carries a small kicker label, a `{typography.title-md}` headline, and an inline CTA button; often embeds a product UI fragment (channel tree, approval row) below.

**`product-ui-card`** — A brighter white surface (`{colors.white}`) holding real Slite product chrome — editor sidebar, "Verified / Self-maintained" badges, maintenance-routine panels. Rounded `{rounded.lg}` (18px), carries the soft layered drop shadow to lift it off the cream card behind it.

### Tags / Badges

**`badge-pill`** — Small pill label ("Self-maintaining doc", "Knowledge base audit", "Agent-triggered review"). Background `{colors.primary-tint}` (#f9efe4), text `{colors.ink}`, type `{typography.button}`, rounded `{rounded.pill}`, padding 0px 12px.

### Inputs & Forms

**`input`** — Text input with measured square corners. Background `{colors.white}`, text `{colors.body}`, type `{typography.body}`, rounded `{rounded.none}` (0px). The square-cornered input is an unusual contrast against the otherwise heavily-rounded system — confirm before extending.

## Do's and Don'ts

### Do
- Reserve `{colors.primary}` (#f67748) for the single primary action. Slite's brand voltage is one warm orange against cream paper.
- Use `{colors.surface}` (#fdf9f4) cream cards as the default container, with `{colors.canvas}` as the page floor — avoid stark pure white at the page level.
- Keep Garnett for the hero headline only; everything else is Universal Sans.
- Embed real product UI fragments inside cards — show the actual Slite editor, channel tree, and verification badges rather than illustrating them.
- Pill-shape all buttons (`{rounded.pill}`) and deeply round content cards (`{rounded.xl}` — 32px).
- Let the doodle accents (circles, underlines) carry personality near the headline — they are signature, not noise.
- Reserve drop shadows for lifted product fragments; keep cream content cards flat.

### Don't
- Don't put the blue or purple accents on CTAs — those tones live inside product chrome and integration glyphs only.
- Don't bolden the Garnett display past weight 500; the mid-weight is part of the calm voice.
- Don't add heavy single-layer shadows; depth here is built from soft layered stacks at low alpha.
- Don't mix square corners outside inputs — the system is otherwise consistently rounded.
- Don't introduce a second action color; the orange CTA must stay singular.
- Don't add hover-state styling beyond default and pressed.

## Responsive Behavior

The reference captures were taken at desktop widths; the following describes observed structure and standard collapsing behavior. Exact breakpoint pixel values were not measured (see Known Gaps).

### Layout Adaptation
- The top nav's full horizontal menu collapses toward a condensed/hamburger arrangement at narrow widths; the dark "Start for free" CTA stays visible.
- The hero stays single-column (headline + sub-head + CTA, then the product-mockup card below) at all widths — it scales rather than re-flows.
- 3-up feature grids reduce to 2-up then 1-up; 4-up label rows reduce similarly.
- 2-up maintenance cards stack to single-column on narrow screens.
- Embedded product UI fragments scale proportionally; the cream cards resize around them.

### Touch Targets
- Pill buttons are tall enough to meet comfortable tap targets despite the small measured inline padding; verify final rendered height meets 44px.
- Nav links and badge pills should be padded to ≥44px effective tap area on touch.

## Iteration Guide

1. Focus on ONE component at a time and reference its YAML key directly (`{component.feature-card}`, `{component.product-ui-card}`).
2. Variants (`button-dark`, `button-outline`) are separate entries in `components:` — keep adding variants as discrete entries rather than props.
3. Use `{token.refs}` everywhere — never inline a hex.
4. Document default and active/pressed states only; never hover.
5. The hero is the only place Garnett appears. Body and headings stay Universal Sans.
6. The orange CTA is singular — when in doubt, scale Garnett up before adding a second accent color.
7. Cream cards stay flat; reserve the layered shadow stack for lifted product fragments.

## Known Gaps

- The measured `button-primary` reported text color `#3f434a` and padding `0px 12px` — the orange background and the rendered (much taller) button height were not directly captured by the component selector. Button background (`{colors.primary}`), dark variant, and outline variant are documented from screenshot ground-truth combined with the measured pill radius.
- **Garnett** and **Universal Sans** are commercial/custom typefaces though not flagged in `fonts_licensed`; open-source substitutes are documented in the Typography section and should be used unless a license is held.
- Button height, nav height, and exact card padding values were not all individually measured; padding figures are derived from the dominant spacing tokens where noted.
- Active/pressed and focus states are undocumented beyond the single observed orange focus-glow shadow (`rgb(246,119,72) 0 0 8px 1px`).
- Responsive breakpoint pixel values were not measured; collapsing behavior is inferred from desktop captures and standard SaaS patterns.
- The square-cornered `{component.input}` (radius 0px) is from a single measured input; form field fill, border color, and focus treatment were not captured.
- Animation and transition timings (doodle reveals, card hover lift, agent panels) are out of scope.
- The blue/purple accent ramp is observed inside product UI fragments; precise semantic roles (link vs. icon vs. status) were not individually resolved.

<!-- Documented by duply · real-world design systems as ready-to-use DESIGN.md for AI coding agents · https://duply.ai/slite/design-md -->