TickTick — minimal blue account sign-in

---
version: alpha
name: TickTick — minimal blue account sign-in
colors:
  primary: rgb(71, 114, 250)
  text: rgb(25, 25, 25)
  surface: '#FFFFFF'
typography:
  action:
    fontFamily: Arial
    fontSize: 13px
    fontWeight: 500
    lineHeight: 18px
  supporting:
    fontFamily: Arial
    fontSize: 13px
    fontWeight: 500
    lineHeight: 18px
omitted:
- section: spacing
  reason: Measured geometry is documented in Layout; no unobserved global spacing
    scale is inferred.
- section: rounded
  reason: Observed silhouettes are described in Shapes without inventing a global
    radius scale.
- section: components
  reason: Reference-specific composition is described in prose rather than an inferred
    token API.
---

## Overview

A centered sign-in screen with two inputs, a blue action, a separate password-recovery link and Google/Apple provider choices.

Captured from https://ticktick.com/signin at 2026-10-14T06:03:23.955955+00:00. The primary image is the complete desktop page; mobile visual evidence is the 390 × 844 opening viewport.

## Colors

primary: `rgb(71, 114, 250)`; text: `rgb(25, 25, 25)`; surface: `#FFFFFF`. These are observed reference colors, not a complete brand palette. Neutral hex values summarize visually matching neutral surfaces; measured text samples are retained below.

## Typography

The primary sampled role is action, using `Arial`. Supporting text uses `Arial`. Do not mistake a button sample for a measured page heading.

- `button` “Sign Up”: 13px, weight 500, leading 18px.
- `button` “Sign In”: 14px, weight 500, leading 14px.

## Layout

Use a compact sign-in card with a strong title, email and password inputs, full-width Sign In action and centered Forgot Password link. Place a separator before the provider buttons; keep registration outside the main form hierarchy.

Desktop region/page: 1440.00 × 1000.00px at a 1440px viewport. Mobile region/page: 390.00 × 844.00px at a 390px viewport.

At 390px the card loses its distinct white panel and shadow. The form stays centered with generous whitespace, and the header offers a simple Sign Up link. The complete logged-out form is visible without entering data.

## Elevation & Depth

A subtle desktop shadow and the blue initially focused field create depth without decorative illustration.

## Shapes

Rounded input rectangles, a blue rounded primary action and thin-outlined provider controls.

## Components

Use a compact sign-in card with a strong title, email and password inputs, full-width Sign In action and centered Forgot Password link. Place a separator before the provider buttons; keep registration outside the main form hierarchy.

All interactions beyond ordinary navigation, consent dismissal and source-media loading remain untested. No credentials, forms, accounts, trials or purchases were submitted.

## Do's and Don'ts

- Do preserve this reference's alignment, hierarchy and measured responsive changes.
- Do keep labels and supporting text readable; preserve intentional carousel peeks where described.
- Do replace source-specific prices, product examples, metrics and customer proof with your own verified content.
- Don't infer validation, hover behavior, animation timing or accessibility conformance from a static capture.
- Don't promote a sampled font or radius into an unsupported global design system.