Design Guidlines

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.)