Enchanted
Design System
Enchanted
Design System
Enchanted
Design System
My Role
My Role
Lead Designer
Contribution
Contribution
-Typography & Color
libraries
-Component creation
-Web accessibility evaluation
-Typography & Color
libraries
-Component creation
-Web accessibility evaluation
Skills
Skills
-Figma component
-Documentation
-Asset maintenance
-Figma component
-Documentation
-Asset maintenance
“Enchanted Design System is comprehensive collection of reusable elements and components that are designed for HCL Software to ensure consistency, cohesiveness, and user-friendliness across their various products.”
“Enchanted Design System is comprehensive collection of reusable elements and components that are designed for HCL Software to ensure consistency, cohesiveness, and user-friendliness across their various products.”
How did we built the design system |
Design Process
Design Process
Creating a design system is a strategic process that requires careful planning and execution to prevent repeating mistakes.
Below is the detail process how we created design system.
Creating a design system is a strategic process that requires careful planning and execution to prevent repeating mistakes.
Here is the detail process we used to create design system.
Audit and Research
Identify design inconsistencies and variations of each product. Assess their usage across different applications.
Conduct comprehensive research to understand best practices of design elements.
Design
Identify the needed components and design them using the basic elements including typography, colors, icons, and other reusable components.
Review
Review sessions with other designers to evaluate and validate the designed components in the system.
Also test the elements for WCAG compliance ensuring its accessibility.
Implementation and Test
Create develop specification. Collaborate with development team integrate design into the codebase.
Then we test out coded component to ensure its look and its behavior.
Audit and Research
Identify design inconsistencies and variations of each product. Assess their usage across different applications.
Conduct comprehensive research to understand best practices of design elements.
Design
Identify the needed components and design them using the basic elements including typography, colors, icons, and other reusable components.
Review
Review sessions with other designers to evaluate and validate the designed components in the system.
Also test the elements for WCAG compliance ensuring its accessibility.
Implementation and Test
Create develop specification. Collaborate with development team integrate design into the codebase.
Then we test out coded component to ensure its look and its behavior.
Methodology |
Atomic Design
Atomic Design
Atomic Design is a product methodology we used for creating the design system which breaks down user interfaces into fundamental components. This approach benefits our design systems by promoting consistency, scalability, and reusability,
making it easier to maintain and evolve the design across different products and platforms
Atomic Design is a product methodology we used for creating the design system which breaks down user interfaces into fundamental components.
This approach benefits our design systems by promoting consistency, scalability, and reusability, making it easier to maintain and evolve the design across different products and platforms
Tokens
Tokens
Tokens are subatomic particles of atomic design. They are standardized values used in design systems to define elements like color and typography enabling consistent and scalable design across platforms.
Tokens are subatomic particles of atomic design. They are standardized values used in design systems to define elements like color and typography enabling consistent and scalable design across platforms.
Atoms
Atoms
Atoms are the most basic building blocks in a design system. They include simple UI elements like buttons, icons, input fields, and basic HTML elements (e.g., labels, forms).
Atoms are the most basic building blocks in a design system. They include simple UI elements like buttons, icons, input fields, and basic HTML elements (e.g., labels, forms).
Organisms
Organisms
Organisms are relatively complex components made up of groups of molecules and/or atoms. They form distinct sections of an interface, such as a navigation bar, a product card, or a user profile section. Organisms are key building blocks that bring significant pieces of the UI together, providing a more complete and functional representation of the design.
Organisms are relatively complex components made up of groups of molecules and/or atoms. They form distinct sections of an interface, such as a navigation bar, a product card, or a user profile section. Organisms are key building blocks that bring significant pieces of the UI together, providing a more complete and functional representation of the design.
Molecules
Molecules
Molecules are groups of atoms bonded together, functioning as a single unit. They represent simple components, such as a form field with a label and an input, or a button with an icon.
Molecules are groups of atoms bonded together, functioning as a single unit. They represent simple components, such as a form field with a label and an input, or a button with an icon.
Templates
Templates
Templates are page-level structures that combine organisms into a cohesive layout. They represent the overall structure and layout of a page without the actual content. Templates provide a framework for content placement and layout consistency, showing how different organisms and molecules fit together within a grid system.
Templates are page-level structures that combine organisms into a cohesive layout. They represent the overall structure and layout of a page without the actual content. Templates provide a framework for content placement and layout consistency, showing how different organisms and molecules fit together within a grid system.
Pages
Pages
Pages are specific instances of templates filled with real content. They represent the final stage where design and content come together, providing a realistic view of the end product. Pages demonstrate how the UI components look and function with actual data and allow for testing and refinement based on user feedback.
Pages are specific instances of templates filled with real content. They represent the final stage where design and content come together, providing a realistic view of the end product. Pages demonstrate how the UI components look and function with actual data and allow for testing and refinement based on user feedback.
Design System Library |
Typography
Typography
Our typography system includes the Inter, Helvetica Neue, and Sans-serif font families.
We've standardized font weights across all typefaces for consistency.
The typography tokens are structured in alignment with our design framework, ensuring a scalable approach that allows for future expansions, such as adding size variants to text styles.
Our typography system includes the Inter, Helvetica Neue, and Sans-serif font families.
We've standardized font weights across all typefaces for consistency.
The typography tokens are structured in alignment with our design framework, ensuring a scalable approach that allows for future expansions, such as adding size variants to text styles.
Aa
Aa
Inter
Inter
Medium
Medium
Regular
Regular
Light
Light
Aa
Aa
Helvetica Neue
Helvetica Neue
Medium
Medium
Regular
Regular
Light
Light
Colors
Colors
Base color variables, or primitives, are stored within the our Themes to ensure consistency, effective color management.
Theme colors indicate how they are used within different design layers, with descriptive tokens providing context.
Base color variables, or primitives, are stored within the our Themes to ensure consistency, effective color management.
Theme colors indicate how they are used within different design layers, with descriptive tokens providing context.
Color variables
Color Themes
Shadows
We have set of shadows that can control relative depth or distance between two surfaces.
Surface that is in higher elevation uses larger shadow.
Components
Components are reusable elements including their properties, interaction.
Set of components are efficient to create and maintain designs.
Templates
A Template is a page-level structure that organizes components within a layout and defines the design's content structure.
Let me know if you have any question!
Let me know if you have any question!
Let me know if you have any question!