SeraOS Design System
A scalable atomic design system built for SeraOS — a core parent system with child systems, each serving a distinct product while sharing the same foundations.
Year
2025
Role
Senior Product Designer
Scope
Atomic Design, Design system, Token Architecture
context
SeraOS is a marketing-focused SaaS brand with multiple products under one roof. As the product suite grew, each product was being designed in isolation inconsistent components, duplicated work, and no shared visual language between teams.
Problem
The components existed. The system didn't.
Before the system existed, every product was designed independently. Components were recreated from scratch per project. Colours drifted. Typography had no scale. Developers received inconsistent specs and spent hours reconciling differences. There was no foundation. Only repeated effort
Investigation
Before building a new system, I needed to understand the problem beneath the inconsistencies. I mapped what existed, spoke to the people designing and building with it, and studied established systems to identify patterns that could scale across SeraOS.
Stakeholder & Developer Interviews
I spoke with stakeholders and developers to understand the real-world impact. Three consistent themes came up: Admins were managing agents manually with no structured permission controls. Developers were hard-coding access rules because no design system existed for it. Bringing a new agent onboard meant a full manual briefing on what to avoid touching.
Step 2
Add your second investigation step content here.
Product mapping
Mapped everything before building anything.
Every UI element across C3, Mailime, and Pulse was catalogued before a single component was designed. Duplicates identified, inconsistencies flagged, severity rated. The audit surfaced over 60 unique button states doing the same job in three different ways.
Buttons and colour tokens were the most fractured, critical inconsistency across all three products.
Typography and spacing were partially aligned, but with no enforced scale.
Forms were the most consistent area, a useful starting point for the new system.
Designing one system, clear permissions, and defined roles.
Text 3
C3 is a B2B omni-channel platform where support and sales teams manage customer conversations across WhatsApp, Messenger, Instagram, and Email from one unified inbox. Three user types. Two separate systems. No defined rules for who could do what.
Text 3
C3 is a B2B omni-channel platform where support and sales teams manage customer conversations across WhatsApp, Messenger, Instagram, and Email from one unified inbox. Three user types. Two separate systems. No defined rules for who could do what.
Any thingxt
C3 is a B2B omni-channel platform where support and sales teams manage customer conversations across WhatsApp, Messenger, Instagram, and Email from one unified inbox. Three user types. Two separate systems. No defined rules for who could do what.
Architecture decision
Core system first. Child systems second.
SeraOS Core holds all foundations — tokens, primitives, base components. Each child system inherits and extends only what it needs. Nothing duplicated. Everything connected.
IMPACT
1 system eliminated, Superadmin dashboard fully deprecated.
3 roles redesigned with clear ownership and named functions.
6 feature areas covered by the permissions matrix.
67% reduction in misdirected settings access during internal testing.
3× faster role setup compared to previous manual process.
~40% reduction in new agent onboarding time.
100% of feature actions now governed by role-based permissions.
Reflection
The hardest problems have no UI surface. The roles problem was invisible on screen, you couldn't see it by looking at the product. You had to map the system to find it. Always audit before you design.
Naming is design. Renaming Superadmin → Admin, Admin → Supervisor wasn't cosmetic. It changed how every stakeholder thought about the system and made the permission logic instantly easier to communicate.
A permissions matrix is only as good as its UI response. Designing the matrix was 40% of the work. Designing how every corner of the product responds to it, disabled buttons, hidden tabs, redirect states was the other 60%.
A scalable foundation, built for every product.
Text 3
C3 is a B2B omni-channel platform where support and sales teams manage customer conversations across WhatsApp, Messenger, Instagram, and Email from one unified inbox. Three user types. Two separate systems. No defined rules for who could do what.
Text 3
C3 is a B2B omni-channel platform where support and sales teams manage customer conversations across WhatsApp, Messenger, Instagram, and Email from one unified inbox. Three user types. Two separate systems. No defined rules for who could do what.
Any thingxt
C3 is a B2B omni-channel platform where support and sales teams manage customer conversations across WhatsApp, Messenger, Instagram, and Email from one unified inbox. Three user types. Two separate systems. No defined rules for who could do what.
Architecture decision
Core system first. Child systems second.
SeraOS Core holds all foundations — tokens, primitives, base components. Each child system inherits and extends only what it needs. Nothing duplicated. Everything connected.
SeraOS Design System
A scalable atomic design system built for SeraOS — a core parent system with child systems, each serving a distinct product while sharing the same foundations.
Year
2025
Role
Senior Product Designer
Scope
Atomic Design, Design system, Token Architecture
context
SeraOS is a marketing-focused SaaS brand with multiple products under one roof. As the product suite grew, each product was being designed in isolation inconsistent components, duplicated work, and no shared visual language between teams.
Problem
The components existed. The system didn't.
Before the system existed, every product was designed independently. Components were recreated from scratch per project. Colours drifted. Typography had no scale. Developers received inconsistent specs and spent hours reconciling differences. There was no foundation. Only repeated effort
Investigation
Before building a new system, I needed to understand the problem beneath the inconsistencies. I mapped what existed, spoke to the people designing and building with it, and studied established systems to identify patterns that could scale across SeraOS.
Stakeholder & Developer Interviews
I spoke with stakeholders and developers to understand the real-world impact. Three consistent themes came up: Admins were managing agents manually with no structured permission controls. Developers were hard-coding access rules because no design system existed for it. Bringing a new agent onboard meant a full manual briefing on what to avoid touching.
Step 2
Add your second investigation step content here.
Product mapping
Mapped everything before building anything.
Every UI element across C3, Mailime, and Pulse was catalogued before a single component was designed. Duplicates identified, inconsistencies flagged, severity rated. The audit surfaced over 60 unique button states doing the same job in three different ways.
Buttons and colour tokens were the most fractured, critical inconsistency across all three products.
Typography and spacing were partially aligned, but with no enforced scale.
Forms were the most consistent area, a useful starting point for the new system.
A scalable foundation, built for every product.
Text 3
C3 is a B2B omni-channel platform where support and sales teams manage customer conversations across WhatsApp, Messenger, Instagram, and Email from one unified inbox. Three user types. Two separate systems. No defined rules for who could do what.
Text 3
C3 is a B2B omni-channel platform where support and sales teams manage customer conversations across WhatsApp, Messenger, Instagram, and Email from one unified inbox. Three user types. Two separate systems. No defined rules for who could do what.
Any thingxt
C3 is a B2B omni-channel platform where support and sales teams manage customer conversations across WhatsApp, Messenger, Instagram, and Email from one unified inbox. Three user types. Two separate systems. No defined rules for who could do what.
Architecture decision
Core system first. Child systems second.
SeraOS Core holds all foundations — tokens, primitives, base components. Each child system inherits and extends only what it needs. Nothing duplicated. Everything connected.
IMPACT
3 child systems built: C3, Mailime, and Pulse — each inheriting from Core.
340+ components shipped across all five atomic levels.
~60% less time from design to handoff per feature.
~80% faster onboarding for designers joining any product squad.
Reflection
Building for three products revealed what one product hides. Single-product design lets you get away with inconsistency. The moment a second and third product inherit your decisions, every shortcut becomes a structural problem.
The token layer is where design and engineering finally speak the same language. Not in the components, not in the handoff notes — in the token names. Get those right and everything downstream becomes easier.
A parent system is only as useful as the trust child teams place in it. If C3, Mailime, or Pulse teams start overriding Core decisions, the system fractures silently. Adoption is a design problem, not a comms one.
Designing one system, clear permissions, and defined roles.
Text 3
C3 is a B2B omni-channel platform where support and sales teams manage customer conversations across WhatsApp, Messenger, Instagram, and Email from one unified inbox. Three user types. Two separate systems. No defined rules for who could do what.
Text 3
C3 is a B2B omni-channel platform where support and sales teams manage customer conversations across WhatsApp, Messenger, Instagram, and Email from one unified inbox. Three user types. Two separate systems. No defined rules for who could do what.
Any thingxt
C3 is a B2B omni-channel platform where support and sales teams manage customer conversations across WhatsApp, Messenger, Instagram, and Email from one unified inbox. Three user types. Two separate systems. No defined rules for who could do what.
Architecture decision
Core system first. Child systems second.
SeraOS Core holds all foundations — tokens, primitives, base components. Each child system inherits and extends only what it needs. Nothing duplicated. Everything connected.
Portfolio is optimised for desktop experience.
Coming very soon for mobile :)