Marketing

Web Style Guide

 

Accessibility

Formatting of text and content must follow Accessibility Guidelines to comply with federal Section 508 standards.

  • Inaccessible text will be immediately fixed upon discovery.
  • Any file discovered that is not accessible will be removed 1 week after notification to ensure federal compliance and more importantly, access for people with disabilities.

Image Sizes

  • Images are in a 16:9 ratio. Aim for maximum size of 825 x 464 pixels.
  • Resolution should be 96 or 150 pixels.
  • Have less than 20% text.
  • Color contrast must be clear.

Hero Images

  • New Size - Hero Image for Interior Page: 825 x 464 pixels
    This new size matches the standard maxium size and image ratio of 16:9.
  • Hero Image for Landing Page: 1355 x 870 pixels

Standard Images

Images fit in all designs at a 16:9 ratio. Crop and save images on pages.

  • Large: 825 x 464 pixels. Maximum size for all images.
  • Medium: 640 x 360 pixels. Use with Carousel snippet and Video component.
  • Small/Thumbnail: 480 x 270 pixels. Use with Generic Block - Image List snippet and Card Slider snippet.

Biography Images

All images in on the biography pages will be displayed in a square format.

  • Square: 480 x 480 pixels

Web Styles

These web styles are already built into the SMC Content Management System. 

Headings use Poppins:

Heading 2

Heading 3

Heading 4

Paragraph text uses Proxima Nova and can be displayed in both bold and italic when necessary.

Samples of Text Formatted for the Website

Bulleted Lists

These should be used for any list of items that do not need to follow a chronological order.

  • List item.
  • List item.
  • List item. etc.
    • Sub-List item.
    • Sub-List item.
    • Sub-List item. etc.

Ordered Lists

These should be used for any list of items that need to follow a chronological order.

  1. List item.
  2. List item.
  3. List item. etc.

Links and Buttons

Links are indicated by the SMC blue color and an underline.

Links to external, non-SMC, websites should open in a new browser window or tab.

Links to documents like PDF files or Microsoft documents should also open in a new browser window or tab, and include an icon to indicate the type of file they are linking to:

Link to a PDF File.

Link to a Microsoft Word Document.

"Call to Action Buttons" are used to stand out from the text on the page and indicate special links.

CTA Blue Button

Sunburst Link

"Grid Buttons" are used to display a list of buttons that need to stand out as graphic navigation to sub-sections of a main page or section. They can be split into horizontal lists of 1, 2, 3, 4, 5, or 6 across:

Grid Button
Grid Button
Grid Button

Tables

Tables should be used for tabular data only. Tables are not used to visually organize the content on the page. Tables need to conform to Accessibility Guidelines, please contact the Web and Social Media Office to help format tables properly.

Examples of approved table styles:

Default Table

Table Heading 1 Table Heading 2 Table Heading 3
First Column Cell Table Cell Table Cell
First Column Cell Table Cell Table Cell
First Column Cell Table Cell Table Cell
First Column Cell Table Cell Table Cell

Data Table

Table Heading 1 Table Heading 2 Table Heading 3
First Column Cell Table Cell Table Cell
First Column Cell Table Cell Table Cell
First Column Cell Table Cell Table Cell
First Column Cell Table Cell Table Cell

New Design Tools

  • Assets – pre-made, specific content that can go on many pages, like forms and embed codes.
  • Components – form-based templates, like buttons, galleries, and buttons
  • Snippets – table-based templates, like accordions, carousels, and tables.