MIT Civil and Environmental Engineering

Official Websites

• https://cee.mit.edu
• https://engineering.mit.edu/department/civil-environmental-engineering
• https://oge.mit.edu/programs/civil-and-environmental-engineering

Brand Guidelines

2021

Brand Summary

Mission

• To educate and train the next generation of researchers and engineers, driven by a passion to positively impact society, economy, and the planet, advancing the frontiers of knowledge for a sustainable civilization [^1].

Core Values

• unity
• variety
• inclusivity
• innovation
• collaboration
• sustainability
• resilience
• scientific rigor
• creativity
• legibility
• clarity
• community

Target Audience

• Students, faculty, staff, and the global community interacting with MIT, including prospective researchers and engineers interested in civil and environmental engineering [^2].

Personality Traits

• bold
• innovative
• collaborative
• inclusive
• thoughtful
• professional
• creative
• resilient

Visual Identity Overview

• The visual identity is built around abstract circular geometric patterns, a bright and unexpected color palette, clean and legible typography (primarily Helvetica and Times New Roman), and a unified yet varied approach to layouts and imagery. The logo and graphic elements emphasize motion, depth, and inclusivity, with guidelines for logo usage, color gradients, and photography style to ensure consistency and clarity across all communications [^3].

Categories

Brand Imagery

• A circle is a perfect shape. This simple shape holds mathematical, scientific, and cultural significance. It is used to represent universality, infinity, and many other concepts of inclusivity. The circle is a primary shape, and a building block of the department communication system. The five parts together as one form a moving circular shape.
• This is the primary department mark and should be considered the first choice in most situations. It suggests the impact that department has on the institution.
• The department logos should always be legible, clear, and noticeable. To maintain full legibility, never reproduce the logo smaller than .25 inches high for print and 30 pixels high for digital. There is no maximum size limit, but use discretion when sizing the logo.
• The sum of the parts can be used as a graphic element in certain layouts without the word mark, as shown below. When used effectively, they can become an extension of the department. However, they should be used on a limited basis so as to not detract from the integrity of the primary lockup.
• Common Usage: The sum of the parts in color gray-scale, black and knock-out white. These would be the most commonly used colors.
• Minimum Sizes: To maintain full legibility, never reproduce the parentheses smaller than .25 inches high for print and 30 pixels high for digital. There is no maximum size limit, but use discretion when sizing the parentheses.

Color Palette

• The department color palette is bright and unexpected. Use the color palette across all media and communications.
• PANTONE Medium Blue C CMYK 80/18/0/0 RBG 0/161/222 HEX #00A1DE
• PANTONE Bright Green C CMYK 78/10/43/0 RBG 10/168/161 HEX #0AA8A1
• PANTONE 312 C CMYK 71/16/0/0 RBG 46/171/224 HEX #22A8E0
• PANTONE 7690 C CMYK 85/50/0/0 RBG 27/117/188 HEX #1B75BC
• PANTONE 288 C CMYK 100/93/7/1 RBG 43/56/143 HEX #2B388F
• PANTONE Black C CMYK 60/60/60/100 RBG 0/0/0 HEX #000000
• PANTONE 424 CMYK: 30/22/19/53 RBG: 108/111/112 HEX: #6C6F70
• PANTONE 420 CMYK: 6/4/7/11 RBG: 206/205/203 HEX: #CECFCB
• Gradients should be used sparingly and reduced in colors for certain usages (i.e. photo overlay, digital buttons, and backgrounds). Please use all the colors for wide horizontal space and only two colors for narrow vertical space.
• We suggest viewing your design through color blindness simulation software to confirm typographic legibility for the visually impaired. Color Oracle is a free color blindness simulator for Window, Mac, and Linux. It shows you in real time what people with common color vision impairments will see. Most color deficient viewers are seeing more colors than in the extreme cases below.

Typography

• Font selection is a key component in the creation of successful brand communication and in managing a unified brand. Consistency in the use of the brand-approved fonts reinforces brand recognition, identity, and allows all communication to speak with a common typographic voice. Typography should work in concert with the overall design, photography, information graphics, and writing to help describe and define the department brand identity.
• The selection of the “Helvetica” font family supports the brand identity and is consistent with MIT’s rich history, culture, and values. Because MIT will need to convey a broad range of department messages, typographic consistency will help unify all communications. Helvetica letterforms will resonate with all audiences—students, faculty, and staff—and the global community that interacts with MIT. In combination with other design elements such as photography, color, and page design, the Helvetica font family provides unity and variety, and can serve messages that are both simple and complex.
• Monotype’s Helvetica is a contemporary sans serif based on the International Typographic Style that emerged from Swiss designers in the 1950s and 1960s. It comes with a micro, text and display optical sizes that when paired together, will provide the department a broad and intelligent typographic palette.
• Size: 60px; Weight: Medium H1 Heading Size: 36px; Weight: Bold H2 Heading Size: 24px; Weight: Bold H3 Subheading Size: 20px; Weight: Regular H4 Body Text Size: 16px; Weight: Regular H5 Caption Text Size: 12px; Weight: Regular H6 Detail Text
• Monotype’s Times New Roman is a contemporary serif based on the eighteenth century printing traditions that emerged from British designers in the 1920s and 1930s. It will provide the department a versatile and easily readable typographic palette that is accessible to most computer users.
• Size: 60px; Weight: Regular H1 Heading Size: 36px; Weight: Bold H2 Heading Size: 24px; Weight: Bold H3 Subheading Size: 20px; Weight: Regular H4 Body Text Size: 16px; Weight: Regular H5 Caption Text Size: 12px; Weight: Regular H6 Detail Text
• Helvetica, Light Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zx 1 2 3 4 5 6 7 8 9 0 !@#$%^&( ).,;:/? Helvetica, Regular Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zx 1 2 3 4 5 6 7 8 9 0 !@#$%^&( ).,;:/? Helvetica, Light Italic Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zx 1 2 3 4 5 6 7 8 9 0!@#$%^&( ).,;:/? Helvetica, Regular Italic Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zx 1 2 3 4 5 6 7 8 9 0!@#$%^&( ).,;:/? Helvetica, Medium Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zx 1 2 3 4 5 6 7 8 9 0 !@#$%^&( ).,;:/? Helvetica, Bold Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zx 1 2 3 4 5 6 7 8 9 0 !@#$%^&( ).,;:/? Helvetica, Medium Italic Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zx 1 2 3 4 5 6 7 8 9 0 !@#$%^&( ).,;:/? Helvetica, Bold Italic Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zx 1 2 3 4 5 6 7 8 9 0 !@#$%^&( ).,;:/?
• Times New Roman, Light Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zx 1 2 3 4 5 6 7 8 9 0 !@#$%^&( ).,;:/? Times New Roman, Bold Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zx 1 2 3 4 5 6 7 8 9 0 !@#$%^&( ).,;:/? Times New Roman, Italic Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zx 1 2 3 4 5 6 7 8 9 0!@#$%^&( ).,;:/? Times New Roman, Bold Italic Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zx 1 2 3 4 5 6 7 8 9 0!@#$%^&( ).,;:/?
• Body Copy: For all copy, legibility is key; for body copy it is essential. Be sure that all text can be clearly read, no matter where it is placed on the page. Body copy is all about the information the reader needs. Keep it direct with a strong focus on clarity and legibility. As a guide, body copy should be set (at a minimum) at 9.5 pt with 12 pt leading.
• Always ensure that typography is clean and legible. Consider placement of all copy to ensure there is sufficient white space.
• Minimum Type Sizes (Print): Minimum sizes are subject to the print method chosen for each specific project. As a rule, however, type for print should never go below 9.5 pt.
• Minimum Type Sizes (Web): Digital applications are not subject to the same restrictions as printed materials which have to be physically printable and legible. But care should be taken to maintain legibility and clarity in all digital forms. Minimum type size for web/digital should never go below 12 px.

Logo Usage

• The department logos should always be legible, clear, and noticeable. To maintain full legibility, never reproduce the logo smaller than .25 inches high for print and 30 pixels high for digital. There is no maximum size limit, but use discretion when sizing the logo.
• The sum of the parts can be used as a graphic element in certain layouts without the word mark, as shown below. When used effectively, they can become an extension of the department. However, they should be used on a limited basis so as to not detract from the integrity of the primary lockup.
• Common Usage: The sum of the parts in color gray-scale, black and knock-out white. These would be the most commonly used colors.
• Minimum Sizes: To maintain full legibility, never reproduce the parentheses smaller than .25 inches high for print and 30 pixels high for digital. There is no maximum size limit, but use discretion when sizing the parentheses.

Tone And Messaging

• It is important for MIT to express a single compelling voice in everything we do. The totality of the graphic elements, visuals, and words we use in our communication materials will enable us to represent the unique character of this department—its mission, culture, values, and vision. Adhering to the principles offered in these guidelines will enable us to establish and maintain a clear, unified identity, both within our community and beyond. This document acknowledges the need to properly represent a variety of messages and styles in a manner that maintains a unified graphic system. The purpose of this document is to provide the tools and direction required to create and design any type of communication materials for the department.
• Most design systems are about UNITY. The MIT CEE design system also encourages great VARIETY. The challenge that comes with variety is that it requires more restraint and more invention. Restraint and invention, because we don’t want to overuse any one design element or layout. Locking down on any one template or layout limits the value of the system. We should never feel like we can “predict” what the next page in a book will look like. For example, not all photos should be put into a circle—especially when it crops poorly. Restraint and invention not only will this keep the design wonderfully unexpected, but circumvents the need to make the content conform to a predetermined design format.
• Typography should work in concert with the overall design, photography, information graphics, and writing to help describe and define the department brand identity.
• Consistency in the use of the brand-approved fonts reinforces brand recognition, identity, and allows all communication to speak with a common typographic voice.
• Keep it direct with a strong focus on clarity and legibility.
• Body copy is all about the information the reader needs.

Brand Values

• The MIT Department of Civil and Environmental Engineering’s (CEE) graphic identity is a visual representation of the department—its history, culture, and values. Clear, consistent use of its graphic identity system reinforces department’s reputation throughout the institution, and provides cohesiveness across its many communications efforts.
• It is important for MIT to express a single compelling voice in everything we do. The totality of the graphic elements, visuals, and words we use in our communication materials will enable us to represent the unique character of this department—its mission, culture, values, and vision. Adhering to the principles offered in these guidelines will enable us to establish and maintain a clear, unified identity, both within our community and beyond. This document acknowledges the need to properly represent a variety of messages and styles in a manner that maintains a unified graphic system. The purpose of this document is to provide the tools and direction required to create and design any type of communication materials for the department.
• The selection of the “Helvetica” font family supports the brand identity and is consistent with MIT’s rich history, culture, and values. Because MIT will need to convey a broad range of department messages, typographic consistency will help unify all communications. Helvetica letterforms will resonate with all audiences—students, faculty, and staff—and the global community that interacts with MIT. In combination with other design elements such as photography, color, and page design, the Helvetica font family provides unity and variety, and can serve messages that are both simple and complex.

Visual Style

• The department logos should always be legible, clear, and noticeable. To maintain full legibility, never reproduce the logo smaller than .25 inches high for print and 30 pixels high for digital. There is no maximum size limit, but use discretion when sizing the logo.
• The sum of the parts can be used as a graphic element in certain layouts without the word mark, as shown below. When used effectively, they can become an extension of the department. However, they should be used on a limited basis so as to not detract from the integrity of the primary lockup.
• Common Usage: The sum of the parts in color gray-scale, black and knock-out white. These would be the most commonly used colors.
• Minimum Sizes: To maintain full legibility, never reproduce the parentheses smaller than .25 inches high for print and 30 pixels high for digital. There is no maximum size limit, but use discretion when sizing the parentheses.
• The department color palette is bright and unexpected. Use the color palette across all media and communications.
• PANTONE Medium Blue C CMYK 80/18/0/0 RBG 0/161/222 HEX #00A1DE
• PANTONE Bright Green C CMYK 78/10/43/0 RBG 10/168/161 HEX #0AA8A1
• PANTONE 312 C CMYK 71/16/0/0 RBG 46/171/224 HEX #22A8E0
• PANTONE 7690 C CMYK 85/50/0/0 RBG 27/117/188 HEX #1B75BC
• PANTONE 288 C CMYK 100/93/7/1 RBG 43/56/143 HEX #2B388F
• PANTONE Black C CMYK 60/60/60/100 RBG 0/0/0 HEX #000000
• PANTONE 424 CMYK: 30/22/19/53 RBG: 108/111/112 HEX: #6C6F70
• PANTONE 420 CMYK: 6/4/7/11 RBG: 206/205/203 HEX: #CECFCB
• Gradients should be used sparingly and reduced in colors for certain usages (i.e. photo overlay, digital buttons, and backgrounds). Please use all the colors for wide horizontal space and only two colors for narrow vertical space.
• We suggest viewing your design through color blindness simulation software to confirm typographic legibility for the visually impaired. Color Oracle is a free color blindness simulator for Window, Mac, and Linux. It shows you in real time what people with common color vision impairments will see. Most color deficient viewers are seeing more colors than in the extreme cases below.

Layout And Composition

• Most design systems are about UNITY. The MIT CEE design system also encourages great VARIETY. The challenge that comes with variety is that it requires more restraint and more invention. Restraint and invention, because we don’t want to overuse any one design element or layout. Locking down on any one template or layout limits the value of the system. We should never feel like we can “predict” what the next page in a book will look like. For example, not all photos should be put into a circle—especially when it crops poorly. Restraint and invention not only will this keep the design wonderfully unexpected, but circumvents the need to make the content conform to a predetermined design format.
• The department must stand out. The department logos should always be legible, clear, and noticeable. To maintain full legibility, never reproduce the logo smaller than .25 inches high for print and 30 pixels high for digital. There is no maximum size limit, but use discretion when sizing the logo.
• The sum of the parts can be used as a graphic element in certain layouts without the word mark, as shown below. When used effectively, they can become an extension of the department. However, they should be used on a limited basis so as to not detract from the integrity of the primary lockup.
• Common Usage: The sum of the parts in color gray-scale, black and knock-out white. These would be the most commonly used colors.
• Minimum Sizes: To maintain full legibility, never reproduce the parentheses smaller than .25 inches high for print and 30 pixels high for digital. There is no maximum size limit, but use discretion when sizing the parentheses.