---
version: alpha
name: TickTick — Free and Premium comparison
colors:
  primary: rgb(255, 119, 46)
  text: rgb(25, 25, 25)
  surface: '#FFFFFF'
  contrast: rgb(17, 24, 40)
typography:
  heading:
    fontFamily: AppestInter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe
      UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol"
    fontSize: 46px
    fontWeight: 700
    lineHeight: 55.2px
  supporting:
    fontFamily: AppestInter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe
      UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
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 pricing page contrasting a white Free card with a dark navy Premium card and orange upgrade actions, followed by a detailed feature matrix and FAQ rows.

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

## Colors

primary: `rgb(255, 119, 46)`; text: `rgb(25, 25, 25)`; surface: `#FFFFFF`; contrast: `rgb(17, 24, 40)`. 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 heading, using `AppestInter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`. Supporting text uses `AppestInter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`. Do not mistake a button sample for a measured page heading.

- `h1` “Smarter Tools, Better Productivity”: 46px, weight 700, leading 55.2px.
- `h2` “All in TickTick Premium”: 46px, weight 700, leading 55.2px.
- `h3` “Free”: 20px, weight 600, leading 24px.

## Layout

Use a centered two-line headline, small benefit markers, two equal desktop plan cards and a broad comparison table. Put the FAQ after the matrix, then a simple upgrade invitation before the footer. The captured annual price is source content, not a promise for an adaptation.

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

At 390px the title reduces from 46px to 28px and the plans stack. The Free card collapses to a compact summary, while Premium retains its price, action and feature list. The header becomes a hamburger; the screenshot covers the upper portion of Premium, not the entire mobile page.

## Elevation & Depth

A soft multicolor background supports elevated white and navy cards; orange draws attention to the paid action rather than every control.

## Shapes

Large rounded plan cards, pill-shaped actions and gently rounded table/FAQ containers.

## Components

Use a centered two-line headline, small benefit markers, two equal desktop plan cards and a broad comparison table. Put the FAQ after the matrix, then a simple upgrade invitation before the footer. The captured annual price is source content, not a promise for an adaptation.

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.