block-quote chevron-down
copy Copy chevron-down
Design Foundations Design elements Design elements cover styles used across many page types and components. This covers things like general color usage, strokes, border radii, and more.
Background colors
There are two allowable background colors – White and Grays 5.
Examples of color options for cards - dark and light When building out content cards on either of the background colors, there needs to be enough color contrast that the user can still read the content that goes in the card.
For white backgrounds, use a fill color of Grays 5 and a border color of Grays 10
For gray backgrounds, use a fill color of White and a border color of Grays 10
A diagram showing what a standard 4px border radius looks like Use a border radius of 4px on all cards, buttons, images, and other elements that are not full width.
Examples of the short drop shadow used on clickable cards Used when the entire card is clickable. Applies gentle shadow to the bottom that can be used to animate the depth on click.
Box-shadow: 0px 2px 0px 0px [Gray100] 15%
Examples of the spread out drop shadow used on feature cards Used on large visual elements on home pages or landing pages. Usually accompanies an angular, full bleed box.
Box-shadow: 0px 0px 36px 0px [Gray100] 10%
Examples of the subtle drop shadow used on list item cards Used on long lists of cards that need a subtle shadow to add depth.
Box-shadow: 0px 0px 4px 0px [Gray100] 5%
Diagram showing the angle of slant used on slanted boxes, lines, and shapes A slanted angle is used to strengthen the impression of the WSDOT brand. The angle mimics the angle of the “Flying T” shown in the logo.
All uses of the angle should be parallel, regardless of the size of the box or shape
The angle is 7.5° from the standard 90° angle
