Productivity · Graph-Paper Precision
Time Tracking App Design Template
Tally is a time tracking app design with a graph-paper, ledger-like look, built for freelancers and product teams who want every hour plotted and accounted for.



미리보기
화면 살펴보기
Sleek에서 완전히 편집 가능한 time tracking 모바일 앱 디자인을 미리 보세요.
Time Tracking App 소개
Tally is a time tracking app design template built on a "Graph-Paper Precision" aesthetic: a faint warm-white grid, near-black ink for figures, slate-grey labels, and one electric lime reserved for the running timer and primary actions. There are no floating cards. Surfaces are drawn with hairline rules and tabular bands, so every screen reads like a draftsman's ledger where durations line up in neat monospace columns.
The template ships six connected screens that form a complete tracking flow: a Timer home with a giant running counter and project selector, a date-grouped Entries log, a Projects view with budget bars, a Reports screen with a daily bar chart and billable split, a weekly Timesheet grid, and a Profile with rates and integrations. A signature running-clock pill docks at the top, showing a pulsing lime dot, the active project, and a ticking monospace counter.
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.
구성 내용
포함된 화면
Timer home
A giant monospace counter at "02:14:36" sits above a project selector and a solid lime "Stop Timer" block, with today's ledger of logged entries beneath. The control center for starting and stopping tracked time.
Entries log
A date-grouped list of tracked blocks with project tags and durations right-aligned in a tabular column, plus a daily total per day. Empty days read "No time tracked" so gaps are visible.
Projects
A list of active clients with hours logged against each budget, shown as thin horizontal bars in ink and lime. A "Create New Project" tile sits at the bottom for adding work.
Reports
Total tracked and billable totals up top, a per-day hours bar chart with the current day highlighted in lime, and a billable vs non-billable split with percentages. Where you read the week at a glance.
Timesheet
A weekly grid of projects against days with hours penciled into each cell, plus daily total rows and week navigation arrows. The classic timesheet view for review and approval.
Profile & settings
Hourly rate, currency, and rounding rule fields with integration toggles for Linear, Notion, and QuickBooks. Where billing defaults and connected tools live.
디자인 & 기능
주요 기능
- Graph-Paper Precision aesthetic: warm-white grid, ink figures, one lime accent
- Tabular monospace numerals that align durations in neat columns
- Ledger-style surfaces drawn with hairline rules, no floating cards
- Signature running-clock pill docked at the top of every screen
- Timer home with giant counter and project selector
- Projects view with hours-against-budget progress bars
- Reports with daily bar chart and billable vs non-billable split
- Weekly timesheet grid with per-day and per-row totals
오디언스
이런 분께 맞습니다
활용 사례
이런 것을 만들 수 있습니다
- Launch an MVP for a freelance time tracking product
- Mock up screens for an investor or stakeholder pitch
- Hand a consistent UI off to developers to build
- Explore a redesign of an existing timesheet tool
이 템플릿 사용 방법
- 1
템플릿 열기
화면을 둘러보고 전체 디자인을 미리 보며 아이디어에 맞는지 확인해 보세요.
- 2
이 템플릿 사용
한 번의 클릭으로 Sleek에서 완전히 편집 가능한 사본을 엽니다.
- 3
AI로 편집
원하는 것을 설명하기만 하면 팔레트 재스타일, 레이아웃 변경, 화면 추가·삭제가 가능합니다.
- 4
내보내고 출시
디자인을 내보내거나 개발자에게 넘기고, 출시를 향해 계속 만들어가세요.
자주 묻는 질문
time tracking 앱 디자인 시작하기
Sleek에서 사용해 내 것으로 만드세요. 팔레트를 다시 스타일링하고, AI로 어떤 화면이든 편집한 뒤 코드나 Figma로 내보내세요.
이 템플릿 사용







