Design Styling Guide | Office of Communications & Marketing

Design Styling Guide

Use color themes sparingly. Try to avoid using the same theme with two stacked components, with the following exceptions:
- When the component visually looks better in color: i.e Featured News with a color theme (not the white theme)
- If the page is lengthy and already has a good amount of color, use white and gray themes but avoid alternating them too much to avoid repetition.
Padding specifics. If you are using two stacked components with the same theme, do either of the following:
- Remove the bottom padding for all breakpoints on the first component
- Add a bottom border for all breakpoints to the first component
Avoid using UPPERCASE in the backend fields. If the text is supposed to be UPPERCASE on the front end (i.e. the tags for a Grid Block component), the code should be applying the correct style regardless of what is entered on the backend
No single accordions. Avoid using Accordions if there’s only enough content for one–instead, put the content in a WYSIWYG or use Grid Columns.
‘Take the Next Step’ component. Keep it unified throughout the site:
- Use the light blue theme for this component
- Keep it the last component on the page, if possible
Limit purple theme. Since purple is a tertiary color in the WSU palette, limit it to one component per page. For departments pages, purple is for the student testimonials component
Limit light blue theme to:
- Action bar callout
- Take the next steps.
- Why Worcester State homepage component