Design Guidlines

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