What is TickTick's primary brand color?

TickTick's brand voltage is cobalt blue (#4772fa), appearing 34 times in the captured marketing page — 14 as text (the h2 section headings), 14 as border, 4 as background fill (the CTA pill and one card accent), and 2 in gradients. The notable use is directly on h2 headings — the brand color doubles as a typographic accent system for section labels rather than being reserved solely for interactive elements. A soft shadow tone (#0f1c47, deep navy) appears 17 times in shadows only, giving depth to the hero card without a separate shadow color variable.

What typeface does TickTick use, and what should I use as a substitute?

TickTick's marketing site runs the OS system-ui stack throughout — no custom typeface is loaded. The font stack is: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif, plus emoji fallbacks. This means the marketing site renders in San Francisco on macOS, Segoe UI on Windows, and Roboto on Android. A Georgia / Merriweather serif appears in the testimonial-quote sections as a secondary accent for pull-quote text. For implementation, Inter or Geist are the closest fixed-width alternatives that preserve the functional, utilitarian feel of the system-ui rendering.

Why does TickTick use such large card rounding?

TickTick's 30px corner radius (frequency 44, wired as --baseCardBorderRadius in the CSS) gives every feature card a tablet-app native feel — it's the same rounding language that iOS uses for widget cards and app icons, which makes sense for a cross-platform tool whose majority user base is on mobile. The choice differentiates TickTick from Todoist (8px radius), Linear (8px), and Asana (4-8px), all of which use tighter corners that read as web-first productivity tools. The 30px rounding signals consumer app before enterprise platform.

What gradient does TickTick use in the hero?

The hero product-screenshot sits on a blue-to-cyan gradient backdrop: cobalt blue (#4772fa) transitions to light aqua (#93dde5). This is the only gradient in the marketing system — the rest of the page is flat white. The gradient exists as a 'cloud' shape behind the app mockup rather than as a full-bleed background, keeping the overall page canvas white. A deep navy (#0f1c47) appears as the shadow color on the hero card, giving the floating app screenshot a soft dimensionality without requiring a darker background surface.

How does TickTick structure its feature sections?

Each feature section follows a fixed template: a small cobalt-blue label (14px weight 400, e.g. 'To-Do List', 'Calendar Views', 'Pomodoro') in the brand voltage, followed by a 2-line heading in ink black (36px weight 700), a short paragraph (16px weight 400, 2-3 sentences), and a product screenshot on the alternate side. Sections alternate between text-left/image-right and text-right/image-left. The alternating layout means TickTick's feature sections self-paginate as the user scrolls — each pair of label + heading reads as a feature summary, and the screenshot provides visual confirmation.

TickTick Design System

TickTick's marketing design system: ink-black text on white, cobalt-blue voltage for CTAs and headings, and extreme 30px card rounding that signals tablet-native design.

About TickTick DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source ticktick.com

Productivity & SaaS

TickTick's marketing page reads as a mobile app store listing scaled to a desktop browser. The hero places a full product-screenshot of the app — three-panel layout showing the sidebar, task list, and detail pane — on a blue-to-teal gradient cloud, with the headline "Stay Organized, Stay Creative." in 52px weight 700 above. Below the fold, each feature section (To-Do List, Calendar Views, Pomodoro, Habit Tracker) uses the same format: a label in cobalt blue, a two-line heading in ink black, a paragraph, and a product screenshot on the alternate side. The rhythm is app-store feature rundown rather than SaaS marketing narrative. Where Todoist's marketing emphasizes task hierarchy with progressive disclosure screenshots, and where Things 3 leans on photography and white space, TickTick shows the interface densely and trusts the feature count to make the argument.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 10 color tokens built on an ink-black base — the dominant text tone is #000000 (701 frequency) with near-black #191919 (252 frequency) for secondary text, and cobalt blue (#4772fa, 34 frequency) as the sole chromatic voltage; 13 typography tokens running the system-ui stack at weights 400 through 700 with the 52px / 700 display headline as the one heavy moment; 5 corner-radius tokens centered on a 30px default that defines every feature card; and 14 component definitions covering the pill CTA, the extreme-radius feature cards, and the section heading treatment that puts cobalt blue directly on the h2.

Feed this file to an AI coding tool and it reproduces TickTick's specific moves: ink-black text on a pure white canvas, cobalt blue used directly on section headings as well as on CTAs, 30px corner rounding as the default for every contained surface, and the system-ui stack for typography. The one principle worth examining is the heading-as-accent move: using the brand voltage as the color of an h2 label rather than reserving it for interactive elements alone creates a visual rhythm that ties the feature sections together without additional decorative chrome.

What makes it distinct

Extreme card roundingevery feature card uses 30px radius (frequency 44), the defining visual move that distinguishes TickTick from Todoist's flat-card and Linear's sharp-corner conventions
Cobalt section headingsthe blue (#4772fa) appears not just on CTAs but directly as the color of h2 section headings, an unusual move that uses the brand voltage as typographic accent
System-ui with no custom typefacethe entire system runs the OS default font stack, betting that familiarity reads as utility rather than as brand deficit
52px hero at 1.04px trackingthe display headline uses positive letter-spacing, rare in the SaaS marketing convention of negative-tracking large headlines, giving it an expansive app-store feel
Blue-to-teal gradient on the hero backdropthe app-screenshot hero sits on a blue (#4772fa) to cyan (#93dde5) gradient cloud, the only gradient moment in an otherwise flat system

Live at ticktick.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

ticktick.com

Explore TickTick

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Other

Specialty colors.

TickTick design system FAQ

Common questions about TickTick's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

TickTick — official site

TickTick's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.