TickTick — two-action productivity CTA

---
version: alpha
name: TickTick — two-action productivity CTA
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: 36px
    fontWeight: 700
    lineHeight: 48px
  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: 20px
    fontWeight: 400
    lineHeight: 52px
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 standalone closing invitation with a blue heading and filled/outlined pill actions over a very pale cool-to-warm gradient.

Captured from https://ticktick.com/ at 2026-10-14T06:07:27.730105+00:00. The primary image isolates `.content_15a7R`; desktop and mobile crops were measured independently.

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

- `h2` “Ready to be more productive?”: 36px, weight 700, leading 48px.

## Layout

Center the single question above two actions. Preserve the generous gap below the title and the large open area beneath the buttons; this is a quiet closing block rather than another feature card.

Desktop region/page: 1200.00 × 300.00px at a 1440px viewport. Mobile region/page: 351.00 × 213.59px at a 390px viewport.

At 390px the region is 351px wide. The heading wraps to two lines at 24px instead of 36px; the two actions remain on one row, with text shrinking from 20px to 16px.

## Elevation & Depth

The gradient supplies depth without a floating panel or shadow.

## Shapes

Both actions use fully rounded ends; use a filled blue primary and transparent blue-outlined secondary.

## Components

Center the single question above two actions. Preserve the generous gap below the title and the large open area beneath the buttons; this is a quiet closing block rather than another feature card.

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.