Mortar is the official Style Guide for National Geographic's digital products. To use Mortar, add the following line of code into the header of your project:
<link href='http://style-guide.nationalgeographic.com/latest/site/styles/mortar-default.css' rel='stylesheet'>
<link href='https://fonts.ngeo.com/hoefler/1-0-1/hco_fonts.css' rel='stylesheet'>
Mortar is version controlled, meaning you have to opt in to each release by updating your header with the link above. If you don't want to opt in to the latest version (cited above), you can safely keep your existing Mortar reference.
The styles contained in Mortar reflect National Geographic's overarching design philosophy. We pride ourselves on stunning, world-class visual storytelling. By keeping design elements minimal, we are able to allow our content to drive the visual presentation of our digital products. The design should never feel heavy or overpowering.
Refer to the pages in this site to create a repeatable, visual language for users interacting with the National Geographic brand on any digital platform. Our color palette, typographic styles, icon library, and page grid help to create consistent patterns, clean lines, and beautiful displays for our content.
By standardizing and documenting our design patterns in Mortar, we are striving to create one consistent user experience and brand identity for National Geographic across all of its digital products.
Learn the basics of our design principles below.
To add the favicon to your page, include this line of code in the header of your document:
<link rel="shortcut icon" href="//assets.ngeo.com/favicon/v1/favicon.ico"/>
Learn more about National Geographic's 128-year history, the importance of photography and visual storytelling, and our brand and logo guidelines on the NG Brand Guidelines Site.
Looking for answers on National Geographic's style for grammar and word usage? From abbreviations to zones, the National Geographic Style Manual is the official preferred source.
Notice something wrong? Missing? Please send an email to email@example.com so we can make this Style Guide more useful for you!