---
version: alpha
name: Todoist — Calm Closing CTA with Dimensional Red Button
colors:
  canvas: '#FEFDFC'
  text: '#25221E'
typography:
  heading:
    fontFamily: 'Graphik-1bbd4a4c7a2fb472, "Graphik-1bbd4a4c7a2fb472 fallback: Arial",
      "Helvetica Neue", Helvetica, Arial, sans-serif'
    fontSize: 44px
    fontWeight: 600
    lineHeight: 50.6px
  body:
    fontFamily: 'Inter-5486e50ce5a4efdf, "Inter-5486e50ce5a4efdf fallback: Arial",
      "Helvetica Neue", Helvetica, Arial, sans-serif'
    fontSize: 20.5008px
    fontWeight: 500
    lineHeight: 32.8013px
---

## Overview
An isolated warm closing section with a centered two-line promise, source review line, dimensional red Start for free action and quieter Download apps link. Inspected on 2026-10-01 at 1440px and 390px viewport widths. This reference crops only `#home-prefooter` from the source page.

## Colors
The YAML palette records computed opaque CSS text/action colors. The canvas is the computed background where opaque; for transparent roots it is sampled from the native screenshot corner. Gradients are described visually rather than assigned invented stop values. Gradients, illustration hues and brand-logo colors should not be flattened into one universal accent. Preserve the visual contrast between the main reading surface, text and actions shown in the capture.

## Typography
The selected h2 sample uses Graphik-1bbd4a4c7a2fb472, "Graphik-1bbd4a4c7a2fb472 fallback: Arial", "Helvetica Neue", Helvetica, Arial, sans-serif, 44px / 50.6px, weight 600; supporting text uses 20.5008px / 32.8013px. Its corresponding mobile sample is 32px / 36.8px. These are computed source samples, not a claim that all text uses the same style. Use properly licensed fonts or appropriate fallbacks when adapting.

## Layout
The desktop heading occupies a centered wide text block with a review line, primary action and download link stacked below. At 390px the headline wraps into more lines and supporting copy wraps while the action stays centered. Generous top padding gives the section a deliberate pause before the footer. Measured screenshot bounds: 1425 × 424px desktop and 375 × 495px mobile. Two observed widths do not establish the exact CSS breakpoint rules.

## Elevation & Depth
A near-white-to-cream background subtly separates the section. The red primary button has a glossy angular highlight and lower warm shadow, supplying the main dimensional cue.

## Shapes
Bold text block, one medium rounded action, small download icon and a plain secondary link; no surrounding card border.

## Components
Observed selector: #home-prefooter. Includes the source headline, source-displayed review count, Start for free and Download apps. The source rating is not independently verified and must not be copied as social proof for another product. Neither action was submitted or downloaded.

## Do's and Don'ts
Make the primary action unmistakable and keep the download alternative secondary. Preserve breathing room. Do not split the same button into additional catalogue entries or treat the source review count as a design token. Provide keyboard focus, meaningful labels and reduced-motion alternatives in any implementation; those recommendations are not claims of source behavior tested here.