How we built Moko
Moko replaces the full workspace a customer support team lives in, from the inbox to the portal where the customer searches on their own. The brief was clear: every screen finished to the same level of care, no polished hero followed by half-built drawers. That's the shape of work that breaks most support tools after the first launch. The inbox grabs all the attention, the reports stay rough for months, and the customer portal is something someone adds the evening before launch.
The design system was the project
Every screen at the same level of finish means the design system carried the project, not the other way around. We started with the parts every view would share, from the buttons to the tables to the charts, and built the product areas on top of that base. No screen got special treatment, no area asked for a one-off variant.
The inbox is the most important page
The inbox is where a support agent lives during the day. The reply window changes colour when switching between the public reply and the internal team note, so the mode is unambiguous before pressing send. Status changes are instant and reversible, and the interface never blocks waiting on the network. Tags and priority are edited directly from the message row, without opening another window. Above long conversations a summary appears automatically, telling the agent how the customer feels, what plan they're on, and what could help as a next step.
The whole page can be used by keyboard alone. The shortcuts cover the steps an agent repeats a hundred times a day. Whoever learns them never reaches for the mouse again.
A customer profile that doesn't make things up
Every customer carries their own story. The profile summarises the key stats in a strip, shows all the customer's open and closed tickets, and lets the team add custom fields directly from the row, without opening a separate window. The same view appears inside the inbox. Whoever opens a conversation immediately sees what plan the customer is on, where they're writing from, and what their last tickets were about. Everything stays in the same screen.
A knowledge base for the team and the customer
The knowledge base is written by the support team and read by customers. On the internal side it's an editorial tool, with the categories, the drafts, the published articles. On the public side, at /help, it's a real reading surface, with the search in the foreground, the categories grouped, and a table of contents inside each article. Both sides read from the same data. The agent who updates an article to close a ticket knows the same article is what the customer will find searching on their own.
Both themes designed together from the start
The light theme and the dark theme weren't added one after the other. They were designed together from the start of the project, and we worked with both active during development. The product pulls its colours and font sizes from the design system, and no value is hand-written inside an individual screen. When the theme changes, the charts and the status labels change alongside the buttons, and no part stays behind. Changing the colour of a chart category across the whole product is a one-place edit.
Why this matters for someone shipping a subscription product
A complete SaaS product is a system where the support team, the finance side, the leadership, and the customer each find their own place to work. Moko holds all of that inside one design system, and the product still looks like the same product when the team doubles or the brand changes direction.