Ubani Design System
Includes consistent, accessible, and scalable product foundation across neighborhood social experiences.
It includes:
- a semantic token architecture (color, type, spacing, radius, elevation, motion),
- a component library with state coverage and usage rules,
- accessibility-first styling (AA/AAA-aware contrast mappings),
- and developer-ready documentation for implementation consistency across web and mobile.
The goal was to make design decisions reusable, measurable, and production-ready rather than screen-by-screen.
Flow Showcase
Built an interactive Ubani Flow Showcase to demonstrate how the system performs in real product journeys, not just static components.
It covers:
- end-to-end onboarding,
- feed, errands, marketplace, messaging, and moderation flows,
- UX hardening scenarios (emergency escalation, privacy controls, account recovery, report status, offline retry),
- plus platform preview modes (iOS and Android).
The goal was to prove UX coherence across critical journeys, validate trust/safety patterns, and communicate product behavior clearly to design, product, and engineering stakeholders.
Reviews
1 review
This is such a great way to document the Ubani design system. I especially love the quick contrast ratio guide within the colour system. It makes it super easy to see what passes and fails WCAG guidelines, and in which contexts.
I’m curious what tool you used to create this. Have you had any feedback from the team on how they’re finding it to use?
Such a fab approach. Thanks for sharing! 😊
You might also like
CJM for Co-Working Space - WeWork
Accessible Signup Form for SaaS Platform
Loginino
Notification microcopy - Project
El Mandoub-GovTech App
MalishaEdu Counselor Workspace
Popular Courses
UX Design Foundations
Design Terminology
Introduction to Design Systems
