Todoist — Three Plans and Detailed Feature Matrix

---
version: alpha
name: Todoist — Three Plans and Detailed Feature Matrix
colors:
  canvas: oklch(0.9945 0.0017 67.8)
  text: '#25221E'
  observed-1: '#000000'
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: 18px
    fontWeight: 500
    lineHeight: 31.5px
---

## Overview
A complete light pricing page with Beginner, Pro and Business cards, currency and billing controls, a grouped feature comparison table, security note and closing conversion area. 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 18px / 31.5px. 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
Three desktop cards align beneath the centered title and currency/billing controls. At 390px the cards stack vertically with full-width actions, while the long comparison retains aligned feature and plan columns within a compact table treatment. On mobile the billing cycle and currency move behind a bottom-sheet control labelled Show billing options. Its observed aria-expanded state is false. Native viewport evidence is used because a full-page mobile screenshot incorrectly exposes controls below the original viewport; opening the disclosure was not tested. The security note and closing CTA separate the dense comparison from the footer. Measured screenshot bounds: 1440 × 5409px desktop and 390 × 844px mobile. Two observed widths do not establish the exact CSS breakpoint rules.

## Elevation & Depth
Thin neutral borders and near-white surfaces organize the cards. Red actions stand above muted secondary controls; feature-table rows use subtle rules rather than shadows.

## Shapes
Soft rounded plan cards, small billing controls, outlined currency selector, consistent action bars and compact check icons.

## Components
Beginner/Pro/Business cards, annual/monthly control, currency selector, security note and grouped comparison including Essentials, task views, collaboration, task limits and advanced features. EUR and yearly billing were the observed defaults in this runtime. No currency changes, billing switch, account creation or purchase was performed.

## Do's and Don'ts
Keep free and paid CTAs visually distinct while aligning card actions. Preserve units, billing cadence and tax notes with prices. Do not present capture-time prices as guaranteed current offers. Provide keyboard focus, meaningful labels and reduced-motion alternatives in any implementation; those recommendations are not claims of source behavior tested here.