--- name: Todoist tagline: Warm-white canvas, Graphik sans, signature Todoist-red CTA — a task manager that feels calm, friendly, and quietly productive. updated_at: 2026-05-29T21:45:00.495Z published_at: 2026-05-29T21:45:00.495Z author: webdesignhot source_url: https://www.todoist.com spec: webdesignhot/0.1 quality: curated featured: false categories: [saas] tags: [light, warm, sans, friendly, soft, productive, approachable] preview_swatch: ['#fefdfc', '#e44232', '#fae8d6'] related: [things-app, notion, linear] description: 'Todoist''s marketing site is warm productivity made visible. The canvas is a barely-there warm-white (`#fefdfc`) — paper, not screen — and the type is Graphik, a humanist grotesque set in warm near-black ink (`#25221e`) that reads softer than the cold `#000` most SaaS reaches for. The single saturated voltage is Todoist-red (`#e44432`, `--color-td-primary`) — the brand''s lifelong signature — carried on the "Start for free" CTA at an 8px radius. Warm peach secondary surfaces (`#fae8d6`, `--color-td-secondary-dark`) and a graduated cream stack (`#fff5eb` → `#fff9f3`) tint feature bands so the page never goes stark. The register is friendly, approachable, and calm — Todoist sells the relief of an organized day, and the site feels like that relief.' # Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger). # Maps role names to this entry's actual token names so role-aware # downstream tools resolve `theme.background` → entry's `bg`, etc. # Auto-generated by scripts/add-aliases.mjs — do not edit manually; # regenerate after changing color token names. aliases: background: bg foreground: text primary: brand primary-foreground: on-brand muted: text-muted border: border ring: brand colors: bg: '#fefdfc' # warm-white canvas — paper, not screen (rgb 254,253,252) bg-warm: '#fcf8f3' # warmest beige tint band (--color-beige-01) surface: '#ffffff' # pure-white card surface lifting off the warm canvas surface-card: '#fcfcfc' # near-white idle card (--card-background-idle) surface-cream: '#fff9f3' # lightest cream secondary band (--color-td-secondary-light) surface-cream-mid: '#fff5eb' # mid cream secondary band (--color-td-secondary-mid) surface-peach: '#fae8d6' # warm peach secondary surface (--color-td-secondary-dark / --accents-creme) text: '#25221e' # warm near-black ink — primary copy (rgb 37,34,30) text-muted: '#565656' # 66% black on canvas — secondary copy (--color-black-07) text-soft: '#8c8b8b' # 45% black on canvas — captions, meta (--color-black-06) text-faint: '#c1c0c0' # 24% black — disabled / placeholder (--color-black-05) brand: '#e44432' # SIGNATURE TODOIST RED — primary CTA & accent (--color-td-primary) brand-hover: '#ee5244' # CTA hover — lighter red (--color-td-cta-hover) brand-active: '#d1453b' # CTA pressed — deeper red (--color-td-cta-active) brand-tint-100: '#fef6ef' # palest red-warm tint (--primary-100) brand-tint-200: '#fdf0e4' # pale red-warm tint (--primary-200) brand-tint-300: '#fbe8d7' # soft red-warm tint (--primary-300) brand-deep: '#9a3b00' # deepest warm-brown red, dense text on tint (--primary-700) on-brand: '#ffffff' # white text on Todoist-red accent-yellow: '#ffc93e' # warm gold accent dot / illustration (--accents-yellow / perceptional-yellow) accent-green: '#6b8767' # muted sage accent (--accents-green / perceptional-green) accent-pink: '#ffada4' # soft coral-pink accent (--accents-pink / perceptional-pink) accent-blue: '#316fea' # Twist cross-product blue (--color-tw-primary) — rare on Todoist surface ghost-bg: '#25221e12' # 7% warm-black ghost-button fill (rgba 37,34,30,.07) border: '#eae9e8' # default hairline — 8% black on canvas (--color-black-03) border-soft: '#f1f0ef' # subtlest divider — 5% black (--color-black-02) border-strong: '#dadad9' # stronger border — 14% black (--color-black-04) prio-1: '#ffd6d3' # product-UI priority-1 (red) chip prio-2: '#fbe7ce' # product-UI priority-2 (orange) chip prio-3: '#dde6f9' # product-UI priority-3 (blue) chip prio-4: '#f2efed' # product-UI priority-4 (neutral) chip scrim: 'rgba(34, 40, 41, 0.80)' # overlay backdrop (--overlay-background-idle) shadow-color: 'rgba(0, 0, 0, 0.24)' # base shadow tint (--shadow-color) success: '#3a7400' # confirmation green (--display-onlight-color-green) success-soft: '#f6f9f7' # pale green surface (--color-green-01) warning: '#f7b84f' # advisory gold (--color-gold-04) warning-soft: '#fff9f0' # pale gold box (--box-highlight-background) danger: '#de483a' # error red (--accents-red) danger-soft: '#fdf5f0' # pale error box (--box-warning-background) info: '#316fea' # informational blue (--color-blue-04) info-soft: '#f1f7fe' # pale info surface (--color-blue-01) typography: display: family: 'Graphik, "Graphik-1bbd4a4c7a2fb472", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif' weights: [500, 600, 700] opentype-features: ['kern', 'liga'] body: family: 'Graphik, "Graphik-1bbd4a4c7a2fb472", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif' weights: [400, 500, 600] mono: family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace' weights: [400, 500] scale: display-hero: { size: 80, weight: 700, lineHeight: 1.0, tracking: '-0.03em', family: display } display-lg: { size: 64, weight: 700, lineHeight: 1.05, tracking: '-0.025em', family: display } h1: { size: 55, weight: 600, lineHeight: 1.1, tracking: '-0.02em', family: display } h2: { size: 38, weight: 600, lineHeight: 1.15, tracking: '-0.015em', family: display } h3: { size: 28, weight: 600, lineHeight: 1.25, tracking: '-0.008em', family: display } h4: { size: 22, weight: 600, lineHeight: 1.3, tracking: '-0.004em', family: display } title-md: { size: 20, weight: 600, lineHeight: 1.35, tracking: '0', family: display } title-sm: { size: 18, weight: 600, lineHeight: 1.4, tracking: '0', family: body } body-lg: { size: 18, weight: 400, lineHeight: 1.6, tracking: '0', family: body } body: { size: 16, weight: 400, lineHeight: 1.6, tracking: '0', family: body } body-sm: { size: 14, weight: 400, lineHeight: 1.55, tracking: '0', family: body } label: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0', family: body } button: { size: 16, weight: 500, lineHeight: 1.2, tracking: '0', family: body } nav-link: { size: 15, weight: 500, lineHeight: 1.4, tracking: '0', family: body } caption: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: body } overline: { size: 12, weight: 600, lineHeight: 1.3, tracking: '0.06em', family: body, transform: uppercase } radius: micro: 2 sm: 4 md: 8 # buttons, inputs — the dominant control radius lg: 12 # cards xl: 16 # feature panels, large surfaces pill: 9999 # badges, avatars, segmented chips spacing: base: 4 scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96] layout: page-width: 1280 prose-width: 720 header-height: 64 feature-card-min-width: 300 components: button-primary: bg: '#e44432' color: '#ffffff' radius: 8 padding: '12px 20px' font: button hover: 'background #ee5244' active: 'background #d1453b' use: '"Start for free" — the signature Todoist-red CTA; the page''s one saturated fill.' button-secondary: bg: '#25221e12' color: '#25221e' radius: 8 padding: '12px 20px' font: button hover: 'fill deepens to rgba(37,34,30,0.12)' use: 'Soft tonal button — "Accept" (cookie), secondary in-page actions; warm-black ghost fill.' button-ghost: bg: 'transparent' color: '#25221e' border: '1px solid #dadad9' radius: 8 padding: '12px 20px' font: button hover: 'border #c1c0c0 + fill rgba(37,34,30,0.03)' use: 'Outline button — "Log in", tertiary actions.' button-text: bg: 'transparent' color: '#e44432' underline: 'none' font: button hover: 'underline appears' use: 'Inline text link in Todoist-red — "Learn more", "See all features".' card: bg: '#ffffff' border: '1px solid #eae9e8' radius: 12 padding: 24 shadow: '0px 1px 19px 0px rgba(42,29,48,0.06)' use: 'Feature card lifted off the warm canvas; soft purple-tinted ambient shadow.' card-cream: bg: '#fff5eb' border: 'none' radius: 16 padding: 32 use: 'Cream-tinted feature panel — warm secondary band, no border needed.' card-peach: bg: '#fae8d6' border: 'none' radius: 16 padding: 32 use: 'Peach feature panel — warmest secondary surface for illustrated bands.' input: bg: '#ffffff' color: '#25221e' border: '1px solid #dadad9' radius: 8 padding: '10px 14px' height: 44 focus: 'border thickens to 1.5px #e44432 + faint red ring' use: 'Standard form field — signup, email capture.' badge-priority: bg: '#ffd6d3' color: '#9a3b00' radius: 9999 padding: '3px 10px' font: caption use: 'Priority chip mirroring the product UI — p1 red, p2 peach, p3 blue, p4 neutral.' badge-soft: bg: '#fdf0e4' color: '#9a3b00' radius: 9999 padding: '4px 12px' font: caption use: 'Inline "New" / category pill — warm red-tint chip.' nav-link: color: '#25221e' font: nav-link hover: 'color stays; subtle underline or dropdown opens' use: 'Top-nav item — "Made for", "Features", "Pricing", "Resources".' motion: ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)' ease-out-soft: 'cubic-bezier(0.0, 0, 0.2, 1)' ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)' duration-fast: 150 duration-standard: 240 duration-slow: 320 button-hover: 'background red shift #e44432 → #ee5244 over 150ms standard' card-hover: 'shadow tier deepens + 1px lift over 240ms standard' checkbox-complete: 'task checkbox fills with brand red + strike-through over 240ms — the signature product gesture' scroll-reveal: 'feature bands fade + rise 12px over 320ms ease-out-soft on viewport entry' reduced-motion: 'respects prefers-reduced-motion: reduce — transforms suppressed, fade-only' breakpoints: mobile: 640 tablet: 1024 desktop: 1280 wide: 1536 shadows: ambient: '0px 1px 2px 0px rgba(0,0,0,0.04)' card: '0px 1px 19px 0px rgba(42,29,48,0.06)' elevated: '0px 8px 28px -6px rgba(42,29,48,0.12), 0px 2px 8px -2px rgba(0,0,0,0.06)' popover: '0px 12px 32px -8px rgba(0,0,0,0.16)' ring: '0 0 0 3px rgba(228,68,50,0.24)' accessibility: contrast-text-on-bg: 15.6 # #25221e on #fefdfc — AAA contrast-text-on-white: 15.8 # #25221e on #ffffff — AAA contrast-text-on-peach: 13.3 # #25221e on #fae8d6 — AAA contrast-text-on-cream: 14.7 # #25221e on #fff5eb — AAA contrast-white-on-brand: 4.1 # #ffffff on #e44432 — AA large only; CTA is 16px/500 → large-text pass contrast-white-on-cta-active: 4.5 # #ffffff on #d1453b — AA body (hover/active state is the safer pairing) contrast-muted-on-bg: 7.1 # #565656 (66% black) on #fefdfc — AAA contrast-brand-on-bg: 4.0 # #e44432 on #fefdfc — AA large only; never use red for small body text focus-ring: '3px rgba(228,68,50,0.24) ring + 1.5px solid #e44432 border on inputs' reduced-motion-honored: true touch-target-min: 44 dark-mode: null # Light-only marketing surface. The Todoist *app* ships full system light/dark themes (and many accent themes); the public marketing site is warm-light only. lineage: summary: 'Todoist''s marketing site is warm minimalism with one loud brand note. It pairs a warm-white paper canvas (`#fefdfc`) and humanist Graphik type — the Swiss-grid, content-first discipline shared by Linear, Stripe and Notion — with a single uncompromising signature: Todoist-red (`#e44432`), the colour the brand has owned since its 2007 origins as a Doist product. Where Things goes cool-Apple-grey and Linear goes near-black, Todoist goes *warm*: peach and cream secondary surfaces (`#fae8d6`, `#fff5eb`) keep the page friendly and human rather than clinical. The result reads as "calm productivity" — Bauhaus restraint warmed up for a consumer audience that wants the relief of an organized day, not an enterprise dashboard.' influences: - name: 'Doist (the studio behind Todoist & Twist)' role: 'Remote-first design studio — the shared system that gives Todoist (red) and Twist (blue) parallel token scales is visible in the CSS variables' url: 'https://doist.com' - name: 'Graphik by Commercial Type' role: 'The humanist grotesque that carries the entire page — warm, neutral, slightly friendlier than Helvetica or Inter' url: 'https://commercialtype.com/catalog/graphik' - name: 'Swiss / International Typographic Style' role: 'Grid discipline, generous whitespace, sans-serif clarity, content-first hierarchy' url: 'https://en.wikipedia.org/wiki/International_Typographic_Style' - name: 'Stripe' role: 'The modern SaaS-marketing template — soft tinted feature bands, restrained palette, one brand voltage, generous type' url: 'https://stripe.com' - name: 'Notion' role: 'Warm, approachable productivity register — friendly illustration, near-white paper canvas, calm rather than corporate' url: 'https://www.notion.so' --- ## 1. Visual Theme & Atmosphere Todoist's marketing site is what calm productivity looks like rendered as a webpage. The canvas is a warm-white `#fefdfc` — not pure white, not screen-grey, but the off-white of good paper, with the faintest peach undertone. Against it, body copy sits in `#25221e`, a warm near-black with a brown-grey cast that reads measurably softer than the cold `#000` most SaaS reaches for. The typeface is **Graphik**, Commercial Type's humanist grotesque — neutral and modern but with rounder, friendlier terminals than Helvetica or Inter. Together the warm paper, warm ink, and humanist sans set an atmosphere that is the opposite of a clinical enterprise dashboard: this is a tool that wants to feel like relief, not work. The single saturated voltage is **Todoist-red** — `#e44432` (`--color-td-primary`), the colour the brand has owned since Doist first shipped the product. It appears almost nowhere as a wash and everywhere as a *signal*: the "Start for free" CTA fills with it at an 8px radius, the in-product checkbox fills with it the moment a task completes, and inline text links carry it. Red is the brand's heartbeat — a confident, slightly retro, distinctly human red (not a tech-blue, not a startup-purple) that has become as recognizable as the wordmark itself. The site is disciplined about it: one or two red moments per band, never a sea of red. What keeps the page from going stark is its **warm secondary system**. Feature bands tint to peach (`#fae8d6`, `--color-td-secondary-dark`), to mid-cream (`#fff5eb`), and to the lightest cream (`#fff9f3`) — a graduated warm stack that lets sections alternate without ever introducing a cold grey. Illustrated panels lean on a small set of soft accent hues — warm gold (`#ffc93e`), sage green (`#6b8767`), and coral-pink (`#ffada4`) — used as illustration spot colours rather than UI chrome. Nothing here is loud except the red; everything else is a warm hush. The layout language is content-first and unhurried. A 1280px container holds a grid of generous feature bands, each with a clear headline, a short deck, and a screenshot or illustration. Cards lift off the warm canvas with a soft purple-tinted ambient shadow (`rgba(42,29,48,0.06)`) — barely there, just enough to separate white card from off-white ground. Corners are gentle: 8px on controls, 12px on cards, 16px on big panels. There is no edge-to-edge drama, no dark-mode hero inversion, no gradient mesh — just warm, organized calm. The atmosphere, in one phrase, is **friendly competence**. Todoist sells the feeling of a day that's under control, and the site embodies it: warm enough to be approachable, disciplined enough to be trusted, with one red signal that tells you exactly where to press. **Key Characteristics:** - Warm-white paper canvas (`#fefdfc`) — never pure white, never cold grey - Warm near-black ink (`#25221e`) — softer and browner than `#000` - Graphik humanist grotesque — modern but friendly, the whole type system - Signature Todoist-red (`#e44432`) as the single saturated voltage — one or two moments per band - Warm secondary stack: peach (`#fae8d6`) → mid-cream (`#fff5eb`) → light cream (`#fff9f3`) - Soft illustration accents — warm gold, sage, coral-pink — never as UI chrome - 8px control radius / 12px card radius / 16px panel radius — gentle, rounded, never sharp - Soft purple-tinted ambient card shadow (`rgba(42,29,48,0.06)`) — cards lift, barely - 1280px content-first grid with generous feature bands and big screenshots - Calm, approachable register — productivity as relief, not as enterprise work ## 2. Color Palette & Roles ### Primary - **Canvas** (`#fefdfc`): the warm-white paper floor — warm-white with a faint peach undertone (rgb 254,253,252). The single most defining choice; warm where peers go cold. - **Ink** (`#25221e`): warm near-black, the dominant text colour (rgb 37,34,30). Browner and softer than `#000` — body, headlines, nav. - **Brand Todoist-red** (`#e44432`) [`--color-td-primary`]: the signature voltage. Primary CTA fill, task-complete checkbox, inline links. One or two moments per band. ### Brand & States - **Brand Hover** (`#ee5244`) [`--color-td-cta-hover`]: CTA hover — a touch lighter, warmer red. - **Brand Active** (`#d1453b`) [`--color-td-cta-active`]: CTA pressed — deeper, denser red. - **Brand Tint 100/200/300** (`#fef6ef` / `#fdf0e4` / `#fbe8d7`) [`--primary-100/200/300`]: palest red-warm tints for soft chips, hover surfaces, and badge fills. - **Brand Deep** (`#9a3b00`) [`--primary-700`]: deepest warm-brown red — dense text on a red-tint chip; passes AAA on tint surfaces. - **On-Brand** (`#ffffff`): white text/icons on Todoist-red. ### Accent (illustration spot colours) - **Gold** (`#ffc93e`) [`--accents-yellow`]: warm gold dots, highlights in illustrations. - **Sage** (`#6b8767`) [`--accents-green`]: muted green accent — completed / calm states in art. - **Coral-pink** (`#ffada4`) [`--accents-pink`]: soft pink accent in illustrations. - **Twist-blue** (`#316fea`) [`--color-tw-primary`]: cross-product blue from Doist's sibling app — rare on Todoist surfaces, used only when referencing Twist. ### Interactive - **Text link** (`#e44432`): inline links in Todoist-red, no underline at rest; underline on hover. - **Soft / ghost button fill** (`rgba(37,34,30,0.07)`): warm-black tonal fill for secondary actions ("Accept"). - **Focus ring** (`rgba(228,68,50,0.24)`): 3px red-tint ring on focused controls. - **Disabled** (`#c1c0c0`, 24% black on canvas): placeholder and disabled text. ### Neutral Scale (warm-black alphas composited on canvas) - **Ink** (`#25221e`) — primary copy, headlines (rgb 37,34,30) - **Muted** (`#565656`) [`--color-black-07`, 66%] — secondary copy, decks - **Soft** (`#8c8b8b`) [`--color-black-06`, 45%] — captions, metadata - **Faint** (`#c1c0c0`) [`--color-black-05`, 24%] — placeholder, disabled - **Hairline-strong** (`#dadad9`) [`--color-black-04`, 14%] — input borders - **Hairline** (`#eae9e8`) [`--color-black-03`, 8%] — default dividers - **Hairline-soft** (`#f1f0ef`) [`--color-black-02`, 5%] — subtlest dividers ### Surface & Borders - **Surface** (`#ffffff`) — pure-white cards lifting off the warm canvas - **Surface-card idle** (`#fcfcfc`) [`--card-background-idle`] — near-white resting card - **Cream-light** (`#fff9f3`) [`--color-td-secondary-light`] — lightest secondary band - **Cream-mid** (`#fff5eb`) [`--color-td-secondary-mid`] — mid cream band - **Peach** (`#fae8d6`) [`--color-td-secondary-dark`] — warmest secondary panel - **Beige** (`#fcf8f3`) [`--color-beige-01`] — warmest neutral wash - **Border** (`#eae9e8`) — default hairline (8% black); never a cold solid grey ### Shadow Colors Todoist's card shadow is **purple-tinted**, not pure black — `rgba(42,29,48,0.06)` (`--product-ui-elevated-pale-pink`). The faint plum cast warms the depth so it never reads as a hard drop shadow against the peach surfaces. The base shadow variable is `rgba(0,0,0,0.24)` (`--shadow-color`) for heavier popovers. - `0px 1px 2px 0px rgba(0,0,0,0.04)` — ambient - `0px 1px 19px 0px rgba(42,29,48,0.06)` — signature card shadow (soft, wide, plum-tinted) - `0px 8px 28px -6px rgba(42,29,48,0.12)` — elevated hover - `0px 12px 32px -8px rgba(0,0,0,0.16)` — popover / dropdown ### Semantic - **Success** (`#3a7400` on `#f6f9f7`) [`--display-onlight-color-green`] — confirmation green - **Warning** (`#f7b84f` on `#fff9f0`) [`--color-gold-04`] — advisory gold - **Danger** (`#de483a` on `#fdf5f0`) [`--accents-red`] — error red (note: a hair off brand-red, intentionally distinct) - **Info** (`#316fea` on `#f1f7fe`) [`--color-blue-04`] — informational blue - **Priority chips** (product-UI): p1 `#ffd6d3` · p2 `#fbe7ce` · p3 `#dde6f9` · p4 `#f2efed` — mirrored from the app for marketing screenshots ## 3. Typography Rules ### Font Family **Primary**: `Graphik, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif` (the production face self-hosts as `Graphik-1bbd4a4c7a2fb472`). Graphik is Commercial Type's humanist grotesque — a modern, neutral sans with subtly rounded terminals and a generous x-height that reads warmer and friendlier than Helvetica, Inter, or Arial. It carries the entire site: display, headlines, body, nav, and labels all draw from the one family across weights 400–700. **Mono companion**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace` — used essentially never on the marketing surface (Todoist has no developer-docs band on the homepage). **OpenType features**: `kern` and `liga` always on. Graphik is set without stylistic-set overrides — the face is used as drawn. Display sizes lean on negative tracking; body sits at zero tracking. The single typographic decision is *one warm humanist family, many weights, negative tracking only at display sizes*. Graphik does all the work; the warmth comes from the face, not from decoration. ### Hierarchy | Role | Font | Size | Weight | Line Height | Tracking | Notes | |------|------|------|--------|-------------|----------|-------| | display-hero | Graphik | 80 | 700 | 1.0 | -0.03em | Largest marketing display moment | | display-lg | Graphik | 64 | 700 | 1.05 | -0.025em | Big section opener | | h1 | Graphik | 55 | 600 | 1.1 | -0.02em | Hero headline (live: 55px / 600) | | h2 | Graphik | 38 | 600 | 1.15 | -0.015em | Section heading (live: 38px / 600) | | h3 | Graphik | 28 | 600 | 1.25 | -0.008em | Feature title | | h4 | Graphik | 22 | 600 | 1.3 | -0.004em | Card title | | title-md | Graphik | 20 | 600 | 1.35 | 0 | Sub-card title | | title-sm | Graphik | 18 | 600 | 1.4 | 0 | Inline emphasis title | | body-lg | Graphik | 18 | 400 | 1.6 | 0 | Hero deck — larger body | | body | Graphik | 16 | 400 | 1.6 | 0 | Default running text (live: 16px / 400) | | body-sm | Graphik | 14 | 400 | 1.55 | 0 | Card meta, supporting copy | | label | Graphik | 13 | 500 | 1.4 | 0 | Form labels, small UI text | | button | Graphik | 16 | 500 | 1.2 | 0 | CTA / button label | | nav-link | Graphik | 15 | 500 | 1.4 | 0 | Top-nav item | | caption | Graphik | 12 | 500 | 1.4 | 0.02em | Timestamps, fine print | | overline | Graphik | 12 | 600 | 1.3 | 0.06em | Uppercase section eyebrow | ### Principles - **One family, weight-driven hierarchy.** Graphik at 400 for body, 500 for buttons/labels, 600 for headlines, 700 for display. No second typeface, no serif accent. - **Headlines at 600, not 700.** The live hero (55px) and section heads (38px) both sit at weight 600 — Todoist keeps headlines confident but not heavy. Reserve 700 for the largest display sizes. - **Negative tracking scales with size.** Display sits at -0.03em, the hero at -0.02em, section heads at -0.015em; body and small text sit at zero. Larger = tighter. - **Generous body leading (1.6).** Body and hero deck sit at 1.6 line-height — lush, comfortable, calm. The extra leading is part of the unhurried atmosphere. - **Warm ink, never pure black.** All type sits at `#25221e` or a warm-black alpha — never `#000`. The browned ink is what makes the page feel friendly. - **Inter is the closest open substitute** if Graphik is unavailable — but Inter reads slightly colder; soften it with -0.02em on headlines and prefer weight 600 over 700 to keep the friendly register. - **Red is for signals, not headlines.** Headline copy stays warm-black; red is reserved for CTAs and inline links so it never loses its meaning as "act here". ## 4. Component Stylings ### Buttons Four button tiers carry the page, all at an **8px radius** and a 16px/500 Graphik label. **`button-primary`** — The signature CTA. Todoist-red fill (`#e44432`), white text, 8px radius, ~12×20px padding. Hover lightens to `#ee5244`; active deepens to `#d1453b`. This is the page's one saturated fill — "Start for free" is the canonical instance. Use sparingly: typically one per band. **`button-secondary`** — Soft tonal button. Warm-black ghost fill (`rgba(37,34,30,0.07)`), warm-black text, 8px radius. The "Accept" cookie button and most secondary in-page actions. Hover deepens the fill slightly. Calm, low-voltage, pairs beside the red primary. **`button-ghost`** — Outline button. Transparent fill, warm-black text, 1px `#dadad9` border, 8px radius. "Log in" and tertiary actions. Hover: border darkens to `#c1c0c0` and a 3% warm-black fill appears. **`button-text`** — Inline text link in Todoist-red (`#e44432`), no fill, no border. Underline appears on hover. "Learn more", "See all features". ### Cards **`card`** — The default feature card. Pure-white fill (`#ffffff`) lifting off the warm canvas, 1px `#eae9e8` hairline, 12px radius, 24px padding, and the signature soft plum-tinted ambient shadow (`0px 1px 19px 0px rgba(42,29,48,0.06)`). The card separates from the off-white ground via that wide, soft shadow more than via the faint border. **`card-cream`** — Cream-tinted feature panel. `#fff5eb` fill, no border, 16px radius, 32px padding. Used for warm secondary bands where a tint alone provides separation — no shadow needed. **`card-peach`** — Peach feature panel. `#fae8d6` fill (`--color-td-secondary-dark`), no border, 16px radius, 32px padding. The warmest surface, reserved for illustrated bands and emotionally warm moments ("Achieve peace of mind"). ### Badges, Tags, Pills **`badge-priority`** — Priority chip mirroring the product UI. Pill radius, 12px caption, warm-brown text (`#9a3b00`). Backgrounds map to the app priorities: p1 `#ffd6d3` (red), p2 `#fbe7ce` (peach), p3 `#dde6f9` (blue), p4 `#f2efed` (neutral). Appears in product screenshots. **`badge-soft`** — Inline "New" / category pill. Warm red-tint fill (`#fdf0e4`), warm-brown text (`#9a3b00`), pill radius, 4×12px padding, 12px caption. ### Inputs / Forms **`input`** — White fill (`#ffffff`), 1px `#dadad9` border, 8px radius, 44px height, 10×14px padding, warm-black text. Placeholder in `#8c8b8b`. On focus the border thickens to 1.5px Todoist-red (`#e44432`) and a faint red ring appears (`0 0 0 3px rgba(228,68,50,0.24)`). ### Navigation **`top-nav`** — Warm-white surface matching the canvas (no separation at rest), 64px height. Wordmark flush left, primary nav items centred/right ("Made for", "Features", "Pricing", "Resources"), and a "Log in" + red "Start for free" CTA pair flush right. Nav links in 15px/500 warm-black. On scroll, a 1px `#eae9e8` bottom hairline appears to detach the header from the page. Dropdown mega-menus open below the nav items with the popover shadow. ## 5. Layout Principles ### Spacing System - Base unit: **4px** - Scale: `0 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96` - Section padding (vertical): 64–96px between major feature bands — generous, unhurried - Card internal padding: 24px on white cards; 32px on cream/peach panels - Inter-card gutters: 24px in multi-column grids ### Grid & Container - Max content width: **1280px** with comfortable side gutters - Prose measure: ~720px for long paragraphs — keeps reading line-length comfortable - Hero: single-column centred or left-text / right-illustration split - Feature bands: alternating 2-up (text + screenshot) layouts, occasionally a 3-up card grid for feature lists - Bands alternate surface tints — warm-white → cream → peach → warm-white — so adjacent sections separate by warmth rather than by hard rule ### Whitespace Philosophy The page is calm and breathable. Generous vertical rhythm (64–96px between bands), 1.6 body leading, and a 720px prose measure all serve the same goal: an unhurried, low-stress read that mirrors the product's promise. Whitespace is warm-white, so even the "empty" space participates in the friendly atmosphere. Sections are clearly delimited but never crowded; there is room to breathe between every claim. ### Section Cadence A typical Todoist marketing page runs: 1. Warm-white hero (55px/600 headline, 18px deck, red "Start for free" CTA + secondary, product screenshot or illustration) 2. Social-proof strip (logos / award badges / user count) on a faint tint 3. Feature band — text-left / screenshot-right on a cream surface 4. Feature band — screenshot-left / text-right on warm-white (alternating) 5. Peach "emotional payoff" band (illustration-forward — "Achieve peace of mind") 6. Three-up feature card grid (white cards on warm canvas) 7. Closing CTA band — centred headline + red CTA, often on peach 8. Footer — multi-column links in warm-muted text on warm-white The alternation is *surface warmth* (white / cream / peach), never a light/dark inversion. The page stays warm throughout. ## 6. Shapes & Radius Scale | Tier | Value | Use | |------|-------|-----| | Micro | 2px | Tiny internal chrome, checkbox inner marks | | Small | 4px | Fine controls, small tags | | Standard | 8px | Buttons, inputs, select fields — the dominant control radius | | Comfortable | 12px | Cards, dropdowns, smaller panels | | Featured | 16px | Cream/peach feature panels, large surfaces | | Pill | 9999px | Badges, priority chips, avatars, segmented controls | The page's radius personality is **gently rounded**. 8px on every control reads as soft-but-crisp — friendlier than the 4px Linear uses, more disciplined than the 12px+ a consumer toy would reach for. Cards step up to 12px, big warm panels to 16px, and small interactive chips go full pill. There are no sharp 0px corners anywhere on interactive surfaces; the warmth of the palette is reinforced by the softness of the corners. No compound radii — controls round uniformly. ## 7. Depth & Elevation | Level | Treatment | Use | |-------|-----------|-----| | 0 — Flat | no shadow | Canvas, cream/peach bands, nav at rest (most surfaces) | | 1 — Ambient | `0px 1px 2px 0px rgba(0,0,0,0.04)` | Subtle separation, sticky-nav-on-scroll baseline | | 2 — Card | `0px 1px 19px 0px rgba(42,29,48,0.06)` | White feature cards on warm canvas — the signature soft plum-tinted lift | | 3 — Elevated | `0px 8px 28px -6px rgba(42,29,48,0.12), 0px 2px 8px -2px rgba(0,0,0,0.06)` | Card hover, raised product previews | | 4 — Popover | `0px 12px 32px -8px rgba(0,0,0,0.16)` | Nav mega-menus, dropdowns, tooltips | | 5 — Modal | scrim `rgba(34,40,41,0.80)` + dialog at popover shadow | Sign-up modal, video lightbox | ### Shadow Philosophy Todoist's depth language is **soft and warm**. The signature card shadow is wide and low-opacity (`0px 1px 19px 0px rgba(42,29,48,0.06)`) with a faint *plum* tint rather than neutral black — the warmth carries into the depth so cards never cast a hard, cold shadow against the peach surfaces. On warm-tinted bands (cream, peach), cards often drop the shadow entirely and lift via surface-colour contrast alone (white card on cream ground). Elevation rises in soft, blurry steps; nothing snaps. The page reads as gently layered paper, not as floating glass panels. ## 8. Interaction & Motion ### Easing - **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — default for button colour shifts, hover states - **Out-soft**: `cubic-bezier(0.0, 0, 0.2, 1)` — scroll-reveal entrances - **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — modal / mega-menu entry ### Durations | Bucket | Value | Use | |--------|-------|-----| | Fast | 150ms | Button colour swaps, link underline, focus-ring fade | | Standard | 240ms | Hover transitions, card lift, checkbox complete | | Slow | 320ms | Scroll-reveal, modal entry, mega-menu | ### Per-Component Recipes - **Primary CTA hover**: background red shifts `#e44432` → `#ee5244` over 150ms standard; active drops to `#d1453b`. No transform — the colour shift is the feedback. - **Card hover**: shadow steps from card (level 2) to elevated (level 3) and the card lifts ~1px over 240ms standard. - **Task-complete checkbox** (the signature product gesture, echoed in marketing screenshots): the empty circle fills with Todoist-red, a white check draws in, and the task text gains a strike-through over 240ms — a small, satisfying "done" moment. - **Inline text link**: underline fades in over 150ms on hover; colour stays Todoist-red. - **Scroll-reveal**: feature bands fade in and rise 12px over 320ms ease-out-soft on viewport entry, one-shot per band. - **Mega-menu**: opens with a fade + 8px downward slide over 320ms emphasized. ### Page Transitions Navigation is standard page loads (multi-page Astro/static marketing site); anchored in-page links smooth-scroll over ~400ms. The sticky header detaches with a hairline as the page scrolls past the hero. ### Reduced Motion Respects `prefers-reduced-motion: reduce`. All `translate` and `scale` transforms suppress: scroll-reveal becomes a static render-on-mount, card hover drops the lift (shadow change only), the checkbox-complete strike-through appears instantly, and link underlines toggle immediately. Colour transitions remain (they convey state, not decoration). ## 9. Accessibility & A11y ### Contrast Pairs | Pair | Ratio | Level | |------|-------|-------| | #25221e ink on #fefdfc canvas | 15.6 | AAA | | #25221e ink on #ffffff card | 15.8 | AAA | | #25221e ink on #fae8d6 peach | 13.3 | AAA | | #25221e ink on #fff5eb cream | 14.7 | AAA | | #565656 muted on #fefdfc canvas | 7.1 | AAA | | #ffffff on #e44432 brand-red | 4.1 | AA large only | | #ffffff on #d1453b cta-active | 4.5 | AA body | | #e44432 brand on #fefdfc canvas | 4.0 | AA large only | | #9a3b00 deep-red on #fdf0e4 tint | 7.6 | AAA | The one number to watch is **white on brand-red (`#e44432`) at 4.1** — that passes WCAG AA only for *large* text (≥18px or ≥14px bold). The "Start for free" CTA sits at 16px/500, which qualifies as large-bold and passes; but never set small white body text on a flat brand-red fill. The hover/active reds (`#ee5244` / `#d1453b`) and the deep-red text token (`#9a3b00`) are the safer pairings when contrast matters. Likewise, **brand-red as text on the canvas is large-only (4.0)** — keep red links at link-size or larger, and never use red for small running body text. ### Focus Indicators Focused inputs thicken their border to 1.5px Todoist-red (`#e44432`) and gain a 3px red-tint ring (`rgba(228,68,50,0.24)`). Focused buttons and links carry a visible 2px focus outline in brand-red with 2px offset. The red ring is the one place the brand colour appears as a pure interactive affordance everywhere on the page. ### ARIA Patterns - **Top nav**: `