---
version: alpha
name: TickTick — minimal blue account registration
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: -apple-system, ".SFNSText-Regular", "Helvetica Neue", "Hiragino Sans
      GB", "WenQuanYi Micro Hei", "Microsoft Yahei", sans-serif, Meiryo
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
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 restrained registration screen with email and password inputs, a blue primary action, legal copy and separate Google/Apple provider choices.

Captured from https://ticktick.com/signup at 2026-10-14T06:03:19.088815+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 `-apple-system, ".SFNSText-Regular", "Helvetica Neue", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft Yahei", sans-serif, Meiryo`. Do not mistake a button sample for a measured page heading.

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

## Layout

Center a narrow white registration card on a very light gray canvas. Order title, email, password, Sign Up, terms text, divider and provider buttons. Keep the existing-account link beneath the card and a second access link in the top-right header.

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 floating card treatment disappears into the light page, while the form remains a centered 282px column. The top-right sign-in action becomes a text link. All fields and provider choices fit in the reviewed mobile frame.

## Elevation & Depth

A faint desktop card shadow creates hierarchy; on mobile the page is flatter. Blue distinguishes the primary action and the initially focused email input.

## Shapes

Inputs and primary action have modest rounded corners; provider controls use thin neutral outlines.

## Components

Center a narrow white registration card on a very light gray canvas. Order title, email, password, Sign Up, terms text, divider and provider buttons. Keep the existing-account link beneath the card and a second access link in the top-right header.

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.