--- version: alpha name: "TickTick" website: "https://ticktick.com" description: >- A cross-platform task manager whose marketing site runs on an ink-black and near-black text palette (#000000, #191919) against a white canvas, with a vivid cobalt-blue voltage (#4772fa) that carries the primary CTA, section headings, and a blue-to-teal gradient used on the hero backdrop illustration. Type is the system-ui stack throughout — no custom typeface — with the 52px hero headline at weight 700 and tracking 1.04px being the one measured display moment in an otherwise functional typographic scale. The design's distinctive move is extreme card rounding: every feature card sits at 30px radius (frequency 44), giving the interface a tablet-app-native feel that sets it apart from the flat-card conventions of Todoist and Linear. seo: title: "TickTick Design System for React — cobalt blue, system-ui, 30px cards, 14 components" metaDescription: "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. Tokens for React and AI tools." highlights: - "Extreme card rounding — every 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 headings — the 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 typeface — the entire system runs the OS default font stack, betting that familiarity reads as utility rather than as brand deficit" - "52px hero at 1.04px tracking — the 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 backdrop — the app-screenshot hero sits on a blue (#4772fa) to cyan (#93dde5) gradient cloud, the only gradient moment in an otherwise flat system" tags: - "Productivity & SaaS" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://ticktick.com" title: "TickTick — official site" description: "TickTick's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is TickTick's primary brand color?" answer: "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." - id: "typography" title: "What typeface does TickTick use, and what should I use as a substitute?" answer: "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." - id: "card-radius" title: "Why does TickTick use such large card rounding?" answer: "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." - id: "hero-gradient" title: "What gradient does TickTick use in the hero?" answer: "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." - id: "section-structure" title: "How does TickTick structure its feature sections?" answer: "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." mockups: - "marketing-hero" - "dashboard-card-grid" colors: primary: "#4772fa" primary-teal: "#93dde5" shadow-deep: "#0f1c47" shadow-navy: "#0b2060" ink: "#191919" ink-black: "#000000" ink-dark: "#3d3d3d" canvas: "#ffffff" typography: display-xl: fontFamily: "system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"" fontSize: 52px fontWeight: 700 lineHeight: 63px letterSpacing: "1.04px" display-md: fontFamily: "system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"" fontSize: 36px fontWeight: 700 lineHeight: 48px letterSpacing: "0.72px" heading-lg: fontFamily: "system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"" fontSize: 26px fontWeight: 600 lineHeight: 40px letterSpacing: 0 heading-md: fontFamily: "system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"" fontSize: 24px fontWeight: 500 lineHeight: 30px letterSpacing: 0 heading-sm: fontFamily: "system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"" fontSize: 20px fontWeight: 500 lineHeight: 24px letterSpacing: 0 body-lg: fontFamily: "system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"" fontSize: 18px fontWeight: 400 lineHeight: 28px letterSpacing: 0 body-md: fontFamily: "system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"" fontSize: 16px fontWeight: 400 lineHeight: 26px letterSpacing: 0 body-bold: fontFamily: "system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"" fontSize: 18px fontWeight: 700 lineHeight: 31px letterSpacing: 0 label-md: fontFamily: "system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"" fontSize: 16px fontWeight: 500 lineHeight: 22px letterSpacing: "0.32px" caption: fontFamily: "system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"" fontSize: 14px fontWeight: 400 lineHeight: 19px letterSpacing: 0 serif-quote: fontFamily: "Georgia, \"Times New Roman\", Merriweather, serif" fontSize: 28px fontWeight: 500 lineHeight: 52px letterSpacing: "0.56px" nav-link: fontFamily: "system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"" fontSize: 16px fontWeight: 500 lineHeight: 80px letterSpacing: 0 button-md: fontFamily: "system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"" fontSize: 20px fontWeight: 400 lineHeight: 52px letterSpacing: 0 rounded: none: "0px" sm: "12px" md: "20px" lg: "30px" full: "999px" spacing: xs: "8px" sm: "12px" md: "16px" lg: "20px" xl: "24px" 2xl: "32px" 3xl: "36px" 4xl: "40px" 5xl: "48px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "0px 36px" height: "52px" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "0px 36px" height: "52px" borderColor: "{colors.ink-black}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-black}" typography: "{typography.nav-link}" padding: "0px 24px" height: "80px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink-black}" typography: "{typography.nav-link}" padding: "0px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: "0px" section-label: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.caption}" padding: "0px" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-md}" padding: "0px" feature-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.heading-lg}" padding: "0px" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" padding: "0px" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: "32px 28px" hero-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: "0px" feature-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: "36px 48px 32px" testimonial-block: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-dark}" typography: "{typography.serif-quote}" rounded: "{rounded.lg}" padding: "32px 28px" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-dark}" typography: "{typography.caption}" padding: "40px 24px" --- ## 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 | Token | Size | Weight | Line Height | Tracking | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | 52px | 700 | 63px | 1.04px | Hero h1 — "Stay Organized, Stay Creative." | | `{typography.display-md}` | 36px | 700 | 48px | 0.72px | Section h2 headings | | `{typography.heading-lg}` | 26px | 600 | 40px | 0 | Feature section titles | | `{typography.heading-md}` | 24px | 500 | 30px | 0 | Sub-feature headings | | `{typography.heading-sm}` | 20px | 500 | 24px | 0 | Smaller sub-section labels | | `{typography.body-lg}` | 18px | 400 | 28px | 0 | Feature section descriptions | | `{typography.body-md}` | 16px | 400 | 26px | 0 | Standard body paragraphs | | `{typography.body-bold}` | 18px | 700 | 31px | 0 | Emphasized feature claims | | `{typography.label-md}` | 16px | 500 | 22px | 0.32px | Card labels and nav items | | `{typography.caption}` | 14px | 400 | 19px | 0 | Footer links, sub-labels | | `{typography.serif-quote}` | 28px | 500 | 52px | 0.56px | Pull-quote testimonials | | `{typography.nav-link}` | 16px | 500 | 80px | 0 | Top-nav link labels | | `{typography.button-md}` | 20px | 400 | 52px | 0 | CTA pill button label | ### 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.