Design System · v1.0

Workwiz

A clean, work-focused design language built on Inter, a confident green primary (#03BE6D), and a quartet of supporting accents — blue, pink, yellow — for richer dashboards and reports.

TypeInter

ModeLight

Primary#03BE6D

Branding & Accents

Green is the lead. Blue / Pink / Yellow are supporting accents — use them to categorize data, not as primary actions.

Workwiz Green

Primary

Cyan

Accent · Data

Pink

Accent · Highlight

Yellow

Accent · Warmth

Colors

Click any swatch to copy its hex.

Green (Primary)

Blue · Pink · Yellow accents

Greyscale

Semantic

Typography

Font family: Inter. Compact UI scale tuned for dashboards.

Display · 700Display headline

H2 · 700Section title

H3 · 600Subheading

LG · 18/28Large body for marketing copy.

MD · 16/24Default body — the quick brown fox jumps over the lazy dog.

SM · 14/20UI default — most product text uses this size.

XS · 12/18Caption / helper text.

Spacing

T-shirt scale from 2 px to 20 px.

Border Radius

Buttons & inputs 8 px · Cards 12–16 px · Pills 9999 px.

4px

8px

12px

16px

3xl

20px

full

∞

Shadows

Soft, layered shadows — applied gently to surfaces and buttons.

Buttons

Height 40 px · Radius 8 px · Subtle shadow on default state.

Variants

Sizes

With icon

Badges

Draft In progress Engineering Design Ops Done Blocked Overdue

Inputs

Task title

A clear, action-oriented sentence.

Assignee

Due date

Pick a date in the future.

Locked field

Description

Checkbox · Radio · Switch

Notify assignee Add to weekly digest Pin to top

Low priority Medium Urgent

Auto-track time Visible to clients Sync to calendar

Cards

Active

Apollo Project

A client retainer covering brand & web through Q3.

12 members·62% done

Engineering

API v2 Rollout

Migration to the new auth + rate limits.

4 engineers·Ships Jul

Design

Mobile Redesign

Refreshed information architecture for the iOS app.

3 designers·Beta soon

Stat Cards

Compact KPI displays for dashboards.

Active projects

↑ 12% vs last month

Open tasks

186

↓ 4% vs last month

Tracked hours

1,240

↑ 8% vs last month

Utilization

87%

↑ 3% vs last month

Avatars

AQ SR MK

AQ SR JD MK +6

Alerts

Heads up

New time-off policy goes live next Monday.

✓

Saved

Your task has been created and assigned.

Capacity warning

Sara is at 110% allocation for next week.

Sync failed

Calendar sync lost connection. Retry in 30 s.

Tables

Task	Project	Assignee	Status	Due
Brand audit	Apollo	Ahmed Q.	In progress	Jun 12
API auth rewrite	API v2	Jad D.	Done	May 28
iOS nav redesign	Mobile	Sara R.	Blocked	Jun 18
Client report Q1	Apollo	Mona K.	Overdue	May 30

Tabs

Overview

Tasks

Time

Invoices

This week

This month

Quarter

Pagination

Modal

Tooltips

Loading & Empty

Loading tasks…

No tasks yet

Create your first task to start tracking work.

Form Pattern

Task name

Project

Assignee

Due date

Estimate (hours)

Priority

Description

Dashboard Snapshot

Stats + table + sidebar widget, composed using all of the above.

This week

38h

↑ 6h vs last week

Open tasks

↓ 3 vs Mon

Reviews due

2 today

Today's tasks

View all →

Review Apollo design tokensApollo

Sync with Sara on iOS navDesign

Approve API auth diffEng

Send Q1 client reportOverdue

Team activity

Ahmed closed Brand audit

2m ago

Jad opened a PR for API v2

14m ago

Sara commented on iOS redesign

1h ago

Mona logged 3.5h on Apollo

2h ago