Last updated on June 5, 2019
Here is a very simple design guide for the Vote.org website and apps.
- We borrow heavily from the US Web Design System. We are using V1 of this system. V2 came out in June 2019.
- Try to use UI components from the US Web Design System. You don't need to use their code, but using their designs is a good practice.
- Only use colors from the US Web Design System Color Palette. It's pretty and there are a range of colors to choose from.
- Use any color you want from that palette, as long as you only use colors from that palette.
- Our default font-size is 17px. Small text should be no smaller than 15px.
- No more than two fonts, please.
- Never use font-weight 300. It's illegible on many screens.
- Accessibility matters. We aim to be 508 compliant.
- Triple check that your contrast levels are high enough using this tool: https://webaim.org/resources/contrastchecker/.
- Our media breakpoints are 600px, 900px, 1200px. This article explains why this breakpoints are ideal. TL;DR: Most phones screens are less than 600px; most tablet screens are between 600px and 1200px; most desktops screens over 1200px wide.
- Try to use pixels and not ems, rems, or anything else that is less explicit than pixels. (NB: The internet is filled with debates on pixels vs rems vs ems.)