---
version: alpha
name: CleanShot — Dark App-Icon Conversion CTA
colors:
  heading-ink: '#FFFFFF'
  button-ink: '#161618'
  button-surface: '#FFFFFF'
  primary: '#FFFFFF'
typography:
  heading:
    fontFamily: '"Google Sans Flex", "SF Pro Display", "SF UI Text", "Helvetica Neue",
      Helvetica, Arial, sans-serif'
    fontSize: 40px
    fontWeight: 600
    lineHeight: 48px
  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 standalone closing CTA with the app icon, a two-line white desktop headline, muted guarantee copy and one white purchase-route button against a dark multicolor glow. Inspected on 2026-10-04. The isolated source element is `.footer-layout > .top`; 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 40px, weight 600, with 48px 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 selected top block of the footer is centered and vertically spaced. At 390px it measures 350px wide, the heading changes from 40px to 32px and wraps to three lines, and the supporting copy wraps above a compact centered button. Footer navigation and newsletter are outside this component. The desktop screenshot is 584 × 581px at a 1440px viewport. Mobile evidence uses a 390px viewport; its image is 350 × 495px. Two measured widths do not establish exact breakpoint thresholds.

## Elevation & Depth
The app icon carries its own dimensional artwork. Red, purple and blue ambient light fades toward near-black; the white action stands out without a large card shell.

## Shapes
A rounded-square app icon pairs with a white button whose measured corner radius is 14px. Keep the surrounding section square-edged.

## Components
App icon, upgrade headline, source guarantee copy and Get CleanShot X for Mac link. The route leads to pricing; this is not an authentication form and no purchase was attempted.

## Do’s and Don’ts
Retain one dominant action and comfortable separation from the reassurance line. Do not turn the source guarantee into a claim about another product. Provide visible keyboard focus and accessible labels when adapting. Those are implementation recommendations, not a completed accessibility audit.