Todoist — Split Registration and Ramble Phone Preview

---
version: alpha
name: Todoist — Split Registration and Ramble Phone Preview
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 signup screen pairing a white form column with a warm Ramble phone-demo panel, provider choices, labeled email/password fields and a red email-signup action. 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
Desktop is split between a left authentication column and a tall pale phone-preview panel. At 390px the phone-demo promotion is removed and the form uses the available width with side gutters. Provider choices remain stacked above email/password fields, legal copy and the login link. Measured screenshot bounds: 1440 × 1000px desktop and 390 × 844px mobile. Two observed widths do not establish the exact CSS breakpoint rules.

## Elevation & Depth
The form remains white and flat with thin neutral borders. The adjacent pale blush/cream panel and smartphone task preview provide warmth and separation without a shadow around the entire form.

## Shapes
Rounded provider rows, rounded field containers with small internal labels, a full-width red action and a softly rounded promotional panel.

## Components
Google/Facebook/Apple alternatives, Email, Password with visibility affordance, Sign up with Email, legal links, login navigation and the desktop Ramble phone demo with task cards and a listening-waveform state. The earlier research visit showed an app-download illustration instead; this guide describes only the final captured variant. No provider flow, validation, password reveal, account creation or trial was triggered.

## Do's and Don'ts
Keep the functional form usable independently of the promotional panel. Preserve visible field labels and a single strong email action. Do not require the decorative phone-demo panel for mobile registration. Provide keyboard focus, meaningful labels and reduced-motion alternatives in any implementation; those recommendations are not claims of source behavior tested here.