Design system
A clear, dependable language for getting everyday work handled. Built for Dimozi’s marketing site, customer and provider portals, operations console, and email.
Color
Royal blue carries action and confidence. Cyan adds motion and wayfinding. Warm surfaces keep the marketplace human.
Typography
Quilon sets the voice. Cabinet Grotesk carries the information people need to act.
the way.
Book a cleaner for your home
Tell us what needs doing, where it is, and when you need it. We’ll confirm the details and keep you updated.
Spacing & shape
An 8 point rhythm gives every request enough room to be understood. Corners are friendly, never playful.
Themes
Two surfaces, one system. Choose the theme by the kind of work the person needs to complete.
handle today?
moving.
Logo and wordmark
The Dimozi wordmark is a simple route: a starting point, a turn, and a clear arrival.
Icons and imagery
Use one icon family across product surfaces. Imagery should explain the work, keep the subject clear, and leave room for the next action.
lucide / 20pxMap these names to CSS variables, Tailwind config, shadcn theme values, and email-safe fallbacks.
:root {
--primary: 221 83% 53%;
--accent: 189 94% 43%;
--radius: 0.875rem;
}Core components
Built as shadcn-style primitives with Dimozi tokens. The same states work in the browser, in a portal, and in a responsive email.
button.tsxinput.tsxbadge.tsxcard.tsxStates and feedback
Every state explains what happened and what the person can do next. We do not hide important information behind color.
Your payment has been reconciled. We’re assigning an approved provider now.
We need a clearer landmark before we can assign this delivery.
Request lifecycle
One shared status vocabulary keeps customers, providers, and operations looking at the same request.
Your cleaner is on the way
Hi Ada, Chiamaka has been assigned to your move-out cleaning request for tomorrow.
Keep the request, status, schedule, and next action together so the email is easy to scan.
email/request-assigned.tsxResponsive behavior
Mobile is where a request gets made. Desktop is where a request gets managed. The system keeps the decision order stable across both.
handle today?
Accessibility
Target WCAG 2.2 AA for key flows. Focus is visible, labels stay with controls, and status never depends on color alone.
Every request flow can be completed without a pointer.
Body text starts at 16px with comfortable line height.
Transitions reduce when the user asks for less motion.
Badges pair color with an icon, label, or clear sentence.
Content guidelines
Write like a capable person who is already taking care of the next step.
“Add a landmark so we can assign your delivery.”
“Awaiting payment” is better than “Pending.”
“Approved provider” is better than “Trusted experts.”