A friendly productivity design system for todo lists, task managers, checklists, and habit trackers. Floating white row cards on a cool off-white canvas, a single glowing purple action color, rounded Nunito typography, color-coded priority arrows and clickable status tags, a tiny progress ring showing empty, half, or full progress, and soft large-radius modals for adding, editing, and deleting. Every element is rounded, quiet, and obvious, so a list of fifty tasks still feels light.
What Is Todo List UI?
Todo List UI is a design system for task lists that feel gentle instead of corporate. Each task is a white card floating on a cool canvas, with a quiet gray label, a clear value, a color-coded priority, a status badge, and a small progress ring that does the work of a checkbox. Everything is rounded, everything is soft, and the only strong color is a glowing purple that tells you where to act.
The Soft Productivity Look
Most task apps look like spreadsheets with a skin on. This system does the opposite: it removes every line, border, and header, and lets spacing, radius, and shadow carry the structure. A rounded Nunito typeface keeps labels friendly, and a restrained set of meaning-bearing colors (green, amber, red for priority; gray, blue, mint for status) lets a visitor read a long list in a few seconds without reading a single word.
Click the Status, See the Progress
A checkbox has two states. Real tasks have at least three. The ring shows To Do, In Progress, and Done in one 28px graphic. Click the status tag to cycle To Do → In Progress → Done → To Do: the tag updates immediately and the ring slowly animates from empty to half filled to fully filled over 900ms per change. Returning to To Do smoothly empties it over the same duration. The ring itself supports the same cycle. These synchronized controls replace a checkbox and a status dropdown, and give the list its recognizable rhythm: a column of small purple rings running down the right side.
Forms That Match the List
The add and edit modal uses the same language as the rows: big radii, lavender borders, a close button in a soft gray square, outlined chips for level that fill when chosen, and a custom priority menu with generous spacing. The delete dialog is short, centered, and calm. Nothing in the flow feels like a different product from the list that launched it.
Using This Prompt With an AI Coding Agent
Give the agent this whole prompt plus your product name and a few sample tasks. Ask it to build the header and the row component first, then the progress ring and status cycling, then the add and edit modal with the level chips and priority menu, then the delete dialog, empty state, toasts, and responsive behavior. Ask it to verify keyboard flow in the modals and the priority menu before finishing.