TickTick — soft-gradient productivity homepage

---
version: alpha
name: TickTick — soft-gradient productivity homepage
colors:
  primary: rgb(71, 114, 250)
  text: rgb(25, 25, 25)
  surface: '#FFFFFF'
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: 52px
    fontWeight: 700
    lineHeight: 63px
  supporting:
    fontFamily: Georgia, "Times New Roman", Merriweather, serif
    fontSize: 28px
    fontWeight: 500
    lineHeight: 52.5px
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 calm productivity homepage with pale blue-to-cream gradients, blue pill actions, large product previews, alternating feature cards, an AI feature grid and user-review cards.

Captured from https://ticktick.com/ at 2026-10-14T06:07:01.468335+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 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 `Georgia, "Times New Roman", Merriweather, serif`. Do not mistake a button sample for a measured page heading.

- `h1` “Stay Organized, Stay Creative.”: 52px, weight 700, leading 63px.
- `h2` “Powerful and intuitive features”: 36px, weight 700, leading 48px.
- `h2` “Work smarter with AI”: 36px, weight 700, leading 48px.

## Layout

Center the opening headline and paired actions above the large tilted task-manager preview. Keep the 1200px-wide feature sequence inset from the page edges. Alternate copy and actual product artwork; follow with the tabbed product demonstration, AI cards, cross-device panel, media proof and review grid.

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

At 390px the header becomes a compact logo and hamburger. The opening headline is split into two 40px lines, actions remain side by side, and the product composition includes a phone overlay. Mobile evidence is the opening viewport; deeper breakpoint behavior was not exhaustively tested.

## Elevation & Depth

Use very pale blue and warm gradients beneath white feature surfaces. Soft shadows separate product screenshots; avoid heavy outlines around the whole page.

## Shapes

Pill actions, large rounded panels and rounded device screens provide the recurring silhouette.

## Components

Center the opening headline and paired actions above the large tilted task-manager preview. Keep the 1200px-wide feature sequence inset from the page edges. Alternate copy and actual product artwork; follow with the tabbed product demonstration, AI cards, cross-device panel, media proof and review grid.

All interactions beyond ordinary navigation, consent dismissal and source-media loading remain untested. No credentials, forms, accounts, trials or purchases were submitted. The source feature videos were loaded, played and paused to capture actual nonblank frames; this static reference does not specify motion timing.

## 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.