---
version: alpha
name: Slite — coral-highlighted knowledge-base plan comparison
colors:
  surface: '#fdf9f4'
  ink: '#3f434a'
  accent: '#f67748'
  primary: '#3f434a'
typography:
  primary:
    fontFamily: Garnett
    fontSize: 56px
    fontWeight: 500
    lineHeight: 67.2px
  body:
    fontFamily: UniversalSans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  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 warm cream pricing page with three plan cards, a coral-framed recommended tier, a long feature matrix, testimonial columns and FAQs.

Source: https://slite.com/pricing. Captured 2026-10-09T06:23:41.530962+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 56px/67.2px, 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 16px/24px. These are measured element styles, not a universal brand scale. The matching mobile primary sample uses 33.75px/40.5px.

## Layout

Center a two-line heading above Basic, Pro and Enterprise cards. Raise and outline Pro with a coral recommendation bar; keep the other cards quiet and white. Place customer logos below the cards, then a long categorized comparison matrix with repeated plan headers. Follow with three columns of testimonials, an FAQ region, a compact final action and footer.

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

On mobile the plan cards stack with Basic first and the recommended tier beginning below it. The main heading wraps to three lines and the compact wordmark/menu navigation replaces the desktop link row. Lower matrix behavior beyond the opening mobile viewport was not tested.

## Elevation & Depth

Thin neutral card borders and the single coral outline communicate emphasis without large shadows. The warm background remains visible between matrix rows and testimonial groups. 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

Captured prices use the source's initially selected billing state. No billing toggle or plan action was used. One FAQ answer is initially expanded by the site; other accordion states were not exercised.

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