---
version: alpha
name: Todoist — Bright Task-Planning Product Story
colors:
  canvas: oklch(0.9945 0.0017 67.8)
  text: '#25221E'
  observed-1: '#000000'
  observed-2: '#F9F7F6'
typography:
  heading:
    fontFamily: 'Graphik-1bbd4a4c7a2fb472, "Graphik-1bbd4a4c7a2fb472 fallback: Arial",
      "Helvetica Neue", Helvetica, Arial, sans-serif'
    fontSize: 55px
    fontWeight: 600
    lineHeight: 63.25px
  body:
    fontFamily: 'Inter-5486e50ce5a4efdf, "Inter-5486e50ce5a4efdf fallback: Arial",
      "Helvetica Neue", Helvetica, Arial, sans-serif'
    fontSize: 20.5008px
    fontWeight: 475
    lineHeight: 32.8013px
---

## Overview
A light productivity landing page using a split product hero, tomato-red calls to action, soft peach device surfaces, editorial quotes, feature stories, templates and an airy closing section. Inspected on 2026-10-01 at 1440px and 390px viewport widths. This is a complete page/screen capture, not an isolated element crop.

## 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 h1 sample uses Graphik-1bbd4a4c7a2fb472, "Graphik-1bbd4a4c7a2fb472 fallback: Arial", "Helvetica Neue", Helvetica, Arial, sans-serif, 55px / 63.25px, weight 600; supporting text uses 20.5008px / 32.8013px. Its corresponding mobile sample is 37px / 42.55px. 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 opening pairs bold copy on the left with a large task-app and phone collage on the right. A testimonial strip separates it from long feature stories with a shared scroll-driven demo area, a video introduction, templates, an AI feature, trust metrics and the closing CTA. At 390px navigation condenses, the opening content stacks and the primary action moves into the narrow reading column; the template and metric treatments retain horizontally clipped content. Measured screenshot bounds: 1440 × 7191px desktop and 390 × 9120px mobile. Two observed widths do not establish the exact CSS breakpoint rules.

## Elevation & Depth
Soft warm surfaces support screenshots while red buttons use a layered highlight/shadow treatment. Illustrated waves and small symbols add movement without putting every paragraph in a card.

## Shapes
Rounded device and media frames, red rounded actions, pale template cards, thin separators and a spacious light footer.

## Components
Marketing navigation and announcement, hero, editorial quote band, task capture/organization/planning/team features, source video previews, template selector, AI feature, trust story and conversion footer. The shared desktop demo changes its active scene as the page scrolls; the complete page image records one state and therefore does not repeat that sticky preview alongside every feature paragraph. A separate 1700px-scroll viewport confirmed the second scene. Explicit play controls and template switching were not tested. All metrics and quotes remain attributed source evidence, not reusable claims.

## Do's and Don'ts
Keep the main red action consistent throughout the long page. Give product demonstrations enough space to be legible. Do not substitute blank media surfaces or imply the screenshots prove interactive task-management behavior. Provide keyboard focus, meaningful labels and reduced-motion alternatives in any implementation; those recommendations are not claims of source behavior tested here.