CleanShot — Mac Capture Toolkit Landing Page

---
version: alpha
name: CleanShot — Mac Capture Toolkit Landing Page
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
A polished Mac utility landing page combining a blue-lit centered headline, paired demo and testimonial cards, illustrated feature bento grids, alternating walkthroughs and a dark closing conversion section. Inspected on 2026-10-04. This is a complete page reference, not a relabelled section crop.

## 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
A centered desktop column uses broad whitespace, a two-column demo/testimonial row and multi-size feature grids. At 390px the navigation becomes a floating logo/menu bar, the 60px heading becomes 42px, the paired actions stack and the opening product cards form a single column. Mobile evidence beyond the opening viewport is limited; the separately captured hero confirms its complete stack. The desktop screenshot is 1440 × 11458px at a 1440px viewport. Mobile evidence uses a 390px viewport; its image is 390 × 844px. Two measured widths do not establish exact breakpoint thresholds.

## Elevation & Depth
Soft shadows lift white cards; pale blue radial glows sit behind the introduction, while saturated product imagery supplies most contrast. The closing area changes to a near-black gradient field.

## Shapes
Rounded media panels, compact rounded rectangular buttons, circular carousel arrows and a macOS-style rounded-square app icon recur throughout.

## Components
Header navigation, launch badge, headline, primary purchase-route link, secondary demo trigger, testimonial, feature bento groups, carousel, closing CTA, newsletter and footer. Text and numbers within demos, customer quotations and marketing claims belong to the source, not independently verified outcomes.

## Do’s and Don’ts
Preserve the hierarchy from headline to product demonstration before feature detail. Do not replace the source examples with invented endorsements. Carousel controls, video playback controls, purchasing and newsletter submission were not exercised. Provide visible keyboard focus and accessible labels when adapting. Those are implementation recommendations, not a completed accessibility audit.