Style Guide

[CampbellDocherty]

Work In Progress - Style Guide

---

The code

• Styled components

  • Use these as much as possible
  • Should be little to no pure CSS
  • Reuse styled components for consistency

• Material UI

  • Use this is a last resort only !!! (Google already has our data don't let them take our creativity too)

---

Design Heuristics

• Aesthetic and minimalist design

  • Use too much space and size down
  • Project cards should take a lot of space on mobile
  • Mobile first!

• Visibility of system status

  • Loading states and error states where possible

• Match between system and the real world

  • Important when using logos!!

• Inclusivity

  • Minimum of semantic HTML and maximum of fully accessible interactions

---

Stretch Heuristics

• Error prevention

  • Prevent the user having to see error messages in the first place

• User control and freedom

  • Back to top button
  • Back a page button

---

Colours

• Black and White base

  • Colour will come from the project posts

• Flashes of colour

  • Buttons
  • Selected icons i.e. when on feed page home icon is blue

---

---

Font

• https://fonts.google.com/specimen/Poppins