a) Use appropriate icon set for all buttons. If you do not have proper icons, you can download or use link in stylesheet from Google Fonts. You can also use icons in emoji format. If you want to know the hex code of the emojis you can refer to W3 Schools Emoji Reference. This will increase the accessibility of the website.

b) Put a help button. It should direct the user to any documentation, video tutorial of the product, map of the website or the Customer support of the website.

c) Be consistent with colors. Instead of using multiple colors in multiple places decide a color theme for your website. Make sure that the colors make a sharp difference.

Here’s a color theme as an example-

:root {
     --primary-color: #F0F0F0;
     --secondary-color: #FFFFFF;
     --text-color: #121212;
     --success-color: #2CE840;
     --danger-color: #FF5252;
}
.dark-mode {
     --primary-color: #121212;
     --secondary-color: #4B4B4B;
     --text-color: #FFFFFF;
     --success-color: #2CE840;
     --danger-color: #FF5252;
}

Here, var(--primary-color) will be the background-color, var(--secondary-color) will be the background-color of elements and var(--text-color) will be the text color. If you are not sure which colors to use you can take help from Color Hunt. Use :root {} and define in it the colors and use var(--colorname) to use the colors. This will also help you while making the dark mode of the website.

d) Be consistent with fonts. Use a maximum of 4 fonts and a minimum of 4 fonts for your projects. Give a different font for your heading and body text. Well in my case I generally use some of these fonts based on the project-

1. 'Roboto', sans-serif
2. 'Nunito Sans', sans-serif
3. 'Montserrat', sans-serif
4. 'Source Code Pro', monospace
5. 'Playfair Display', serif
6. 'Rajdhani', sans-serif
7. 'Aref Ruqaa', serif
8. 'Amatic SC', cursive

e) Follow color standards. A warning message should have red background. A note message should have a yellow background. A success message should have a green background. A tips message should be in blue background.

f) Don’t make it messy. Use proper word-spacing, letter-spacing, paddings and margins. The background color here var(--primary-color) should not visible a lot. Instead, the elements should have enough blank space which covers up over the background.

g) Try to make the buttons rectangular. So when the word is small, use more horizontal padding than vertical padding.

h) Use :hover and :active pseudo classes on buttons The background-color difference between the normal state and the :hover state should have a sharp contrast whereas the :hover state and :active state should have less contrast.

i) Use user-select: none; on buttons so that when the user double clicks it doesn't select the content within the button.

j) Use :focus pseudo class for inputs. The :focus state should have a border.

---

Share it💚 with someone who may benefit from this ❤️ Happy Coding! Follow for more!