arrow-downarrow-leftarrow-rightarrow-upavatarcameracartchevron-upchevron-leftchevron-rightchevron-upclosecommentemailfullscreen-closefullscreen-opengridheadphonesheart-filledheart-openlockmap-geolocatormap-pushpinmenuminusng-borderpauseplayplusprintsearchsharefacebookgithubg+instagramlinkedinlinkedin_inpinterestpinterest_psnapchatsnapchat_2tumblrtwittervimeovinewhatsappspeakerstar-filledstar-openzoom-inzoom-out

Welcome to Mortar

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.

 

Design Philosophy

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.

 

Documentation

Learn the basics of our design principles below.

color_thumb
Color
typography_thumb
Typography
icons_thumb
Icons
ui_thumb
UI Patterns
layout_thumb_2
Layout
components_thumb
Components
 

Other Useful Links

Working on a project that will live on NationalGeographic.com? Head over to our Confluence site for documentation on how to implement our global navigation bar, global footer, favicons, and more.

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.

 

Send Us Your Feedback

Notice something wrong? Missing? Please send an email to mortar@natgeo.com so we can make this Style Guide more useful for you!