Style guide 🖌️
Design Principles
- Accessibility - easy to read fonts, large buttons and good colour contrast
- Mobile-First design - keep small screens in mind and focus on ease of use and functionality
- Simplicity - clean design to keep it accessible and elegant
- Language - plain, simple language, imperative form
- Navigation - Banner with hamburger menu and avatar icon at the top at all times so that user can easily navigate the site
- Consistency - have a distinctive theme/design scheme throughout, helps build a recognisable brand
Possible color schemes
Colors guide
| Color |
Used for |
| White #fff |
Background, Movie tile text, Bechdel header? |
| Black #000 |
Most text unless on dark background |
| Ultra Violet #654EA3 |
Site Banner? |
|
Buttons (active vs inactive) |
|
Menu and hover links |
|
Links, radio buttons, review form |
| Green #17A600 |
Tick box icon |
| Red #E74E4E |
Cross box icon |
Typography
| Tag |
Style |
| H1, main headers |
Merriweather, Bold 34px / 2rem? |
| H2, Thanks header, review form header |
Merriweather, Bold 25-28px |
| H3, My page headers |
Montserrat, Semi-Bold 18px |
| P, movie titles, button text |
Merriweather, 16px |
| P, movie details |
Montserrat, 10px |
| P, movie tiles bechdel ratings |
Roboto 6px |
Figma mockups
Header - Merriweather, P text - Merriweather, Button text - Montserrat
