Alloy
Feature Stack
Loading
Todoist — Features
Cool, quiet digital workspace: crisp sans-serif, deep indigo, and subtle, glowing accents.
Click any value to copy. Roles are suggestions, not gospel.
- #e44434oklch(61.7% 0.199 30)Dominant
- #75180foklch(37.0% 0.129 30)Surface
- #fce29foklch(91.9% 0.089 89)Ink
- #8a6f67oklch(56.6% 0.037 37)Accent
- #acd4b4oklch(83.2% 0.061 151)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Graphik-1bbd4a4c7a2fb472 | 55px | 600 | 1.15 | -0.55px | Aa Bb Cc |
| h2 | Graphik-1bbd4a4c7a2fb472 | 38px | 600 | 1.28 | -0.19px | Aa Bb Cc |
| body | Graphik-1bbd4a4c7a2fb472 | 16px | 400 | 1 | 0 | Aa Bb Cc |
| button | Inter-5486e50ce5a4efdf | 16px | 500 | 1.35 | 0.155px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #e44434;
--color-surface: #75180f;
--color-ink: #fce29f;
--color-accent: #8a6f67;
--color-detail: #acd4b4;
}
/* CSS variables exposed by source */
:root {
--color-grey-04: #dedede;
--space-16: 1rem;
--font-family-body: Inter-5486e50ce5a4efdf,"Inter-5486e50ce5a4efdf fallback: Arial","Helvetica Neue",Helvetica,Arial,sans-serif;
--color-blue-06: #2064ca;
--shadow-xs: 0 2px 4px #0000000a;
--shadow-overlay: 0 14px 19px -9px #25221e12, 0 10px 48px #25221e2e;
--space-40: 2.5rem;
--color-blue-03: #3879fa;
--color-td-secondary-light: #fff9f3;
--shadow-elevated-yellow: 0 1px 19px #25221e12, 0 0 48px rgb(253 238 201 / .5);
--color-youtube: red;
--color-td-primary: #e44232;
--color-tw-secondary-mid: #f0f7f5;
--shadow-productui-app-window: 0 1px 7px -3px #25221e12, 0 0 20px -4px #25221e1f;
--color-twitter: #1da1f2;
--color-tw-secondary-light: #f6f9f8;
--font-family-serif: Caecilia-8d8a7c9be503e3f3,"Caecilia-8d8a7c9be503e3f3 fallback: Times New Roman","Caecilia-8d8a7c9be503e3f3 fallback: Times New Roman Bold",serif;
--color-grey-05: #c2c2c2;
--color-perceptional-green: #6b8767;
--shadow-selectable-control: 0 1px 5px #25221e1f, 0 0 0 1px #25221e0a;
--accents-red: #de483a;
--radius-sm: 2.5px;
--font-weight-bold: 700;
--font-weight-regular: 400;
--color-black-06: #00000073;
--color-perceptional-pink: #ffada4;
--color-grey-06: #999;
--radius-md: 4px;
--color-tw-interactive-hover: #003a4d0d;
--shadow-focusvisible-default: 0 0 0 4px #e1f0f4, 0 0 0 1px #297abc;
--color-blue-02: #e2f0ff;
--space-24: 1.5rem;
--shadow-card-idle: 0 1px 0 #25221e0a;
--color-black-07: #000000a8;
--color-td-cta-hover: #ee5244;
--color-black-04: #00000024;
--font-family-sans: Graphik-1bbd4a4c7a2fb472,"Graphik-1bbd4a4c7a2fb472 fallback: Arial","Helvetica Neue",Helvetica,Arial,sans-serif;
--color-td-cta-active: #d1453b;
--color-black-03: #00000014;
--primary-button-blue-hover: #3879fa;
--color-dst-primary: #438952;
--shadow-focus-error: 0 0 0 1px #d1453b, 0 0 0 4px #fbdad7;
--space-64: 4rem;
--color-black-05: #0000003d;
--shadow-xl: 0px 4px 64px #00000059;
--border-radius-none: 0;
--shadow-focus-xs: 0px 2px 7px #00000024;
--color-dst-secondary-dark: #f3ecd1;
--color-dst-secondary-light: #fefbf1;
--space-96: 6rem;
--font-family-heading: Graphik-1bbd4a4c7a2fb472,"Graphik-1bbd4a4c7a2fb472 fallback: Arial","Helvetica Neue",Helvetica,Arial,sans-serif;
--color-td-secondary-dark: #fae8d6;
--color-tw-primary: #316fea;
--color-grey-07: #575757;
--color-tw-display-onlight-ruddy-brown: #b8410a;
--color-green-01: #f6f9f7;
--color-gold-04: #f7b84f;
--color-base-black: #000;
--space-192: 12rem;
--space-48: 3rem;
}Drop-in prompt
Build a landing page in the visual style of Todoist — Features.
Reference design system (extracted from the live site):
- Palette: #e44434, #75180f, #fce29f, #8a6f67, #acd4b4
- Typefaces: Graphik-1bbd4a4c7a2fb472, Inter-5486e50ce5a4efdf
- Macrostructure: Feature Stack
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/todoist-com--features
