Case studyWeb Development
TimeWix
Track time, send invoices, get paid. The design system came first - tokens, components, and app shell - then we built the whole product on those rails. Launching at timewix.com.
- Year
- 2026
- Client
- TimeWix
- Services
- UX/UI Design · Website Development
- Status
- Launching soon
01Brief
What we were asked
A time tracking and invoicing SaaS built end to end - code-ready design system, full web app, and marketing site - launching at timewix.com.
02Challenge
Why it was hard
TimeWix is a SaaS with a simple promise - track time, send invoices, get paid - and a two-sided complication: it has to serve solo freelancers and whole organizations from the same product. An agency owner needs timesheets, approvals, payroll, and team management; a freelancer needs their own projects, clients, and bank account, with none of that overhead visible.
Building product screens before settling the foundations is how SaaS interfaces end up inconsistent within a quarter. The engagement called for the opposite order: brand, tokens, and a complete component library first, specified tightly enough that development can consume them directly.
03The Build
Scroll through the product
01The brand
A calm brand for stressful money
Time tracking is about getting paid, and money software earns trust by staying calm. The TimeWix identity - forest green, plain sentences, a clock in a rounded square - promises exactly three things: track time, send invoices, get paid.
02Tokens
Colors a developer can type
Twenty-five tokens bound to Figma variable collections, each carrying its CSS custom property as code syntax - surface, ink, line, brand, and status ramps with a dark-mode reference. The handoff gap between design and code is closed before it opens.
03Components
States before screens
Buttons, chips, and status indicators specified with full state coverage - including the approval and invoice lifecycle chips that carry most of the product's meaning. Screens assembled later inherit correctness instead of improvising it.
04The product
Sixty screens, one language
On those rails the product came together: dashboards with earnings, utilization, and approvals at a glance, timesheets in week, month, and grid views, invoicing through payment, payroll periods, and reports - every screen assembled from the same parts.
05Go to market
The site sells what the product keeps
The landing page makes the promise - 'Track time. Send invoices. Get paid.' - with the real timesheet as its hero. Pricing and feature deep-dives ship from the same design DNA, so the first impression and the thousandth login look like one product.
04Notes
How it runs
We built the design system foundations-first in Figma. Twenty-five color tokens are bound to Figma variable collections with CSS custom property code syntax - the same var(--green) a developer will type - covering surfaces, ink, lines, brand, and status ramps, with a dark-mode reference palette alongside. Typography, shape, spacing, and elevation follow the same token discipline, and a component library - buttons, status chips for the approval and invoice lifecycles, form controls, stat tiles, and the data table - sits on top with full state coverage.
On those rails the complete product was designed: organization and personal dashboards with utilization, earnings, and approvals at a glance; timesheets in week, month, and grid views; an approvals queue with detail panels; the full invoicing lifecycle from editor through payment and invoice design; projects with tasks and billing policy; payroll periods and lockouts; time reports; clients and banking; and workspaces, organizations, and invites - sixty-plus screens that all speak the same visual language.
The app shell resolves the two-audience problem structurally: the organization workspace exposes teams, approvals, payroll, and reports, while the personal workspace strips down to what a freelancer needs - both from one system. The marketing site closes the loop: a landing page that sells the promise with the real timesheet as its hero, pricing with a freelancer-organization toggle, and feature deep-dives, all from the same design DNA.
Then we built it. The product runs on Next.js and TypeScript with Tailwind consuming the same design tokens the Figma variables defined, a Node.js API over Prisma and PostgreSQL, and Stripe handling payments. The full build is running on staging today and goes live at timewix.com within days.
Stack
05Outcome
Where it landed
- Deliverable
- Full Product
- Design system, complete app, marketing site
- Screens
- 60+
- Dashboards through payroll, end to end
- Color Tokens
- 25
- Bound to variables with CSS code syntax
- Status
- Launching
- Built and on staging - timewix.com goes live in days
06Craft
The work behind the work
Deeper in the product: the week timesheet, the invoice editor, the approvals queue, payroll periods and lockouts, time reports, and the time-tracking page from the marketing site.
Have a product like this in mind?
We plan, design, and ship - the whole story, start to finish.
Next project
Herstasis
Menopause Symptom Tracking App