design system - houzx
design system - houzx
Designed and implemented Houzx's end-to-end design system, establishing a scalable foundation for the property buying and renting platform. Created a comprehensive library of components, design tokens, and usage guidelines to ensure consistency, improve collaboration, and accelerate product development.
Designed and implemented Houzx's end-to-end design system, establishing a scalable foundation for the property buying and renting platform. Created a comprehensive library of components, design tokens, and usage guidelines to ensure consistency, improve collaboration, and accelerate product development.
Atomic design
Atomic design
Atomic design is a mental model for understanding how we break down interface design systems in a modular method. It helps you better see how things are connected, from most abstract part of the design to the most concrete.
Atomic design is a mental model for understanding how we break down interface design systems in a modular method. It helps you better see how things are connected, from most abstract part of the design to the most concrete.
Typography
Typography
In the typographic system, individual unique names have been specified as design tokens. The typographic system provides the title and text types and specifies their usage.
In the typographic system, individual unique names have been specified as design tokens. The typographic system provides the title and text types and specifies their usage.
Spacing
Spacing
Designed a consistent spacing system for more harmonious experience for the end user. Each value exists as a reusable token, simplifying alignment across the interface.
Designed a consistent spacing system for more harmonious experience for the end user. Each value exists as a reusable token, simplifying alignment across the interface.
Corner radius
Corner radius
To ensure visual consistency and scalibility across UI, I used a modular corner radius system based on a 4-pixel step. This system helps maintain a cohesive look while allowing flexibility across components.
To ensure visual consistency and scalibility across UI, I used a modular corner radius system based on a 4-pixel step. This system helps maintain a cohesive look while allowing flexibility across components.
Color system
Color system
Colour system is built using variables and includes color tokens.
Colour system is built using variables and includes color tokens.
Grid
Grid
A 4-column grid keeps layout structured and readable on mobile screens, ensuring clear hierarchy, consistent spacing, and effortless scanning of content.
A 4-column grid keeps layout structured and readable on mobile screens, ensuring clear hierarchy, consistent spacing, and effortless scanning of content.
Shadow
Shadow
The shadow system helps create visual hierarchy and depth in the interface. It includes a set of consistent elevation levels used across components like cards, modals.
The shadow system helps create visual hierarchy and depth in the interface. It includes a set of consistent elevation levels used across components like cards, modals.
Icons
Icons
The icon pack is based on Material Design Icons - a comprehensive, open-source set developed by Google. They are scalable, easy to customise, and designed for clarity at all size.
The icon pack is based on Material Design Icons - a comprehensive, open-source set developed by Google. They are scalable, easy to customise, and designed for clarity at all size.
Buttons
Buttons
Buttons are built on sematic tokens and adaptive properties. Size, colors, and icons can be adjusted through variables, keeping the component flexible while preserving structure and clarity.
Buttons are built on sematic tokens and adaptive properties. Size, colors, and icons can be adjusted through variables, keeping the component flexible while preserving structure and clarity.
Text Field
Text Field
The core structure includes label, field, and help text. Optional add-ons, prefix/suffix, icons, actions, fit the same grid and spacing for clarity.
The core structure includes label, field, and help text. Optional add-ons, prefix/suffix, icons, actions, fit the same grid and spacing for clarity.
Components
Components
A library of essential UI components built on shared tokens and properties. Every component from simple buttons to complex navigation organism, adheres strictly to documented logic and visual specifications.
A library of essential UI components built on shared tokens and properties. Every component from simple buttons to complex navigation organism, adheres strictly to documented logic and visual specifications.
Want to see ideas come alive?
Get in touch and let's build something people can't ignore.
© Yuvraj Holkar Product Design Portfolio 2026
Want to see ideas come alive?
Get in touch and let's build something people can't ignore.
© Yuvraj Holkar Product Design Portfolio 2026
Want to see ideas come alive?
Get in touch and let's build something people can't ignore.
© Yuvraj Holkar Product Design Portfolio 2026