Rizzle Design System
Rizzle Design System
Rizzle Design System
COMPANY
COMPANY
COMPANY
RIZZLE
RIZZLE
RIZZLE
Timeline
Timeline
Timeline
6 Weeks
6 Weeks
6 Weeks
ROLE
ROLE
ROLE
PRODUCT DESIGNER
PRODUCT DESIGNER
PRODUCT DESIGNER
STATUS
STATUS
STATUS
LAUNCHED - 2023
LAUNCHED - 2023
LAUNCHED - 2023
BASED ON
Atomic design principles
Atomic design principles
Atomic design principles
Ions
The smallest functional units at the sub-atomic level. These form the roots of the system
The smallest functional units at the sub-atomic level. These form the roots of the system
Atoms
Smallest units that can't be broken down into parts without losing their meaning.
Smallest units that can't be broken down into parts without losing their meaning.
Molecules
Combinations of atoms that come together to create more complex UI elements.
Combinations of atoms that come together to create more complex UI elements.
Organisms
Complex UI components made up of molecule groups, atoms, and possibly other organisms.
Complex UI components made up of molecule groups, atoms, and possibly other organisms.
Templates
Grayscale placeholders that provide foundational structures for page layouts and content.
Grayscale placeholders that provide foundational structures for page layouts and content.
Pages
Templates filled with actual content, showing the final output for user interaction.
Templates filled with actual content, showing the final output for user interaction.
TOKENS
Colors
Colors
Colors
A color system in a design system is a structured approach to selecting and using colors that ensures consistency, accessibility, and effective communication across all visual elements.
A color system in a design system is a structured approach to selecting and using colors that ensures consistency, accessibility, and effective communication across all visual elements.
TOKENS
Typography
Typography
Typography
The typography system is one of the most foundational parts of any interface design. If based on a good font family, it can elevate user understanding and legibility many-fold.
The typography system is one of the most foundational parts of any interface design. If based on a good font family, it can elevate user understanding and legibility many-fold.
TOKENS
Grids, spacing and radius
Grids, spacing and radius
Grids, spacing and radius
Layout grids, spacing, and radius variables define structure, hierarchy, and rhythm in your design. Working from a defined system allows you to work faster and more consistently.
Layout grids, spacing, and radius variables define structure, hierarchy, and rhythm in your design. Working from a defined system allows you to work faster and more consistently.
TOKENS
Iconography
Iconography
Iconography
Icons are a crucial part of every interface. When used correctly, icons can speed up user interactions by being immediately recognizable and add style and visual interest to designs.
Icons are a crucial part of every interface. When used correctly, icons can speed up user interactions by being immediately recognizable and add style and visual interest to designs.
MOLECULES
Buttons
Buttons
Buttons
Icons are a crucial part of every interface. When used correctly, icons can speed up user interactions by being immediately recognizable and add style and visual interest to designs.
Icons are a crucial part of every interface. When used correctly, icons can speed up user interactions by being immediately recognizable and add style and visual interest to designs.
MOLECULES
Radio, checkbox and toggle fields
Radio, checkbox and toggle fields
Radio, checkbox and toggle fields
Radio buttons allow users to select just one option from a set, while checkboxes allow users to select one or more items from a set. Toggles have two states, such as ON and OFF.
Radio buttons allow users to select just one option from a set, while checkboxes allow users to select one or more items from a set. Toggles have two states, such as ON and OFF.
MOLECULES
Input fields and dropdowns
Input fields and dropdowns
Input fields and dropdowns
Input fields allow users to enter text into an interface. They typically appear in forms and dialogs. While dropdowns extend the function of user choice further.
Input fields allow users to enter text into an interface. They typically appear in forms and dialogs. While dropdowns extend the function of user choice further.
ORGANISMS
Sidebar navigation
Sidebar navigation
Sidebar navigation
Sidebar navigation has the power to be the main source of exploration of the entire product if designed effectively. Here we have properly segmented it to make that happen.
Sidebar navigation has the power to be the main source of exploration of the entire product if designed effectively. Here we have properly segmented it to make that happen.
And
Many more components
Many more components
Many more components
Based on all the great foundation-level and nested complex components, we have created cohesive and self sustaining templates and pages using which speed up design processes.
Based on all the great foundation-level and nested complex components, we have created cohesive and self sustaining templates and pages using which speed up design processes.
MODALS
MODALS
SNACKBARS
SNACKBARS
WIZARDS
WIZARDS
TABLES
TABLES
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
FEEL LIKE REACHING OUT?
Let’s make your
Vision shine
Be it starting from scratch with just a plan or a well oiled roadmap of success.
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
FEEL LIKE REACHING OUT?
Let’s make your
Vision shine
Be it starting from scratch with just a plan or a well oiled roadmap of success.
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
+++
Let's Talk
FEEL LIKE REACHING OUT?
Let’s make your
Vision shine
Be it starting from scratch with just a plan or a well oiled roadmap of success.