VA Design System
VA Design System
VA Design System
COMPANY
COMPANY
COMPANY
LEENA AI
LEENA AI
LEENA AI
Timeline
Timeline
Timeline
6 Weeks
6 Weeks
6 Weeks
ROLE
ROLE
ROLE
PRODUCT DESIGNER
PRODUCT DESIGNER
PRODUCT DESIGNER
STATUS
STATUS
STATUS
LAUNCHED - 2022
LAUNCHED - 2022
LAUNCHED - 2022
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
Steppers, sliders and booleans
Steppers, sliders and booleans
Steppers, sliders and booleans
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
Text bubbles and composer inputs
Text bubbles and composer inputs
Text bubbles and composer inputs
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.
MOLECULES
Chips, status tags and labels
Chips, status tags and labels
Chips, status tags and labels
Chips give users a view of selections and act as action triggers as well. While status tags and labels are important and useful in getting information at a glance.
Chips give users a view of selections and act as action triggers as well. While status tags and labels are important and useful in getting information at a glance.
ORGANISMS > PAGE
Webview
Webview
Webview
The Leena AI webview is flexible and can accommodate a host of design system organisms like sidebars, tables, headers, button groups and many more elements.
The Leena AI webview is flexible and can accommodate a host of design system organisms like sidebars, tables, headers, button groups and many more elements.
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.
SHEETS AND MODALS
FIELD ARRAYS
UPLOAD SYSTEMS
DYNAMIC 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.