Essentials of UI Style Guide
After wireframing there comes the UI design and every UI needs a style guide. Essential checklist for Essentials of UI Style Guide, be sure to have these on your style guide!
We prefer to set the project's colors first. We'd like to have the shades and tints of every main color on our palette. These main colors are named after their purpose; primary, gray-scale, success, danger, warning, info along with optional secondary and tertiary. We usually have ~7 main colors but it is optional to add more.
We usually set a type-scale of 13 sizes for every project.
We generally use 12 column grids with 8 or 16 gutters on each side.
Designer should define and properly label the states of every button on the style guide.
Every icon used on the UI should be shown in the style guide.
Form elements should cover every possible state of every actionable form elements.
Cards, bars, accordions, carousels.. Every component should be clearly stated in the style guide.