spaces
1. Whitespace (spaces and breath in design)
- Use consistent vertical spacing between blocks (e.g. 24-48px).
- Note the larger internal spacing (padding) around important blocks such as hero sections.
- Do not use too small spaces - they visually “compress” the page and make it difficult to read.
- Use larger spacing for sections with different backgrounds to create natural section transitions.
- Keep in mind the “white space hierarchy”: the more important the element, the more space around it.
colours
2. Colours (Colors)
- Use no more than 3-5 primary colours throughout the project.
- Defined by brand palette: primary, secondary and accent colour.
- Restrict bright colours to CTA buttons or important elements.
- For backgrounds, light or very dark shades are preferred to ensure high contrast with the text.
- Ensure that the colour contrast complies with WCAG (4.5:1 for text).
- Use the same colour tone for all icons or illustrations.
3. Typography (Fonts & Font size)
- Choose 1 primary font for text and 1 accent font for headings (if needed).
- Creates a consistent hierarchy (example):
- H1: 40-60px
- H2: 28-40px
- H3: 22-28px
- Body: 16-18px
- Small text: 14px
- Minimum line-height - 1.4-1.6.
- Do not use more than 2-3 different font-weights on the entire page.
- Ensure the font size is sufficient for mobile view (at least 15-16px for plain text).
