Style Guide

[ReginaldJbeili]

No description provided.

[renatadev]

Style Guide

Link to our Figma prototype

Principles

Simplicity: for accessibility reasons and for a clean aesthetic.
Transparency: in order to maintain the vision of G2H as a platform for commercial/editorial/social media to use, and have trust in.
Consistency: the app must be very easy to use and be trusted as valuable, consistency encourages this.
Control: ensuring there are ways the user can take control if they make a mistake.

Design choices throughout app

Accessibility - at the forefront of all design choices
Icons - use the buttons reference colors to indicate a clear purpose as refered below. Make sure that there are breadcrums and there's always the option to go back to the previous pages.
Desktop-First Design - but always take in consideration the responsiveness to other devices, as this is crucial nowadays.
Messages/alerts - to bring clarity if the user journey is not clear to some. If these are "pop-ups" it should be clear how to close it by showing a clear and accessible "X - Close" button.
Navigation - ability to guide through the app as the user wishes, going back and forth easily so the user is able to check over information. This refers to icons/breadcrums as well.
Language - Simple but elegant. Make sure there are no spelling mistakes. Re-read and ask other to read for you to avoid misspells and a second opinion.

Palettes

Guidance to the right use of Palettes

Landing page

Museum profile

Logo

Typography

Headers: TBC
Content: TBC

Proportions

Golden Ratio
--space-xs: 0.382rem;
--space-s: 0.618rem;
--space-m: 1rem;
--space-l: 1.618rem;
--space-xl: 2.618rem;
--space-xxl: 4.236rem;

Font Sizing
TBC

Color variables
To be updated later

Accessibility

Take always in consideration the good practices and a great porcentage of accessibility, SEO, Performance, etc. Keep an eye in the audits of the website.

Styled components

Use styled components (CSS in JS) instead of CSS stylesheets.

Reasons to use styled components here