runon
runon
A conceptual community driven running platform that helps users track performance, join clubs, and stay motivated through challenges, while enabling coaches and community leaders to grow and monetize their communities.
A conceptual community driven running platform that helps users track performance, join clubs, and stay motivated through challenges, while enabling coaches and community leaders to grow and monetize their communities.
Visual design & branding
Visual design & branding
Typography
Typography
The typographic system provides the title and text types and specifies their usage.
The typographic system provides the title and text types and specifies their usage.
Grids
Grids
A community driven running platform that helps users track performance, join clubs, and stay motivated through challenges, while enabling coaches and community leaders to grow and monetize their communities.
A community driven running platform that helps users track performance, join clubs, and stay motivated through challenges, while enabling coaches and community leaders to grow and monetize their communities.
Spacing
Spacing
Spacing rules based on multiples of four are used. As an exception to rules based on the multiples of four, "2" is also provided as the minimum spacing size. The spacing rules must be applied to the spaces between components, and it is recommended to follow the spacing rules within components if possible.
Spacing rules based on multiples of four are used. As an exception to rules based on the multiples of four, "2" is also provided as the minimum spacing size. The spacing rules must be applied to the spaces between components, and it is recommended to follow the spacing rules within components if possible.
Colors
Colors
Color system is built using solid contrast colors as a core brand colors along with gray pallette.
Color system is built using solid contrast colors as a core brand colors along with gray pallette.
Icons
Icons
The icon pack is based on Material Design Icons. They are scalable, easy to customise, and designed for clarity.
The icon pack is based on Material Design Icons. They are scalable, easy to customise, and designed for clarity.
Buttons
Buttons
Button triggers a certain action. It initiates an action, transition to a certain state or page.
Button triggers a certain action. It initiates an action, transition to a certain state or page.
Cards & Tiles
Cards & Tiles
Cards and tiles organise information in scannable modules. They highlight key metrics at a glance, group related content, and improve redability. This approach makes the interface clean, consistent and easy to navigate.
Cards and tiles organise information in scannable modules. They highlight key metrics at a glance, group related content, and improve redability. This approach makes the interface clean, consistent and easy to navigate.
High Fidelity Designs
High Fidelity Designs
Building upon the established design system for the RunOn app, the following screens showcase the high-fidelity designs and demonstrate how the visual language is applied across key user experiences.
Building upon the established design system for the RunOn app, the following screens showcase the high-fidelity designs and demonstrate how the visual language is applied across key user experiences.
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