Jellybean — Design System
Building the component library and token system that powered Jellybean's product design.
As Jellybean's product matured, the need for a formal design system became clear. Ad-hoc components were diverging across features, and engineering was making visual decisions that should have been handled at the design layer. I led the consolidation effort — auditing what existed and building a coherent, documented system from it.
Inconsistent components across the product were slowing down design and engineering velocity. Tokens were undefined, which meant color, spacing, and type decisions were being made per-component rather than from a shared source of truth. Onboarding new designers or engineers required manual orientation rather than system-guided defaults.
Started with a full component audit — cataloguing every UI element in use, identifying duplicates and variants, and flagging gaps. Defined a token layer first: semantic color tokens, a type scale, spacing and radius scales, and elevation levels. Then rebuilt core components on top of that foundation, ensuring they were variant-complete and covered edge cases like empty states and error conditions. Wrote lightweight documentation for each component covering usage guidelines, do/don't examples, and engineering notes.
Shipped a Figma component library with full token bindings, covering buttons, inputs, cards, navigation, modals, toasts, and data display components. Each component was structured for easy extension and used auto-layout throughout to handle responsive behavior. The token system was mirrored in code as CSS custom properties, making design-to-dev handoff near-automatic for token-level changes.
Design velocity increased noticeably — new feature mocks took a fraction of the prior time since components could be assembled rather than built. Engineering reduced UI-related back-and-forth by a significant margin. The system was adopted across the full product team within two sprints and served as the foundation for all subsequent feature work.