[...] Communications Toolkit
Design Styling Guide

Design Styling Guide

IN THIS SECTION
Office of Communications and Marketing
Shaughnessy Administration Building
Suite A-258
wsumarcom@worcester.edu
508-929-8618
  • 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
Web Culture Guide
Component Overview
Content Writing Guide
Office of Communications and Marketing
Shaughnessy Administration Building
Suite A-258
wsumarcom@worcester.edu
508-929-8618