Code-first AI-assisted Design System for a scalable SaaS product

I designed a scalable design system to accelerate the development of a multi-channel SaaS product

OrderFlow is a B2B SaaS platform designed for teams managing orders, inventory, customers, and analytics from a single centralized dashboard.

The product is aimed at multi-channel sellers operating on platforms such as Amazon, Shopify, and Mercado Libre, where daily operations involve working with large volumes of data, multiple interaction states, and complex administrative workflows.

The project started as a greenfield: no previous design system, no component library, and no shared convention between design and development.

As the product began to grow, a clear need emerged: to build a consistent and scalable visual foundation that would allow me to design, iterate, and implement new features in a faster and more maintainable way.

That’s when I decided to build the Design System.

The challenge

The main challenge was finding a way to accelerate design and implementation times without losing visual consistency, clarity, or scalability.

I also needed a more efficient way to test interactions, validate behaviors, and keep design decisions synchronized as the product evolved.

So I decided to create a complete system that could function as the product’s real infrastructure. The intention was to establish a shared source of truth between design and development.

The approach

I built the Design System directly in code using self-contained HTML, CSS custom properties, and vanilla JavaScript, combined with AI-assisted workflows to accelerate visual exploration, component iterations, and technical documentation.

The entire architecture was structured around a three-layer token system:

Every visual decision, color, spacing, radius, typography, motion, or interaction states, was defined through reusable and exportable tokens.

One of the system’s main rules was avoiding hardcoded values inside components. Everything had to rely on tokens to guarantee scalability and long-term maintainability.

This allowed me to build a consistent foundation where global changes could automatically propagate across the entire interface.

Visual system and components

I designed the visual system with a minimal and functional aesthetic, prioritizing visual clarity, readability, and information density.

The entire system was designed to allow me to test interactions and validate visual decisions directly on real implemented components.

Living documentation

One of the main goals was improving collaboration between design and development through clear, reusable documentation synchronized with the implemented system.

That’s why I developed two synchronized deliverables:

The documentation includes: Live component demonstrations, token tables, reusable snippets, CSS variables export, JSON tokens compatible with Style Dictionary, technical documentation rendered in markdown.

This allowed me to build a foundation that is easy to navigate and understand for any team member.

Impact

The system allowed me to:

• Accelerate the creation of new views and modules
• Improve visual and functional consistency across screens
• Optimize collaboration between design and development
• Reduce implementation times through a token-based architecture
• Facilitate testing and interaction validation directly on real components
• Simplify long-term visual maintenance
• Create a scalable foundation prepared for future integrations and features

The result was a complete, documented, and end-to-end implemented design system capable of functioning as the visual and operational foundation for OrderFlow’s growth.