Harvest — Orange-Framed Trial and App Download CTA

---
version: alpha
name: Harvest — Orange-Framed Trial and App Download CTA
colors:
  ink: '#000000'
  sample-1: '#2C222D'
  sample-2: '#FBF5F0'
  sample-3: '#FFFFFF'
typography:
  heading:
    fontFamily: Besley, Georgia, "Times New Roman", serif
    fontSize: 67px
    fontWeight: 400
    lineHeight: 73.7px
  body:
    fontFamily: '"Muoto VAR", MuotoWeb, "Helvetica Neue", Helvetica, Arial, sans-serif'
    fontSize: 23px
    fontWeight: 400
    lineHeight: 32.66px
---

## Overview
An isolated Harvest closing CTA with an orange striped frame, inset white panel, large serif copy, trial button, platform badges and overlapping desktop/mobile product art. Inspected on 2026-10-03 at 1440px desktop and 390px mobile. The screenshot isolates `section.subfooter`; bounds were measured after a warm-up render and checked again after capture.

## Colors
Opaque token values come from computed CSS samples in this reference. The sampled-canvas token, when present, is a screenshot pixel sample. Gradients, alpha fills, photography and artwork are described visually rather than reduced to a single invented color.

## Typography
The computed heading sample (Ready to turn
hours into profit?) uses Besley, Georgia, "Times New Roman", serif, 67px, weight 400, leading 73.7px. Supporting text uses "Muoto VAR", MuotoWeb, "Helvetica Neue", Helvetica, Arial, sans-serif at 23px / 32.66px. The matching mobile heading-category sample is 32px / 35.2px. These are local computed samples, not a complete universal type scale. Use properly licensed fonts or appropriate fallbacks.

## Layout
Desktop places copy and two platform-link groups left of overlapping application imagery. At 390px all content stacks, the heading becomes smaller, macOS and Windows badges separate onto rows, the mobile badges remain paired, and reduced product art sits below the actions. The complete selected element is captured at both widths. Desktop image: 1440 × 607 px. Mobile viewport: 390 × 844 px; isolated mobile components may be taller than the viewport. Two measured widths do not establish exact CSS breakpoints.

## Elevation & Depth
An orange striped outer frame and white inset establish depth without a floating-modal treatment. Product screens overlap to convey device support.

## Shapes
Large rounded top corners frame the panel. Black capsule buttons and platform badges create a consistent interaction silhouette; device imagery is intentionally clipped at the section boundary.

## Components
Ready to turn hours into profit headline, trial CTA, desktop-app and mobile-app badge groups, timesheet and phone imagery. This is a navigation CTA, not an authentication form. No download or trial was initiated.

## Do’s and Don’ts
Keep device support labels adjacent to their badges and preserve a single clear primary action. Do not crop off headline or actions to imitate the intentionally clipped device artwork. Provide useful labels, visible focus and reduced-motion alternatives when adapting; these are recommendations rather than a source accessibility audit.