Harvest — Warm Serif Time-Tracking Product Story

---
version: alpha
name: Harvest — Warm Serif Time-Tracking Product Story
colors:
  ink: '#1D1E1C'
  sample-1: '#000000'
  sample-2: '#8B8B8B'
  sample-3: '#FA5D00'
  sample-4: '#6A696A'
  sample-5: '#FFFFFF'
  sample-6: '#2C222D'
  surface-7: '#FBF5F0'
typography:
  heading:
    fontFamily: Besley, Georgia, "Times New Roman", serif
    fontSize: 70px
    fontWeight: 400
    lineHeight: 77px
  body:
    fontFamily: '"Muoto VAR", MuotoWeb, "Helvetica Neue", Helvetica, Arial, sans-serif'
    fontSize: 19px
    fontWeight: 400
    lineHeight: 26.6px
---

## Overview
A warm ivory time-tracking homepage pairing oversized editorial serif headlines with orange product illustrations, a floating pill navigation, workflow cards, a tabbed product tour and customer proof. Inspected on 2026-10-03 at 1440px desktop and 390px mobile. The screenshot covers the full desktop page; the mobile screenshot covers the opening viewport only.

## 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 (Turn hours into
              invoices) uses Besley, Georgia, "Times New Roman", serif, 70px, weight 400, leading 77px. Supporting text uses "Muoto VAR", MuotoWeb, "Helvetica Neue", Helvetica, Arial, sans-serif at 19px / 26.6px. The matching mobile heading-category sample is 48px / 52.8px. These are local computed samples, not a complete universal type scale. Use properly licensed fonts or appropriate fallbacks.

## Layout
The opening desktop composition pairs centered headline and email CTA on the left with a large illustrated timer on the right. Four workflow cards follow, then a tabbed tour, feature grid, horizontally clipped testimonial carousel and orange-framed closing CTA. At 390px the navigation becomes a wordmark and hamburger; the 70px heading becomes 48px, email and action separate into full-width rows, trust checks stack and product art moves below. The mobile image covers the opening viewport, not all lower sections. Desktop image: 1440 × 6397 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
Use gentle shadows on the white navigation pill and product illustrations; warm surface changes, rather than heavy borders, divide the story.

## Shapes
Rounded cards and pill buttons contrast with serif letterforms and hand-drawn orange underlines. Maintain generous section spacing and the orange frame around the closing panel.

## Components
Floating navigation, rotating hero noun, email entry CTA, monochrome logo row, workflow cards, default Time tracking tab, benefit cards, testimonial carousel, desktop/mobile app links and a multicolumn footer. Testimonials and statistics are source content, not independently verified claims. No email was entered and no carousel/tab actions were tested.

## Do’s and Don’ts
Preserve the editorial headline/product-art balance. Do not reproduce the source customer claims as your own. Keep carousel overflow intentional; the missing Netalico logo belongs to an offscreen slide beyond the 1440px viewport and is not a missing painted asset in this capture. Provide useful labels, visible focus and reduced-motion alternatives when adapting; these are recommendations rather than a source accessibility audit.