Atomic Design System Build

onefinestay came with a live site but no design system, making every feature a one-off build. As the sole designer, I partnered closely with the PM and developers (meeting twice weekly) to architect an atomic system: starting with color tokens, typography, and spacing variables, then building core components like buttons, forms, and toggles. We codified a four-month sprint plan to prioritize booking flows first, then expanded to merchandising modules, popups, search filters, and booking mechanisms. Every component was designed for reuse and documented to support engineering.

The result: a unified, scalable design system that cut duplication (e.g., 12 button styles reduced to 3), streamlined development, and established consistency across all device flows (desktop and mobile).

The Problems to Solve

onefinestay had a live site but no design system. Without a unified library, the product showed high variance in styles and patterns — buttons, forms, and flows often looked and behaved differently depending on where you encountered them. This created an inconsistent user experience across booking, search, and merchandising flows, and made it harder to scale new features with confidence.

My Solution

I architected the system atomically, starting with tokens, typography, and spacing, then expanding into core components (buttons, forms, toggles) and finally patterns for popups, merchandising, search filters, and booking mechanisms.

Working closely with the PM and developers, we codified a four-month sprint plan that prioritized critical booking flows first, then secondary modules. Every component was designed for reuse and fully documented, creating a consistent, scalable system that accelerated builds and aligned guest-facing and back-of-house experiences.

About
Client:
onefinestay
Contribution:
Sole Designer, Design System Architect
Year:
2025