Department-of-Commerce-Web-Style-Guide.md

@@ -109,3 +109,18 @@ Optimization Checklist
 - Don’t allow images to be “squished” horizontally or vertically. Maintain the image’s original proportions
 - Don’t use color alone to convey meaning, particularly for charts or graphs (please be mindful of end users who are visually challenged) 
 - Don’t use fast flickering or flashing images
+
+| High resolution and clear photo | Low resolution and blurry photo |
+| ------ | ------ |
+| ![image](uploads/0ecffe56fa4e7007d6167d3a97a737d1/image.png) | ![image](uploads/1ce0427867d7732a964ff5d69512a681/image.png) |
+
+**Hero Images**
+
+The hero image is the main messaging area for the first-tier landing page templates. The main hero space has a minimum width of 2000px, and should react to the user's browser. The image within the hero container should always scale up or down depending on the browser size, mobile, or tablet views.
+
+**Photo Style**
+
+The hero image on the Commerce homepage conveys the central mission of the Department of Commerce or its sub-office. Use of faces helps convey a sense approachability and accessibility.
+
+![image](uploads/a65bb05013a1f9ad036fa1a5ed7a3380/image.png)
+*An example of a Commerce office hero image*