Work Zone Awareness Week
Go orange and encourage everyone to pay attention in work zones and help save lives.
The site gets some stylistic and content changes to support Work Zone Awareness Week. The orange color used is the color specified in the style guide’s brand sub colors.
Work Zone Safety 100
PMS 1585 C
RGB: 255, 106,
HEX: #FF6A13
Global changes
All icons go orange
All of the graphic icons on the site are orange during this week. This includes the indicators on the main navigation, email subscription icons, bullet points, and all other icons on the site. The stylings for the texts associated with these icons does not change.
Header changes
The site’s header is orange
When the header is orange, the logo and logo text is converted to white.
"We're orange for safety" in the navigation
There is a temporary icon and link in the main navigation menu labeled “We are orange for safety” that links to the Work Zone Safety Awareness Week’s main content page.
Footer
Gray Notebook --> Work Zone Safety
On all pages, the styling of the footer will change. The banner drawing data from The Grey Notebook will now be Work Zone Safety related data.
The background color is: FFE9DC and the lines that group the data will be brand orange.
Striped border
There is an orange and white angled stripes bar that separates this banner from the bottom part of the footer. The background color of the bottom section of the footer is: FF8842 and all of the text is black, including the logo.
Right Sidebar
On all basic pages, there will be a work zone safety component that will come first in the right rail. Housed in a box with borders that match the white and orange angle stripe bars from the footer, the box has the work zone safety icon (same as in the main navigation), the work zone safety title, a brief description, and a link to the work zone safety pages. This is a static element that is the same on all basic page right rails.
Inspect Work Zone Awareness pages in public site mockups in Figma
Homepage
The major change for Work Zone Awareness Week is the component on the homepage at the bottom. Replacing “From the Agency” is a component titled “Work Zone Safety Awareness Week.” The background color is 15% opacity of the brand orange and there is a 400x506 pixel traffic cone graphic in brand orange at 20% opacity in the background on the left-hand side. The news articles in this component are all related to Work Zone Safety Awareness and have appropriately associated pictures and titles. The footer will follow a white and orange striped bar in the new work zone safety styling.
Inspect Work Zone Awareness pages in public site mockups in Figma
Work Zone Safety Content Pages
Background Image
The Work Zone Awareness Week basic pages have an extra element. They do not have a right rail component, but they do have a traffic cone icon in the background. The size of the graphic is: 511 x 647 with an opacity set at 15% of the brand orange. The graphic is banked to the right side of the page. The graphic’s left most margin will start on the same grid line as the right rail and the graphic will bleed off the page.
Inspect Work Zone Awareness pages in public site mockups in Figma
Last updated