TickTick Design System

Overview

TickTick's marketing page borrows its structural logic from the mobile app store. Heading-as-accent. The most distinctive move is using the cobalt-blue voltage (#4772fa) directly as the color of h2 section labels — "To-Do List," "Calendar Views," "Pomodoro," "Habit Tracker" — turning the brand color into a typographic navigation system rather than reserving it exclusively for interactive elements. Each feature section opens with a small blue category label, then shifts to ink-black for the heading and body, then shifts back to blue for the next section's label. The blue functions as a visual separator and section identifier simultaneously.

Unlike Todoist, which uses a raspberry-red voltage on white with 8px card rounding, and unlike Things 3, which leans on photography and whitespace restraint, TickTick makes its feature case through density and rounding. Feature cards at 30px radius (wired as --baseCardBorderRadius) read as tablet-native — the corner language of iOS widgets and Android cards, not the web-first 8px default. The marketing page is an argument for "this is a mobile app that also works on web," not the reverse.

Typographically, the system runs the OS default stack throughout — no custom typeface, no web font request. The 52px hero headline at weight 700 with 1.04px positive letter-spacing is the one measured display moment; below that, the body sits at 16-18px in the system's rendered face, which on macOS is San Francisco and on Windows is Segoe UI.

Key Characteristics:

• Cobalt blue (#4772fa) used as h2 section label color — the brand voltage as typographic section divider, not only as interactive element.
• 30px card radius (frequency 44, --baseCardBorderRadius) — tablet-native rounding language that distinguishes the system from web-first productivity tools.
• System-ui stack throughout — no custom typeface; the OS renders the correct face per platform.
• 52px hero headline at 1.04px positive letter-spacing — expansive tracking, not tight; an app-store aesthetic rather than editorial restraint.
• Blue-to-teal gradient (#4772fa → #93dde5) as the hero card backdrop — the only gradient moment on a page that is otherwise white and flat.
• Georgia serif appears for pull-quote testimonials — a secondary voice that signals the tool is used by people who value writing.
• Deep-navy shadow (#0f1c47, 17 instances) gives the hero card dimensional lift without a darker background surface.

Colors

Brand

• Cobalt Blue ({colors.primary} — #4772fa): frequency 34. Used as text (14), border (14), bg (4), gradient (2). Section headings, primary CTA fill, featured card accent, gradient start. The system's only chromatic tone.
• Aqua Teal ({colors.primary-teal} — #93dde5): frequency 1 as gradient. The gradient end stop on the hero backdrop cloud. Not used anywhere else in the marketing system.

Ink

• Ink Black ({colors.ink-black} — #000000): frequency 701. Used as text (362), border (338), shadow (1). The dominant text and border tone — pure black, not charcoal, used at maximum frequency for both text and hairlines.
• Near Black ({colors.ink} — #191919): frequency 252. Used as text (114), border (134), bg (4). The primary heading color for h1 and feature headings — slightly softer than pure black while still reading as near-black.
• Dark Gray ({colors.ink-dark} — #3d3d3d): frequency 46. Used as text (23), border (23). Body text in feature sections and footer links — visible distinction from #191919 creates a subtle two-tier text hierarchy.

Canvas

• White ({colors.canvas} — #ffffff): frequency 69. Used as bg (46), border (13), text (9), gradient (1). The page canvas, card fills, and button text on dark surfaces.

Shadows

• Deep Navy Shadow ({colors.shadow-deep} — #0f1c47): frequency 17 as shadow only. The hero product-screenshot card shadow — a blue-tinted deep navy rather than gray or black, which means the shadow carries a chromatic hint of the brand's blue family.
• Navy Shadow ({colors.shadow-navy} — #0b2060): frequency 5 as shadow only. A secondary shadow layer on the hero card, deeper than the primary shadow.

Typography

Font Family

The system runs the OS system-ui stack exclusively — system-ui, -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif. No web font is loaded; no custom typeface is declared. This means TickTick's marketing page renders in San Francisco on macOS, Segoe UI on Windows, and Roboto on Android. The functional result: the marketing site feels like the native platform it's advertising the app on.

A secondary voice appears in the testimonial pull-quote section: Georgia / Merriweather serif at 28px weight 500, 0.56px letter-spacing. This serif insert reads as a print-magazine quote format — a deliberate contrast with the functional system-ui surrounding it that signals TickTick is used by people who think in sentences.

Hierarchy

Principles

The display tier uses positive letter-spacing (1.04px at 52px), which inverts the SaaS design convention — most systems use 0 or negative tracking at large sizes to compact headlines. TickTick's positive tracking gives the large headline an expansive, app-store marketing poster quality. Below the display tier everything returns to 0 tracking except the medium label (0.32px), which uses a minimal trace of tracking for nav readability.

Note on Font Substitutes

Since the system runs the OS stack, no substitution is needed for most contexts — the OS will render the correct face. For a fixed rendering across platforms, Inter at the same weights is the closest alternative. For the serif-quote token, Georgia is already the first fallback; if Georgia is unavailable, Lora or Merriweather at the same size and weight will preserve the print-quote feel.

Layout

Spacing System

• Base unit: 4px, with 16px, 20px, and 40px as the dominant module values.
• Tokens: {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 20px · {spacing.xl} 24px · {spacing.2xl} 32px · {spacing.3xl} 36px · {spacing.4xl} 40px · {spacing.5xl} 48px.
• Section vertical spacing: 140px top margin for section titles (--moduleTitleMarginTop), 60px bottom (--moduleTitleMarginBottom) — generous vertical breathing room between feature sections.
• Card padding: 32x28px standard, 36x48x32px on tall feature panels.
• Container: 90% width up to 1200px max (--containerWidth / --containerMaxWidth); large container up to 1400px (--containerLargeMaxWidth).

Grid & Container

• Max content width: 1200px (standard), 1400px (large sections).
• Hero: centered headline + sub-copy + two pill CTAs (Get Started / Download) above a full-width product-screenshot card on a blue-teal gradient backdrop.
• Feature sections: alternating two-column layout — text column (label + heading + paragraph) on one side, product screenshot on the other, alternating L/R.
• Platform section: horizontal icon strip with platform logos.
• Testimonial section: pull-quotes in a Georgia serif, with highlighted text markers.
• Footer: white canvas with logo, nav links, and platform download badges.

Rhythm

The page follows a strict alternating pattern: each feature section flips which side holds the text and which holds the screenshot. The cobalt-blue section labels mark each new section, creating a visual drum-beat that carries the eye down the page. Section padding (140px top) keeps each section clearly separated — the page does not rush.

Elevation

The hero product-screenshot card uses a blue-tinted layered shadow: rgba(15,28,71,0.x) at two depth levels (deep navy #0f1c47 and navy #0b2060), creating a blue-chromatic depth effect rather than a gray or black shadow. This means the card floats against the blue-to-teal gradient backdrop with a shadow that carries the same color family, keeping the hero visually unified.

All feature cards below the fold sit flat — no shadow, only the 30px white card surface on the light-gray page background. The page does not use a surface ladder or multiple elevation tiers.

Shapes

The radius scale is defined by a single dominant value:

• {rounded.none} 0px — inline text elements, dividers.
• {rounded.sm} 12px — smaller interactive surfaces and inner elements.
• {rounded.md} 20px — medium UI containers and some feature card variants.
• {rounded.lg} 30px — every feature card, hero product-screenshot, pricing card. Frequency 44 — by far the dominant value. Wired as --baseCardBorderRadius.
• {rounded.full} 999px — CTA pill buttons only.

The 30px radius is the defining radius choice of the system. At this scale on a 400px-wide card, the corners are substantially curved — not pill-shaped, but generously rounded in a way that reads as mobile-native rather than web-native. The pill buttons at 999px sit at the opposite extreme, with nothing between 30px and pill — no intermediate 8-16px card tier exists.

Components

button-primary — Cobalt (#4772fa) fill, white text, 999px pill radius, 0x36px padding, 52px height. "Get Started" is the canonical hero instance.

button-secondary — White fill, ink-black border, pill radius, same sizing. "Download" sits beside the primary CTA in the hero.

top-nav — White canvas, ink-black text, 0x24px padding, 80px height. Houses the TickTick logo, five nav links (Features / Download / Upgrade / Resources), and Sign In + Sign Up pill buttons on the right.

nav-link — Transparent, ink-black text at 16px weight 500, 80px line-height (matching nav height for vertical centering).

hero-heading — Near-black (#191919) text, system-ui 52px weight 700, 1.04px letter-spacing.

section-label — Cobalt blue (#4772fa) text, 14px weight 400. The small category markers above each feature heading ("To-Do List," "Calendar Views," "Pomodoro," "Habit Tracker").

section-heading — Near-black (#191919) text, system-ui 36px weight 700, 0.72px letter-spacing. The h2 text is rendered in cobalt blue rather than ink — the one instance where the heading itself takes the brand voltage.

feature-heading — Near-black text, 26px weight 600. Feature section titles like "Organize everything in your life," "Easily plan your schedule."

body-paragraph — Near-black text, 16px weight 400. Feature section body copy.

card — White fill, 30px radius, 32x28px padding. The standard feature card container.

hero-card — White fill, 30px radius, 0 padding. The product-screenshot frame in the hero, sitting on the blue-teal gradient backdrop with deep-navy shadow.

feature-card — White fill, 30px radius, 36x48x32px padding. The feature illustration panels (To-Do List, Calendar, Pomodoro, Habit Tracker).

testimonial-block — White fill, 30px radius, 32x28px padding. The Georgia-serif pull-quote blocks with highlighted text markers.

footer — White canvas, dark-gray (#3d3d3d) text, 40x24px padding. Logo, navigation links, platform download links, and copyright.

Do's and Don'ts

Do use the cobalt blue (#4772fa) on section-label text above each feature heading. This is the system's navigation rhythm — the blue label marks the start of each section, and its absence at the heading level would flatten the visual hierarchy.

Do use 30px corner radius for all feature cards and container surfaces. The --baseCardBorderRadius token is the system's defining visual identity. Using 8px or 12px cards would make the marketing surface read as a different product.

Do keep the hero headline at 1.04px positive letter-spacing. The positive tracking at 52px is the display tier's signature — negative tracking would shift the register from app-store expansive to editorial compressed.

Do apply the blue-tinted layered shadow (rgba(15,28,71,x)) to the hero product-screenshot card only. The dual-layer blue shadow keeps the hero card tied to the brand's blue family without needing a separate shadow color variable.

Don't use the cobalt blue (#4772fa) as a background fill for feature cards. In this system, cobalt appears as text (labels and links) and as the CTA button fill — not as a card background tint. A blue-tinted feature card would break the white-card visual rhythm that the 30px rounding establishes.

Don't use a custom web typeface alongside the system-ui stack. The system's bet is that platform-native rendering reads as utility; introducing a web font would add load time and visual contrast that undercuts the "this is a native app" argument.

Don't reduce card rounding below 20px. The 30px radius is the brand's most distinctive visual marker — approaching 12px or 8px would make TickTick's feature sections visually indistinguishable from Todoist's or Asana's.

Don't place the Georgia serif token ({typography.serif-quote}) in headings or body copy. It exists only for pull-quote testimonial blocks — using it in feature section headings would create a register mismatch between the functional system-ui body and the literary serif display.

Known Gaps

• Dark mode: TickTick ships a dark theme in the product (the marketing site is light-only). Dark-mode palette not captured here.
• Hover and focus states: only resting states are captured. The CTA button hover, nav link active states, and focus rings are not represented.
• Mobile responsive layout: the marketing page stacks the two-column feature sections on mobile, and the hero card scales down to a single panel. Mobile token overrides not captured.
• Animation: the hero product-screenshot likely includes scroll-triggered entrance animations for the feature cards. Easing curves and timing are not captured in static extraction.
• Gradient spec: the exact gradient angle, stop positions, and opacity for the hero backdrop cloud are not captured — only the start (#4772fa) and end (#93dde5) colors are extracted.
• Platform-specific features: the marketing page references a Pomodoro timer (shown with a dark card), habit-tracking statistics, and calendar integrations — each has its own in-product color palette not captured here.