---
version: alpha
name: HelpKit — Gradient Notion Knowledge-Base Journey
colors:
  primary: '#7E3AF2'
  purple: '#7E3AF2'
  canvas: '#FFFFFF'
  ink: '#161E2E'
  muted: '#6B7280'
  pale: '#F8FAFC'
  sample-heading: '#161E2E'
  sample-supporting: '#6B7280'
typography:
  heading:
    fontFamily: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica
      Neue", Arial, sans-serif
    fontSize: 48px
    fontWeight: 800
    lineHeight: 48px
  supporting:
    fontFamily: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica
      Neue", Arial, sans-serif
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
---

## Overview
A long-form SaaS homepage combining blue-to-purple gradient accents, a rotating product headline, layered documentation mockups, customer examples, three-step onboarding and alternating feature explanations. Inspected on 2026-10-05. This is a complete desktop page capture, not an isolated component crop.

## Colors
Use the observed palette tokens for the corresponding text and surfaces; photographs, artwork and gradients are not reduced to invented solid-color tokens. Blue, violet and pink form the source accent gradient. Keep neutral text readable against the relevant light or dark band; pale controls and white panels must remain distinguishable.

## Typography
The listed font families are computed CSS stacks, not a guarantee that every named fallback is installed. The selected heading sample is Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif at 48px, weight 800, line-height 48px. A supporting paragraph sample uses 18px with 28px leading. These local samples are not a universal type scale. Child spans or image artwork can paint differently from inherited container styles.

## Layout
The desktop opening uses a centered headline, narrow supporting copy, a compact gradient action and a large product collage. The H1's computed 48px type is scaled by the desktop transform; at 390px it uses 30px type without the enlarged desktop treatment. Navigation reduces to logo and hamburger, the primary action becomes wide, reassurance points stack and the illustration scales down. The rest of the page alternates light feature bands, a dark showcase, testimonials, FAQs and signup sections. Primary image dimensions are 1440 × 18236px at a 1440px viewport. The mobile evidence is 390 × 844px at a 390px viewport. These two widths do not identify exact breakpoint thresholds.

## Elevation & Depth
Soft violet glows, floating mockups and shallow card shadows create product depth. The main canvas remains white, with dark navy/purple bands used sparingly.

## Shapes
Small rounded rectangles, circular avatars, pill labels and layered desktop/mobile screenshots recur. Do not flatten artwork into generic empty dashboard boxes.

## Components
Observed source testimonial blocks, two product-layout demonstrations, a customer showcase, three-step setup section, Notion feature explanations, founder story, video preview, FAQs and inline signup routes. Source testimonials and performance claims are preserved as source content, not independently verified results. No forms, video controls or account actions were submitted.

## Do’s and Don’ts
Use gradients as emphasis and preserve readable neutral body copy. Keep signup and newsletter offers semantically distinct. Do not invent customer names, results or responsive behavior beyond the measured widths; animation screenshots represent one state, not every rotation. Provide visible focus states, meaningful alternative text and usable touch targets when adapting; no complete accessibility audit was performed.