Productivity · Paper & Ink Focus
Productivity App UI Design Template
Cadence is a task and planning app design with a paper-planner calm, built for founders and designers shipping a focused productivity app.



Preview
Explore the screens
Preview the productivity mobile app design, fully editable in Sleek.
About the Productivity App
Cadence is a productivity app UI built around a "Paper & Ink Focus" look: a warm paper off-white surface, near-black ink for text, muted sage for completed tasks, and a single vivid tangerine reserved for today's marker, due-now flags, and the add button. There are no floating cards. Tasks live as ruled rows separated by hairline rules, with a tactile circular checkbox that fills sage on complete, so the whole app reads like a well-kept Moleskine planner rendered with digital precision.
The template ships six connected screens that form a full planning loop: a Today list grouped by Morning, Afternoon, and Evening with a hero task count, an Upcoming seven-day strip with dot-density per day, a Projects overview with sage progress rules and open/done counts, a Project detail with sectioned tasks and assignee chips, an inline Add task composer with quick-chips, and a weekly Review ledger with task output, a streak row, and time-by-project bars. A tracked-out mono date-stamp tops every screen, and tasks happening now glow with a thin tangerine left-edge rule like a margin highlight.
Use it in Sleek and make it yours: restyle the palette, edit any screen with AI by describing the change, and add the flows your product needs. Then export it to code, copy it into Figma, or hand a prompt to an AI agent to build it for real, far faster than starting from a blank canvas.
What's inside
Screens included
Today
A date-stamp eyebrow tops a Today list with a "6 tasks · 2 done" count, ruled rows grouped by Morning, Afternoon, and Evening, mono start times, and a "Draft Q3 roadmap" task flagged "NOW" with a tangerine edge. A round tangerine add button sits at the corner.
Upcoming
A scrollable seven-day strip with tabular dates and dot-density per day, with today circled in tangerine, expanding into ruled task lists by day below. It gives a clear week-ahead view.
Projects
A list of project rows like Website Redesign and Marketing Launch, each with a thin sage progress rule and open/done counts in mono. A dimmed row marks a project with no progress yet.
Project detail
Tasks for Website Redesign grouped into Design Phase and Content sections, each with a circular checkbox, due date, and an assignee initial chip. Completed tasks show a sage check and strikethrough.
Add task
A focused inline composer asking "What needs to be done?" with quick-chips for date, project, priority, and time, plus a tangerine "Create Task" confirm. It keeps task capture fast.
Review
A weekly ledger showing task output as a tabular count, a weekday bar, time-by-project breakdown with sage bars, and a tangerine current-streak row. It closes the planning loop with a sense of progress.
Design & features
Key features
- Paper & Ink Focus aesthetic: paper off-white, ink text, one tangerine accent
- Ruled task rows on a flat paper surface, no floating cards
- Tactile circular checkboxes that fill sage with a hand-drawn check
- Tracked-out mono date-stamp eyebrow on every screen
- Tangerine left-edge rule highlighting tasks happening now
- Tabular monospace times, dates, and counts that align like a ledger
- Left-aligned bottom nav with a tangerine active underline
- Weekly review ledger with streaks and time-by-project bars
Audience
Who it's for
Use cases
What you can build
- Launch an MVP for a task or planning app
- Mock up screens for an investor or stakeholder pitch
- Hand a consistent productivity app UI off to developers
- Explore a redesign of an existing to-do or project app
How to use this template
- 1
Open the template
Browse the screens and preview the full design to see if it fits your idea.
- 2
Use this template
Open your own fully editable copy in Sleek with one click.
- 3
Edit with AI
Restyle the palette, change layouts, and add or remove screens just by describing what you want.
- 4
Export and ship
Export your design or hand it to developers, and keep building toward launch.
Frequently asked questions
Related mobile app templates
Start designing your productivity app
Use it in Sleek and make it yours: restyle the palette, edit any screen with AI, and export to code or Figma.
Use this template







