Todoist

This design system presents a clean, business-casual aesthetic, grounded in warm off-white and charcoal neutrals, punctuated by a signature vibrant red-orange. The generous use of rounded corners (15px for prominent elements, 8px for most others) softens the utilitarian feel of the task manager, while subtle, low-opacity shadows add minimal depth without visual clutter, creating an approachable, yet professional, interface. Use Action Red (#e34432) exclusively for primary calls-to-action and active states to maintain visual prominence. Apply 15px border-radius to prominent interactive elements like buttons and large images for a soft, friendly aesthetic. Utilize Graphik for all main headings and titles, ensuring distinct letter spacing: -0.0100em at 55px, -0.0050em at 44px, and normal at smaller sizes. Maintain a clear hierarchy using Paper White (#fefdfc) for backgrounds and Faded Charcoal (#25221e) for primary text and elements. Employ the subtle shadow rgba(37, 34, 30, 0.04) 0px 1px 0px 0px for all cards to provide slight elevation without heavy visual weight. Ensure generous padding on interactive elements, like 12px vertical and 16px horizontal for primary buttons, to create comfortable touch targets. Do not use true black (#000000) for body text; instead, use Faded Charcoal (#25221e) or Subtle Ash (#6f6c69) for softer contrast. Avoid using multiple chromatic colors in close proximity; the palette should remain largely neutral with controlled accents. Do not use sharp corners; the minimum border-radius for UI elements should be 6px (for badges), with 8px and 15px being more common. Refrain from using heavy or multiple shadows; subtle single-layer shadows are the standard for elevation. Do not introduce new decorative fonts beyond Caecilia unless specifically approved; maintain the Graphik and Inter pairing. Avoid making inline links blend with body text; always use Link Orange (#cf3520) or Accent Blue (#0f66ae) for clear distinction.