Basic Rules of Visual Design

1. Use near-black and near-white instead of pure black and white

2. Saturate your neutrals

3. Use high contrast for important elements

4. Everything in your design should be deliberate

5. Optical alignment is often better than mathematical alignment

6. Lower letter spacing and line height with larger text. Raise them with smaller text

7. Container borders should contrast with both the container and the background

8. Everything should be aligned with something else

9. Colours in a palette should have distinct brightness values

10. If you saturate your neutrals you should use warm or cool colours, not both

11. Measurements should be mathematically related

12. Elements should go in order of visual weight

13. If you use a horizontal grid, use 12 columns

14. Spacing should go between points of high contrast

15. Closer elements should be lighter

16. Make drop shadow blur values double their distance values e.g. If you create a shadow which extends 4 pixels on the Y axis, use a blur value of 8 pixels.

17. Put simple on complex or complex on simple

18. Keep container colours within brightness limits

19. Make outer padding the same or more than inner padding

20. Elements that are more related should be closer together.

21. Keep body text at 16px or above

22. Use a line length around 70 characters

23. Make horizontal padding twice the vertical padding in buttons

24. Use two typefaces at most

25. Nest corners properly

26. Don’t put two hard divides next to each other