Description 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
Reactions are currently unavailable
You can’t perform that action at this time.
Work In Progress - Style Guide
The code
Styled components
Material UI
Design Heuristics
Aesthetic and minimalist design
Visibility of system status
Match between system and the real world
Inclusivity
Stretch Heuristics
Error prevention
User control and freedom
Colours
Black and White base
Flashes of colour
Font