---
version: alpha
name: HelpKit — Three-Step Notion Publishing Process
colors:
  primary: '#7E3AF2'
  purple: '#7E3AF2'
  canvas: '#FFFFFF'
  ink: '#161E2E'
  muted: '#6B7280'
  pale: '#F8FAFC'
  sample-heading: '#7E3AF2'
  sample-supporting: '#4B5563'
typography:
  heading:
    fontFamily: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica
      Neue", Arial, sans-serif
    fontSize: 24px
    fontWeight: 600
    lineHeight: 24px
  supporting:
    fontFamily: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica
      Neue", Arial, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
---

## Overview
An isolated onboarding explanation with a split introduction, three numbered screenshot cards and a gradient action on a pale blue-gray surface. Inspected on 2026-10-05. The exact isolated element is `#how-it-works`; a warm full-page render preceded measurement and a fresh image was cropped to its current document bounds.

## 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 24px, weight 600, line-height 24px. A supporting paragraph sample uses 16px with 24px leading. These local samples are not a universal type scale. Child spans or image artwork can paint differently from inherited container styles.

## Layout
The section uses measured 64px top and 80px bottom padding. Desktop places the short introduction and explanatory copy in two columns above three equal step cards; its overall height is 866px. At 390px the introduction and cards stack, the inline directional arrow changes from right to down, and the component grows to about 1737px. Primary image dimensions are 1440 × 867px at a 1440px viewport. The mobile evidence is 390 × 1738px at a 390px viewport. These two widths do not identify exact breakpoint thresholds.

## Elevation & Depth
Small shadows separate white cards from the pale canvas. Screenshot artwork inside each card supplies secondary depth without competing with the step numbers.

## Shapes
Pastel numbered circles, lightly rounded cards, rectangular tutorial screenshots and a small gradient button create a clear sequential rhythm.

## Components
Duplicate our template, Make your page public, and Customize and publish steps retain the source order. The instruction-video link and Start For Free action are visible; neither was activated. The component is an explanation of onboarding, not a captured authenticated workflow.

## Do’s and Don’ts
Preserve numbered order and readable action verbs. Keep the responsive arrow orientation aligned with the actual layout; do not imply that reading the three cards completes an account setup. Provide visible focus states, meaningful alternative text and usable touch targets when adapting; no complete accessibility audit was performed.