CleanShot — Demo and Testimonial Hero

---
version: alpha
name: CleanShot — Demo and Testimonial Hero
colors:
  heading-ink: '#000000'
  body-ink: '#000000'
  surface: '#FFFFFF'
  action: '#0D44E8'
  primary: '#0D44E8'
typography:
  heading:
    fontFamily: '"Google Sans Flex", "SF Pro Display", "SF UI Text", "Helvetica Neue",
      Helvetica, Arial, sans-serif'
    fontSize: 60px
    fontWeight: 600
    lineHeight: 66px
  body:
    fontFamily: '"Google Sans Flex", "SF Pro Display", "SF UI Text", "Helvetica Neue",
      Helvetica, Arial, sans-serif'
    fontSize: 18px
    fontWeight: 450
    lineHeight: 30.06px
---

## Overview
An isolated conversion hero combining a bold blue-gradient headline, supporting proposition, paired purchase/demo actions, guarantee link, product-video preview and a customer quote card. Inspected on 2026-10-04. The isolated source element is `.container > .layout > .heading:has(h1)`; bounds were measured after a warm render and checked again after capture.

## Colors
Tokens above reflect observed CSS text/surface colors; Typewolf canvas is sampled from its screenshot. Photography, gradients and alpha treatments remain visual references rather than invented flat-color tokens. Keep saturated blue restricted to actions and emphasized words.

## Typography
The observed leading text sample uses "Google Sans Flex", "SF Pro Display", "SF UI Text", "Helvetica Neue", Helvetica, Arial, sans-serif at 60px, weight 600, with 66px leading. Supporting text uses "Google Sans Flex", "SF Pro Display", "SF UI Text", "Helvetica Neue", Helvetica, Arial, sans-serif at 18px / 30.06px. These are computed local samples, not a claimed universal type scale. Use licensed fonts or suitable fallbacks; imagery may contain unrelated typefaces.

## Layout
The actual heading container is about 1192px wide at the 1440px viewport. The lower demo and quote sit side by side. At 390px the element measures 350px wide and about 1163px tall: buttons become full-width, demo and quote stack, and the 60px headline becomes 42px. The desktop screenshot is 1192 × 801px at a 1440px viewport. Mobile evidence uses a 390px viewport; its image is 350 × 1164px. Two measured widths do not establish exact breakpoint thresholds.

## Elevation & Depth
A diffuse pale-blue glow unifies the copy. White action and testimonial surfaces use fine borders and soft shadow; the blue primary button adds the strongest elevation cue.

## Shapes
Use large rounded media and quotation cards, 14px-style action corners and circular carousel arrows. Keep the play glyph centered on the actual video preview.

## Components
Headline, supporting paragraph, purchase link, demo trigger, guarantee link, preview, visible Jason Fried quote and attribution. The quote is present on the source, not a fabricated endorsement. One carousel/video state is captured; controls were not exercised.

## Do’s and Don’ts
Preserve the attribution and avoid truncating the mobile quote. Do not publish multiple carousel slides as trivial variants or claim that demo playback was tested. Provide visible keyboard focus and accessible labels when adapting. Those are implementation recommendations, not a completed accessibility audit.