Visual Style

For the following the SAM Web Standards do not modify the US Web Standards:

• buttons,
• labels,
• tables,
• alerts,
• accordions,
• search bar, and
• side navigation.

For each page you should ask yourself, “What is the primary purpose of this page? What is the secondary purpose? What are the tertiary purposes? What is here that gets in the way of those purposes?”

Cascading Style Sheets

The SAM environment has a Cascading Style Sheet (CSS) available to developers (see base page template), which captures the CSS generated by the US Web Standards with additional declarations added. The styles from the US Web Standards are prefixed with “usa-“ while those declared by IAE are prefixed with “iae-“. Therefore, when extending the available styles it is important to use a unique prefix to avoid collision.

Mobile First

The SAM Web Standards adopts the grid from the US Web Standards as the foundation for the creation of responsive designs ¹. Further, the SAM Web Standards recommend designing with a mobile first mindset to better serve users who are consuming the data available through SAM on smaller screens.

Logo and Usage

[insert logo pages from branding style guide]

Typography

The SAM Web Standards follows the US Web Standards with regard to typography and uses the Source Sans Pro pairing and style.

Colors

The SAM Web Standards uses the US Web Standards colors as a base for color decisions. Further, the SAM Web Standards defines the following colors as suitable content background colors.

Imagery

You have the ability to surf the Internet on multiple devices, with multiple resolutions (low, medium, high, extra high, and so on), and the ability to make the browser almost any size you want. It is disappointing when a site dictates how you should use it or when the graphics are fuzzy because they are not accounting for the resolution capabilities of your display.

• Use Scalable Vector Graphics (SVG) when possible, especially flat artwork.
• Use Portable Network Graphics (PNG) for flat artwork, images with transparency, or photographs.
• Create and save images at 100 pixels per inch and two times the rendered dimensions; this does not apply to SVG.
• Avoid imagery not directly related to the content being presented.
• Avoid clip art style images.

[text and examples of image types and usage]

Animation

The Internet, as a platform, has come a long way in a short time, relatively speaking. The modern Web holds few boundaries when it comes to what can be accomplished; however, just because something can be done, does not mean it should be done.

Gratuitous animations that do not contribute to user feedback and goals become annoying, causing a speed bump. Animated graphics (or static imagery) that does not aid the communication of the content are distracting and make it difficult to navigate the site. The Web, generally speaking, is a silent world. Sound (even as part of a video) should be optional.