A token-structured, component-first design system built for Milk Moovement's B2B SaaS logistics and finance platform.
Designed and built by Joel Esguerra · Solo designer · 8-week build · May 2026
Liquid is the design system powering Milk Moovement's product suite — a set of shared tokens, components, and patterns that three React engineering teams use to build consistent, accessible, data-dense interfaces for dairy cooperative operations.
It replaces an inconsistent MUI3-based component library with a purpose-built, token-structured system scoped to the real constraints of the product: dense data tables, complex form inputs with unit suffixes, multi-select drop-downs, and a dark-surface navigation shell.
| ITEM | DESCRIPTION |
|---|---|
| Tokens | 155 variables across 4 collections |
| Components | 11 families, fully documented |
| Figma library | Published to MM organization |
| Token format | Tokens Studio JSON, Style Dictionary ready |
| Engineering spec | design.md — 681 lines |
| Build time | 8 weeks · ~2 hours/day · solo |
| Consumers | 3 React engineering teams |
Figma source:
Interactive prototype: