Tasks

Preview

Ten screens for one task manager app. My work, Board, Table and Timeline show the same list of tasks four ways, Task and Project go one level deeper, and Inbox, Search, Filters and New task close the loop. Each screen is drawn in Light and in Dark.

Tasks, 10 screens393 x 852 each, Light and Dark

What does a task manager flow need from a component library?

One list that can be drawn several ways, a row that carries status, owner and date, and a short loop around it to filter, search and add.

A task manager needs a view switcher, a row or card for one task, a way to tick it off, a table for the dense view, a sheet for filters and a composer for new work. In this set the row is Badge, Avatar and Button, the view switcher is a Chip, and the loop is Task, Inbox, Search, Filters and New task. All of it is the library as it ships.

On iOS the minimum touch target is 44 pt. The frames pin Platform to ios-md, where platform/min-touch-target reads 44, so that is the size a tap target on these screens starts from. Android would read 48.

Which components carry the Board, Table and Timeline views?

Board is cards of Badge, Avatar and Button. Table is the Table component with the same three inside its cells. Timeline is Avatar on bars over a grid drawn by hand.

The three views share one toolbar: a Chip that names the view, then search, sort and filter Buttons and a New Button. They also share one status set, To do, In progress, In review and Done, which names the Table status split, the Timeline legend and the Status chips on Filters. Switching view changes the body of the screen and nothing above it.

The frames hold more than the pictures show. The Board scrolls sideways, so its third and fourth column sit past the frame edge, and the Table carries five columns of which three are in view. Filters is the Board with a sheet over it: a bg/scrim fill dims the Board, and the sheet adds a Segmented Control, ten Chips and two Toggles. That is why Filters holds the most placed instances of any screen, 66 against 52 on Board.

What are the Tasks screens built from?

Every instance on the ten light frames, counted once, by the component it comes from. The dark row holds the same instances, so each number is per row.

236 instances sit directly on the frames: 174 are Appetite UI components from 21 component sets, and 62 are Lucide icons with 12 different names. Another 262 sit inside those. Placed counts an instance that is not inside another instance. Nested counts one that is. A component is counted by its set name, so every Button variant is a Button, and an icon is any instance named in lowercase. Hidden layers count, and so do layers past the frame edge.

Of the nested instances, 35 are Avatar, Badge and Button, 126 are helper parts of larger components, and icons make up the other 101.

Not everything is an instance. 41 shapes are drawn by hand, all of them rectangles and ellipses and none a vector or a line. Seventeen are status and unread dots, twelve are the Timeline grid, Today column and legend swatches, and twelve are the fade and surface pair behind the tab bar on six screens. Each is bound to a variable or, for the fade, a gradient.

Counted on October 2, 2026 with a Plugin API script over the ten light frames of the Tasks page in the Appetite UI Figma file. An icon is an instance named in lowercase, a Lucide name from the shared icon page. No third party asset is placed on these screens.

Which tokens do the Tasks screens use?

No solid paint on these frames is a raw hex. Each fill and stroke resolves through a variable, which makes the dark row a mode switch.

The ten light frames hold 1,195 solid fills and strokes bound to 57 different variables, and none is unbound. Photographs and the tab bar fade are the only fills that are not a solid color. The frames themselves bind the fg/ text and icon variables, while the components placed on them bind the matching text/ variables for their labels.

Paints are every visible solid fill and stroke on the ten light frames, inside instances included, counted by bound variable name on October 3, 2026. Where a token appears as both a fill and a stroke the two counts are added. A text layer that mixes two styles counts once for each.