HelpKit — Eight-Customer Knowledge-Base Showcase

---
version: alpha
name: HelpKit — Eight-Customer Knowledge-Base Showcase
colors:
  primary: '#7E3AF2'
  purple: '#7E3AF2'
  canvas: '#FFFFFF'
  ink: '#161E2E'
  muted: '#6B7280'
  pale: '#F8FAFC'
  sample-heading: '#FFFFFF'
  sample-supporting: '#1F2937'
typography:
  heading:
    fontFamily: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica
      Neue", Arial, sans-serif
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
  supporting:
    fontFamily: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica
      Neue", Arial, sans-serif
    fontSize: 36px
    fontWeight: 600
    lineHeight: 40px
---

## Overview
A dark purple-to-navy customer showcase containing eight white screenshot cards, gradient domain labels, layout-type captions and a centered conversion action. Inspected on 2026-10-05. The exact isolated element is `#showcase`; 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 16px, weight 500, line-height 24px. A supporting paragraph sample uses 36px with 40px leading. These local samples are not a universal type scale. Child spans or image artwork can paint differently from inherited container styles. The uppercase SHOWCASE eyebrow is the semantic heading sample; the visually larger headline is a paragraph with separately styled white spans. Do not apply the paragraph container's inherited dark ink to those spans.

## Layout
Desktop presents four cards per row across two rows, under a centered uppercase eyebrow and larger headline. The section has 48px vertical and 24px horizontal padding and is approximately 889px high. At 390px all eight cards stack into one narrow centered column, producing an approximately 2482px component. Primary image dimensions are 1440 × 889px at a 1440px viewport. The mobile evidence is 390 × 2483px at a 390px viewport. These two widths do not identify exact breakpoint thresholds.

## Elevation & Depth
White cards have restrained shadows and stand clearly above the dark gradient surface. Each card contains a framed customer-site screenshot rather than an invented generic mockup.

## Shapes
Measured card corners are 6px. Screenshot rectangles and compact layout icons reinforce repeated card anatomy; the closing button has a modest rounded rectangle shape.

## Components
Eight source-linked help-center or documentation examples, a contribution invitation and a Start For Free action. These are visual examples of the source's customers; the screenshot does not establish measured results, endorsement permissions or the behavior of external destinations.

## Do’s and Don’ts
Keep actual domains and layout-type labels paired with their correct screenshots. Do not reuse those customers as endorsements for a different product or split individual cards into repetitive catalogue variants. Provide visible focus states, meaningful alternative text and usable touch targets when adapting; no complete accessibility audit was performed.