---
version: alpha
name: Todoist — Welcome Back Form and Ramble Feature Panel
colors:
  canvas: '#FCFAF8'
  text: '#202020'
  observed-1: '#666666'
  observed-2: '#FFFFFF'
  observed-3: '#D33322'
typography:
  heading:
    fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", system-ui,
      sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto
      Color Emoji"
    fontSize: 32px
    fontWeight: 700
  body:
    fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", system-ui,
      sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto
      Color Emoji"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 21px
---

## Overview
A complete logged-out login screen with stacked provider actions, labeled email/password fields, red login button and a pastel Ramble product-feature panel. 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 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", 32px / normal, weight 700; supporting text uses 12px / 21px. Its corresponding mobile sample is 32px / normal. 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
At desktop the form sits in the left half while a tall pastel product-feature panel occupies the right. At 390px only the authentication column remains, with full-width provider rows and fields. Recovery is placed immediately below the red login action, with legal copy and signup navigation further down. Measured screenshot bounds: 1440 × 1000px desktop and 390 × 844px mobile. Two observed widths do not establish the exact CSS breakpoint rules.

## Elevation & Depth
Fine neutral outlines define provider rows and inputs. A soft blush/cream gradient and task-preview imagery give the feature panel depth without competing with the form.

## Shapes
Rounded provider buttons and labeled input containers, a strong red submit bar, small recovery text and softly rounded task-preview surfaces.

## Components
Google/Facebook/Apple alternatives, email and password, login, recovery, legal links and signup. The promotional panel is one observed frame of the Ramble feature presentation. Login, provider redirects, recovery and password-visibility behavior were not tested.

## Do's and Don'ts
Keep recovery close to the login action and the feature promotion subordinate. Retain the form when the illustration is hidden at narrow widths. Do not infer a successful session or animation timing from the static capture. Provide keyboard focus, meaningful labels and reduced-motion alternatives in any implementation; those recommendations are not claims of source behavior tested here.