Site Styles

This page provides a high-level view of the digital brand styles with regard to typography and color used on the SCM site.

Color Palette

Type Stack

The primary font for SCM is Neue Haas Grotesk. Neue Haas Grotesk Bold is used in all headings and Neue Haas Grotesk Roman is used for paragraph text. Roboto Serif is used as an accent font in the SCM design system. Used for moments of contrast, Roboto Serif appears as headings in the SCM Voices blog, and in excerpts, headnotes, and pull quotes throughout aspects of the larger site.

Both of the these typefaces are preferred MIT typefaces according to MIT Brand standards. The MIT community can access Neue Haas Grotesk through Adobe Fonts. Roboto Serif is available for free via Google Fonts. See the typography section of the MIT Brand Standards link above for instructions on accessing typefaces through Google Fonts.

Note that all styles and blocks displayed below are available within the Basic Text block. Use the Basic Text block exclusively on Default Templates (like this page), News, People and SCM Voices blog pages. Bespoke SCM content blocks are available on the Landing Page template (wp-custom-landing-page-template).

H2 – Neue Haas Grotesk Bold

Sample paragraph text / Neue Haas Roman—lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

H3 – Neue Haas Grotesk Bold

H4 – Neue Haas Grotesk Bold

H5 – Neue Haas Grotesk Bold

H6 – Neue Haas Grotesk Bold

Sample bulleted list

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sample ordered list

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sample Table

Tables include a heading style as seen below and are intended to display tabular data only. To set a title for a table use basic text heading and paragraph blocks. Do not attempt to alter the styles within the tables, as they may not appear as intended on mobile views and other responsive states.

Catalog	Subject	Unit
SC0x	Supply Chain Analytics	–
SCM.250	Analytical Methods for Supply Chain Management I	6
SCM.280	Supply Chain Communications Workshop	1

Sample Pullquote Block

I want to stress that social networking is quite a personal endeavor. In the SCM program you can connect and socialize with the larger community of MIT including Sloan, LGO, SDM, etc. But seeking those opportunities is up to you.”
Daniel Granados Nicholls
SMCr ‘23

Sample Gallery Block

Sample Image Block

Sample caption: Duis aute irure dolor in reprehenderit in voluptate velit esse.

Tips and Useful Information

Imagery

Horizontal images are always BEST for web sites. If you must use a vertical or portrait image—crop to square as possible. Image proportions such as 3:2, 4:6, or 16:9 aspect ratios are good standards to consider. Many images on the SCM site use the 3:2 aspect ratio.

Image size	Use case
1920px	Large images like the the full width CTA or homepage hero
1000–1366px	All images other than large CTA or homepage hero
400–800px	Headshots for people pages

Layout

Basic Text block: This is your primary block for the blogs as noted above. Use the table, image, image gallery and pullquote blocks within the Gutenberg editor (in the basic text block) for the blogs.

Landing Page layouts: Balance the order in which blocks flow/appear on Landing Pages. Develop a rhythm from block to block to create a pleasing visual flow to the page.

Cards: When using the bespoke cards block, it is best to keep the content length from card to card as consistent and parallel as possible. When using three (3) cards in a row, use no more than a short 2–3 word title and single sentence description (or don’t use a description at all).

Set True Quotes

When setting typography on the web, html often defaults true quotes to inch marks. To get around this, enter quotes or apostrophes with key commands. Pay attention to proper quote or apostrophe mark usage when setting headers.

Character	Key command
Open quote ( “ )	Option > [
Closed quote ( ” )	Shift/Option > [
Open apostrophe ( ‘ )	Option > ]
Closed apostrophe ( ’ )	Shift/Option > ]