A healthcare client came to us with a problem that plagues many growing organizations: their web app, mobile app, and internal admin tools all looked and behaved differently. Different teams had built each product independently, and the user experience had diverged to the point where customers were confused and the brand felt inconsistent.
Starting with Tokens
We started where every design system should start — with design tokens. Colors, typography scales, spacing units, border radii, and shadows were all defined as platform-agnostic tokens that could be consumed by web (CSS variables), React Native (JavaScript objects), and Figma (via token plugins).
Component Architecture
The component library was organized in three tiers:
- Primitives — basic building blocks like Button, Input, Text, and Icon
- Composites — combinations of primitives like SearchBar, DataTable, and FormField
- Patterns — full layout patterns like PageHeader, EmptyState, and SettingsPanel
Each component was built with accessibility baked in from day one. ARIA attributes, keyboard navigation, focus management, and screen reader announcements were not afterthoughts — they were part of the component API.
Adoption Strategy
The hardest part of a design system is not building it — it is getting teams to use it. We ran weekly office hours, created migration guides for each product, and built codemods that could automatically convert legacy components to design system equivalents. Within three months, adoption hit 85% across all three products.