Works
>
Design System
Design System
Design System
Design System
Project Type
Project Type
Project Type
Web Application
Web Application
Web Application
Role
Role
Role
Product Designer
Product Designer
Product Designer
Timeline
Timeline
Timeline
2 weeks
2 weeks
2 weeks
Tools
Tools
Tools
Atomic Design
System for Lucid Data Hub
Atomic Design System for Lucid Data Hub
Atomic Design System for Lucid Data Hub
The Atomic Design System is a methodology for creating design systems that break down user interfaces into fundamental building blocks. This design system was built for lucid data hub web applications.
The Atomic Design System is a methodology for creating design systems that break down user interfaces into fundamental building blocks. This design system was built for lucid data hub web applications.
Foundations
Foundations
Foundations
The foundations of design system includes typography, color palette, iconography, spacing and layout to ensure consistency, efficiency, scalability.
The foundations of design system includes typography, color palette, iconography, spacing and layout to ensure consistency, efficiency, scalability.
The foundations of design system includes typography, color palette, iconography, spacing and layout to ensure consistency, efficiency, scalability.
Foundations > Colors
Foundations > Colors
Color Palette
Color Palette
Color Palette
A well-defined color palette in a UI design system enhances brand identity, ensures visual consistency, improves accessibility, and guides user interactions through a cohesive and harmonious color scheme.
A well-defined color palette in a UI design system enhances brand identity, ensures visual consistency, improves accessibility, and guides user interactions through a cohesive and harmonious color scheme.
Primary colors
Primary colors
Primary colors
The primary color in a UI design system is the main color used to represent the brand.
The primary color in a UI design system is the main color used to represent the brand.
#1FADFF
#5048E9
#1D3783
Secondary colors
Secondary colors
Secondary colors
The secondary color complements the primary color, adding variety and highlighting elements.
The secondary color complements the primary color, adding variety and highlighting elements.
#EDF0F6
#473D70
#1C143C
Status colors
Status colors
Status colors
Status colors are used in UI design to visually communicate specific conditions or states such as errors , success , warnings, and informational messages.
Status colors are used in UI design to visually communicate specific conditions or states such as errors , success , warnings, and informational messages.
#FBF3F3
#CF7676
#AF3E3E
#F4FBF3
#76CF7A
#4AB24E
#F8F1FF
#A276CF
#6A4C89
#FDF0DE
#FFA726
#F57C00
Text colors
Text colors
Text colors
Text colors in UI design ensure readability and convey hierarchy, typically including primary text color, secondary text color, and disabled text color.
Text colors in UI design ensure readability and convey hierarchy, typically including primary text color, secondary text color, and disabled text color.
#14161F
#7E7F97
#3C4657
Foundations > Typography
Foundations > Typography
Typography
Typography
Typography
Typography in UI design encompasses the selection and arrangement of fonts, sizes, weights, and styles to ensure readability, establish visual hierarchy.
Typography in UI design encompasses the selection and arrangement of fonts, sizes, weights, and styles to ensure readability, establish visual hierarchy.
Regular
Regular
Medium
Medium
Semibold
Semibold
Bold
Bold
Aa
Aa
Open Sans
Text Hirerachy
Text Hirerachy
CATEGORY
TYPEFACE
WEIGHT
SIZE
Heading 6
Heading 5
Heading 4
Heading 3
Heading 2
Heading1
Subtitle1
Subtitle2
Body1
Body2
Button
Caption
OVERLINE
Open Sans
Open Sans
Open Sans
Open Sans
Open Sans
Open Sans
Open Sans
Open Sans
Open Sans
Open Sans
Open Sans
Open Sans
Open Sans
Bold
Bold
SemiBold
Bold
SemiBold
Medium
SemiBold
Medium
Medium
Regular
Medium
Medium
Regular
12px
10px
10px
12px
12px
14px
12px
14px
14px
16px
18px
20px
24px
Text Hirerachy
Foundations > Spacing
Spacing
Spacing
Spacing
The 8px spacing rule in UI design uses multiples of 8 pixels to create consistent and balanced layouts.
The 8px spacing rule in UI design uses multiples of 8 pixels to create consistent and balanced layouts.
Foundations > Border Radius
Foundations > Border Radius
Border Radius
Border Radius
Border Radius
The border radius property standardizes corner rounding for UI elements to ensure consistency, accessibility, and visual appeal across different platforms.
Tokens
Tokens
Tokens
Tokens in Figma are standardized design values such as colors, typography, spacing, and other properties that ensure consistency across your design system. They can reused to maintain uniformity throughout your design projects.
Tokens in Figma are standardized design values such as colors, typography, spacing, and other properties that ensure consistency across your design system. They can reused to maintain uniformity throughout your design projects.
Components
Components
Components
In the concept of an atomic design system, the terms "atoms," "molecules," and "organisms" refer to different levels of components within the system.
In the concept of an atomic design system, the terms "atoms," "molecules," and "organisms" refer to different levels of components within the system.
Atoms
Atoms
Buttons
Buttons
Buttons
buttons are standardized interactive elements with defined styles for various states ensuring consistency in appearance and behavior across the interface.
buttons are standardized interactive elements with defined styles for various states ensuring consistency in appearance and behavior across the interface.
Button Variants
Button Variants
Button Variants
Button variants provide flexibility, ensure consistency, and cover diverse use cases, enhancing the user experience across different contexts and interactions in the UI.
Button variants provide flexibility, ensure consistency, and cover diverse use cases, enhancing the user experience across different contexts and interactions in the UI.
9 styles | 6 Types | 2 sizes | 54 variants
9 styles | 6 Types | 2 sizes | 54 variants
Atoms
Text Field and Text Area
Text Field and Text Area
Text Field and Text Area
Text fields and text areas are input elements in a design system; text fields are single-line inputs for brief entries, while text areas are multi-line inputs for longer text.
Text fields and text areas are input elements in a design system; text fields are single-line inputs for brief entries, while text areas are multi-line inputs for longer text.
Atoms
Selections
Selections
Selections in a design system include interactive elements like checkboxes, radio buttons, and toggles, allowing users to choose options or set preferences.
Selections in a design system include interactive elements like checkboxes, radio buttons, and toggles, allowing users to choose options or set preferences.
Molecules
Molecules
Alert
Alert
Alert
Alerts in a design system are notification elements that convey important messages, typically styled with distinct colors and icons to indicate statuses such as success, error, warning, or information.
Alerts in a design system are notification elements that convey important messages, typically styled with distinct colors and icons to indicate statuses such as success, error, warning, or information.
Alert Variants
Alert Variants
Alert Variants
Alert variants in a design system include Success, Error, Warning, Info each with options for a close icon and undo button, in both filled and outlined styles.
Alert variants in a design system include Success, Error, Warning, Info each with options for a close icon and undo button, in both filled and outlined styles.
9 styles | 6 Types | 2 sizes | 54 variants
9 styles | 6 Types | 2 sizes | 54 variants
Molecules
Molecules
Dropdown
Dropdown
Dropdown
A dropdown is an interactive element that allows users to select an option from a list that appears when when clicked, consisting of default, checkbox, radio, and group options.
Molecules
Chip
Chip
Chip
A chip is a small, interactive element that displays information such as a label or an option, often used for input, filtering, or selection, and can include actions like deletion or selection.
Molecules
Molecules
Navigation
Navigation
Navigation
Navigation in a design system refers to the elements and patterns that help users move through and interact with different parts of an application, including tabs, pagination, stepper and breadcrumbs, ensuring a clear and intuitive user experience.
Navigation in a design system refers to the elements and patterns that help users move through and interact with different parts of an application, including tabs, pagination, stepper and breadcrumbs, ensuring a clear and intuitive user experience.
Molecules
Date and Time Picker
Date and Time Picker
Date and Time Picker
A date and time picker in a design system is an interactive component that allows users to select a specific date and time from a calendar and clock interface, providing a consistent and user-friendly way to input temporal data across applications.
A date and time picker in a design system is an interactive component that allows users to select a specific date and time from a calendar and clock interface, providing a consistent and user-friendly way to input temporal data across applications.
Organisms
Organisms
Table
Table
Table
A table in a design system organism is a structured component that organizes and displays data in rows and columns, allowing for sorting, filtering, and other interactive features to enhance data readability and manipulation.
A table in a design system organism is a structured component that organizes and displays data in rows and columns, allowing for sorting, filtering, and other interactive features to enhance data readability and manipulation.
Table Head
and cell variants
Table Head and cell variants
Table Head
and cell variants
These variants include text, numeric, icon, link, button, checkbox, editable, dropdown, and expandable types to offer versatile data presentation and user interaction capabilities.
These variants include text, numeric, icon, link, button, checkbox, editable, dropdown, and expandable types to offer versatile data presentation and user interaction capabilities.
Organism
Organism
Accordian
Accordian
Accordian
An accordion in a design system is an interactive component that allows users to expand and collapse sections of content, enabling a more organized and space-efficient presentation of information.
Organism
Organism
Tree
Tree
Tree
A tree in a design system is a hierarchical component that displays nested items, allowing users to expand and collapse branches to navigate and interact with complex data structures efficiently.
Organisms
Organisms
Dialog
Dialog
Dialog
Dialog boxes in a design system are interactive components that appear as overlays to prompt user action or provide information, typically including elements like titles, messages, input fields, buttons, and can vary in types such as modal, non-modal, alert, confirmation, and form dialogs.
Dialog boxes in a design system are interactive components that appear as overlays to prompt user action or provide information, typically including elements like titles, messages, input fields, buttons, and can vary in types such as modal, non-modal, alert, confirmation, and form dialogs.
And more…
Phases of Atomic Design System
Phases of Atomic Design System
Templates
Templates
Templates
Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure. They show how the organisms fit together and give context to the relationships between molecules and organisms.
Pages
Pages
Pages
Liked the additional personal information where they receive tailored recommendations.
Loved hasell-free insurance integration
It is recommended to view all past prescriptions on a separate screen.
Pages are specific instances of templates that show what a UI looks like with real representative content in place. Pages are essential for testing the design in a realistic setting and for ensuring that the design system can handle real-world content and scenarios.
And more…