InnovaAcademy Session 21 Mentorship Session PDF

innovaAcademy Session 21 Mentorship Session Develop our design system Start with Color Style  Black White #000000 #FFFFFF Neutral, Gray Gray is a neutral colour and is the base of the colour system. The majority of...

innovaAcademy Session 21 Mentorship Session Develop our design system Start with Color Style  Black White #000000 #FFFFFF Neutral, Gray Gray is a neutral colour and is the base of the colour system. The majority of UI design utilises the Gray colour from Backgrounds, text, dividers etc. Secondary Colours The secondary colours are used to support your primary colours within the UI. The secondary colours chosen should be used sparingly or as accents alongside your primary colours for elements such as secondary buttons, pills or labels. Gray / 50 Gray / 100 Gray / 200 Gray / 300 Gray / 400 #F9FAFB #F3F4F6 #E5E7EB #D2D5DA #9CA3AF D ark Blue Gray / 500 Gray / 600 Gray / 700 Gray / 800 Gray / 900 D ark blue / 50 D ark blue / 100 D ark blue / 200 Dark blue / 300 Dark blue / 400 #6D7280 #4B5563 #374151 #1F2937 #111827 #F8F9FC #EAECF5 #C8CCE5 #9EA5D1 #717BBC Primary The primary colour is ultimately your ‘staple’ Brand colour, it is used across all elements of a UI including D ark blue / 500 D ark blue / 600 D ark blue / 700 Dark blue / 800 Dark blue / 900 buttons, borders, fills and many other areas. The primary colour will define the entire look of the UI. #4E5BA6 #3E4784 #363F72 #293056 #101323 Purple Blue / 50 Blue / 100 Blue / 200 Blue / 300 Blue / 400 #eff6ff #dbeafe #bfdbfe #93c5fd #60a5fa Purple / 50 Purple / 100 Purple / 200 Purple / 300 Purple / 400 #faf5ff #f3e8ff #e9d5ff #d8b4fe #c084fc Blue / 500 Blue / 600 Blue / 700 Blue / 800 Blue / 900 #3b82f6 #2563eb #1d4ed8 #1e40af #1e3a8a Purple / 500 Purple / 600 Purple / 700 Purple / 800 Purple / 900 #a855f7 #9333ea #7e22ce #6b21a8 #581c87 Orange  9:41 Primary Colors Careers at InnovaDigits InnovaDigits is a software company at the forefront of innovation in the digital landscape. Established in 2018, we have consistently delivered exceptional software solutions. Primary colors are the main colors used to represent View Jobs your brand. They should be instantly recognizable and associated with your brand in all visual Openings Vacancies InnovaDigits is a software company at the forefront of communications, including the user interface (UI). innovation in the digital landscape. Established. Search... Work Type Department They should be used in key UI components such as Location headers, navigation bars, buttons (especially CTAs), and key icons. Sorry, no job openings at the moment.  9:41 Secondary colors Careers at InnovaDigits InnovaDigits is a software company at the forefront of innovation in the digital landscape. Established in 2018, we have consistently delivered exceptional software solutions. Secondary colors support colors that complement the View Jobs primary palette and are used for less prominent UI elements. These colors should enhance the primary Openings Vacancies InnovaDigits is a software company at the forefront of color without overshadowing it. innovation in the digital landscape. Established. Search... Work Type Department They can be used for buttons that are not the primary Location CTAs, hover states, progress bars, icons, backgrounds, and tooltips. Sorry, no job openings at the moment. Neutral 9:41 colors Careers at InnovaDigits InnovaDigits is a software company at the forefront of innovation in the digital landscape. Established in 2018, we have consistently delivered exceptional software solutions. Neutral colors, such as black, white, gray, beige, and View Jobs other muted tones, play an essential role in UI design and branding. These colors serve as a backdrop or Openings Vacancies InnovaDigits is a software company at the forefront of complement to the primary and secondary colors, innovation in the digital landscape. Established. helping to balance more vibrant hues while ensuring Search... readability, clarity, and aesthetic harmony. Work Type Department Location White for backgrounds Gray for backgrounds to borders to secondary text Black for text, icons, and sometimes backgrounds in dark mode Sorry, no job openings at the moment. Feedback 9:41 Create New Job colors Job Details Job Title Enter job title System status (Feedback) colors are used to indicate Error label Department the state of an action. they give users feedback which Enter department are a success, warning, info, and danger (Error) Job Type Enter job type Number of Hires Enter no. of hires Experience Level Enter experience level Education Save & Continue Enter education Skills UI Team work Salary Range The golden rule 60-30-10 60-30-10 rule 60% - Dominant Color 30% - Secondary Color 10% - Accent Color Gradient Colors Gradient Colors Gradient colors are a gradual blending or transitioning between two or more colors. They are commonly used to create visual depth, highlight important areas, or give a modern, dynamic look to the user interface. Used in Backgrounds, Buttons, CTA (Call to Action), Icon, Illustrations and Text Types of Gradients Linear Gradient Radial Gradient Angular Gradient See you in the Next Session...