BuddiUI - Design system

Why I created the design system

Buddi UI is the mobile design system created for Buddiqo, translating its Nuxt UI-based web interface into a mobile-native system.
Rather than adapting the interface visually, the project restructures components to meet mobile usability standards redefining touch target sizing, spacing scales, and layout logic.
The result is a scalable, token-driven foundation that ensures consistency across platforms while improving clarity and accessibility for mobile users.
This project reflects a systematic approach to building lean, structured, and production-ready design systems in Figma.

Designing for context

Nuxt UI provides a solid and coherent foundation for web interfaces. Spacing, component logic, and state management were already structured and reliable.

However, translating the system directly to mobile exposed a contextual gap. Many components were designed with desktop interactions in mind including hover states, compact input heights, and typography scales optimized for larger screens.

Rather than modifying components superficially, I redefined their proportions and interaction patterns to align with mobile usability standards. Touch targets were expanded, typography was recalibrated for smaller viewports, and interaction states were adapted to mobile-native behaviors.

The goal wasn’t to replace the original logic, but to reinterpret it within a mobile-first framework — preserving structural consistency while ensuring functional clarity.

Desktop logic in a mobile context

While the web system was consistent, several components were optimized for desktop interaction patterns. Compact input heights, hover-based feedback, and typography scales designed for larger screens did not translate effectively to touch devices.

For mobile, I redefined component proportions and recalibrated typographic scales to improve readability and ergonomic comfort, ensuring that interfaces felt intentional rather than simply reduced.

Interaction model adaptation

Desktop interfaces rely heavily on pointer-based states such as hover. In a mobile environment, interaction must be explicit and tactile.

Components were adjusted to prioritize tap states, active feedback, and accessible touch targets. Input fields, buttons, and interactive elements were resized to meet mobile usability standards, improving clarity and reducing friction.

The goal was to preserve logical consistency while redefining behavioral patterns.

System foundation & token structure

To maintain scalability, the mobile system was structured around semantic design tokens.
Rather than relying on hard-coded values, variables such as --ui-text-highlighted and other semantic references ensure consistency across components and future extensibility.

Although dark mode is not yet implemented, the token architecture has been designed to support theme expansion without structural changes.

A structured and scalable colour system

The colour system maintains consistency with the existing Nuxt UI foundation while introducing a clearer token structure tailored for mobile.

Primitive tokens define the raw palette, while semantic tokens describe how colours behave within the interface. This separation ensures flexibility without increasing complexity, allowing components to scale without relying on hard-coded values.

Surface levels were carefully defined to create depth and hierarchy across mobile layouts, preserving clarity even in compact environments.

Accessibility was considered throughout the process. Core colour combinations were verified against WCAG 2.1 AA standards to ensure sufficient contrast, particularly for text and interactive elements. While certain border values remain aligned with the original Nuxt system, the overall structure prioritizes readability and usability.

Subtle adjustments were introduced where necessary — such as integrating input labels within component boundaries — to improve clarity and spatial efficiency on smaller screens.

Structured, intuitive components

Buddi UI components were built to be flexible without becoming complex. Each component includes structured variants and clearly defined properties, allowing quick configuration while maintaining consistency.

Size variations, boolean properties, slot-based text, and instance swaps for icons make components adaptable without breaking the system logic. The goal was to reduce friction during interface construction while preserving structural integrity.

Built and tested through real interfaces

The system was validated by assembling complete mobile screens and flows.
Designing full layouts helped identify edge cases, spacing inconsistencies, and state conflicts early in the process — refining components beyond isolated examples.

Rather than treating components as static assets, they were developed as part of a living, testable ecosystem.

Conclusion

Buddi UI represents a structured translation of an existing web system into a mobile-first framework.
By redefining proportions, interaction logic, and token architecture, the system maintains consistency while improving clarity, scalability, and usability across contexts.