Repository navigation
MIT Technology Review Style Guide
Guidelines to help you align a microsite, partner website, or other affiliate content served to an audience under the MIT brand.
The style guide is a resource for development and design teams of MIT Technology Review’s international partners. This resource provides guidelines for consistency in MIT Technology Review’s brand and user interface elements, patterns, and behavior. This document will be continually updated and maintained as we design and build.
Fundamental building blocks of MIT Technology Review's digital styles.
MIT Technology Review makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.
<!DOCTYPE html>
<html lang="en">
...
</html>
<!--request this from dev team-->
CSS3 introduces a few new units, including the rem unit, which stands for "root em". The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.
html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
<!--request update from dev team-->
The digital version of Helvetica that everyone knows and uses today is quite different from the typeface’s pre-digital design. Originally released as Neue Haas Grotesk, many of the features that made it a Modernist favorite were lost in translation as the designs were reworked for changing typesetting technologies.
In 2011, type designer Christian Schwartz restored the original Neue Haas Grotesk in digital form – bringing back features like optical size variations, alternate glyphs, and refined spacing – and captured much of the warmth and personality of the original.
Neue Haas Grotesk is the most widely used font on the MIT Technology Review website. It's used for navigation, headlines, captions, article lead-ins, pullquotes, metadata, story lists and streams, comments, and other widgets.
Miller, designed by Matthew Carter in 1997, is a “Scotch Roman,” a class of sturdy, general purpose types of Scottish origin, widely used in the United States in the 19th century.
Miller is faithful to the Scotch style though not to any one historical example — and is authentic in having both roman and italic small caps, a feature of the originals.
On our website, we use Miller exclusively for body text.
There are a few different ways we place images.
A story's thumbnail is used in a variety of places across the website including stream pages, various sections of the home page, and related content boxes. To ensure consistency in layout, the aspect ratio of the thumbnails are always 16x9. Because the display width varies depending on how the site is being viewed, we size our thumbnails in the range of 1180–2760 pixels.
Stories can feature images at the top (what we call “toppers”) or in the body of the text. As with our thumbnails, aspect ratios are more important than specific dimensions.
Our site width maxes out at 1380px wide. Because retina displays have double pixel density, always size images as large as possible, up to 2760px wide.
Text links on the MIT Technology Review website are red (hex code #F90E1E). The hover state is a red underline.
Links should always open in the same window or tab, allowing the user to retain control over their navigation and browsing experience. They should never open in a new window or tab.
This style should be used for primary calls to action that initiate some kind of transaction, such as "Buy Now" or "Activate Account".
These smaller buttons are for secondary actions and functions.
Buttons should always open in the same window or tab. Subscribe buttons fill with color in hover state; text arrows animate a couple pixels to the right in hover state.
On the MIT Technology Review website, we use the Stacked Logo. The Stacked Logo should be used in contexts where the simplest or boldest expression is needed, including situations where it will be seen with other logos – such as a listing of event sponsors – and on magazine covers.
The logo must always be used as a supplied graphic file, and never typeset by the user, to ensure that the correct scale relationships and spacing are maintained. The letterforms have been redrawn to work at different scales, so it is crucial that the logo not be recreated from the typefaces.
The areas around the logo should always be kept clear of external graphic elements.
We use the black version of the logo on a white background in the header, and we use the white version of the logo on a black background in the footer.
Consistent use of color enhances the strength of the MIT Technology Review identity. The core color palette consists of red, black, grey, and white. Any extension to the palette anticipates the need for a fuller range of color that works in conjunction with, and potentially in the place of, the core palette.
The width of the MIT Technology Review website is 1180px with the exception of the home page, which is 1380px wide. The desktop layout is based on a 12-column grid. Each column is 80px wide with a 20px gutter between each one.
The website is fully responsive and we have 5 breakpoints:
Icons are used minimally on the website.
We use horizontal rules of varying weight to define space and separate content areas.
<!--request this from dev team-->
Re-usable chunks of modular code that appear as part of TechnologyReview.com as a whole.
<!--request this from dev team-->
<!--request this from dev team-->
<!--request this from dev team-->
<!--request this from dev team-->
<!--request this from dev team-->
<!--request this from dev team-->
Social media sharing icons appear vertically or horizontally.
<!--request this from dev team-->
The primary navigation menu appears at the top of the screen; the supporting navigation is located in the footer.
<!--request this from dev team-->
A promotional element that draws focus to a featured aspect or goal for viewers.
A tease is a preview of a story or group of stories that displays the hed, dek, and thumbnail if we have one.
Web forms allow our users to buy things, communicate with us, and manage their account preferences. They've been designed to provide clear and direct pathways for users to complete tasks.
Standard advertisement sizes and general specs for the most commonly used ads on TechnologyReview.com are as follows:
Leaderboard ads are displayed in the header and footer of most pages on the site. They should appear centered on a gray (#eeeeee) background with 20px of padding on the top and bottom.
Medium rectangle ads are displayed prominently in the right rail of the article body. We have two slots for these ads at the top and bottom of stories.
Half page ads may be displayed in the top slot in the right rail of article.
Combinations of components and elements that are used globally throughout the website.
The top region of the website, the header provides users with a consistent brand, a way to easily navigation the website, a search, and other relevant items.
Similar to the header, the footer is a consistent section of each page in the site that provides additional information, navigation, and content.
Inset audio/visual items, quotes, callouts, and other layout patterns on can be selected from our library of widgets and placed on a story page.
