Logo and icon
a. Wordmark Logo
b. Tagline
Dos
Use the tagline on page where it is likely a reader's first time to the brand.
When possible, use the tagline at the beginning of the page but collapse after scrolling.
Always place the tagline below the logo.
Don'ts
For recurring surfaces like the newsletter, we don't need to repeat the tagline.
The tagline does not need to be persistent across the page.
b. Icon
When our one-line wordmark and logo is not legible, use the two-line icon. This is primarily used for social icons and avatars.
Dos
Rotate through different color palettes in different applications. In other words, Twitter, Facebook, LinkedIn should have different colors.
Don'ts
Do not use the diacritics that appear in our wordmark.
Typography
a. Typefaces
Words are most of what we do, and they are how readers will consume our journalism and use our site. Type is the main medium in which we tell our stories and communicate our brand. Readers also learn how to use our site through the different fonts we employ, and every one has a role to play on our site. And every font has a personality. Choosing a typeface is like casting an actor in a play, and combining them is like evaluating if these actors have chemistry. We are essentially casting characters to help tell our stories.
Moderat
Moderat can hold up a serious story and a playful one. Its geometry and evenness gives it a sturdy quality, and its roundedness can be playful. The bold weight makes for great headlines, and the light weights are still readable. Its features are subtle: the little serif on the a, the corner in the t, the g’s, which are quite fun. Our stories, while technological in their focus, are human at their core. Some sans serif fonts can be a bit cold/plain and lack personality. However, these tiny qualities of Moderat give it some humanity.
GT Sectra
GT Sectra is easy to read as a body text. On closer inspection, you’ll see the personality of GT Sectra. It has sharp corners, clever angles, and straight lines where other fonts have curves. In its italic form, it does not look overly formal, like Baskerville or Georgia. GT Sectra comes in different weights and sharpnesses, offering a lot of flexibility. In its least sharp form, it is subtle, and in its sharpest and italics forms, it is incredibly distinct.
Input Mono
Input Mono is a typeface designed for coding. For UI, it is a readable type even at its smallest accessible size (10pt). In its all-caps version, allowing for wider kerning and tracking (space between letters), it is distinct but better used as a supporting character to Moderat and GT Sectra.
Moderat is a round sans with even strokes, whereas GT Sectra Regular is an angular serif with a light contrast in thick and thin strokes. The combination of round, even, angular, and high-contrast qualities can be dynamic. The roundness of Moderat and the angularity of GT Sectra complement our logo and its various diacritics. Despite their different qualities, they have similarities in certain characters most notably in the a’s, g’s, and y’s.
b. Typeface roles
There are three sets of roles for typography: Story, Brand, and UI.
Story Fonts
Stories are made up of a wide array of different elements, from headlines to captions, bylines to pull quotes. Story fonts use all of the fonts available.
Fonts
Moderat Bold
Moderat Regular
GT Sectra Book
GT Sectra Book Faux Bold
GT Sectra Italic
Input Mono Regular
Input Mono Faux Bold
Guidance
HEDs: Whether headlines are on the homepage or a story page, HEDs are always in Moderat Bold.

DEKs: When possible, use GT Sectra as the DEK. When the DEK is overlaid onto an image, as in Featured Story Templates [link later], use Moderat Regular, because GT Sectra is lighter in weight.

Headings: Always use Moderat Bold.

Paragraph copy: Always GT Sectra.

Kickers: Use Input Mono.

Captions and credits: Use Input Mono.

Data: When data is presented in focus, as in a chart or visualization, use Input Mono for the data points. For chart headings, use Moderat.
Brand Fonts
When we communicate as a brand and organization, we use Moderat.
Fonts
Moderat Bold
Moderat Regular
Guidance
Even for paragraph text, we use Moderat to distinguish our brand communications from our journalism.
UI Fonts
For UI, user prompts (“Share,” “Sign Up,” etc.), we use Input Mono.
Fonts
Input Mono Regular
Input Mono Faux Bold
Guidance
Use Input Mono for links when appropriate. For story/content links, sometimes Moderat is preferable, as in the case of navigation-menu links.
Color
a. Color Palettes
Our stories span the globe, and we want our site experience to feel immersive, and to capture the vibrant diversity of the countries we cover.
Blue Palette name
var(--bright)
var(--body)
COBALT
#0043EF
PEACH
#ffe0e0
DAWN
#FFF3F3
Red
VERMILLION
#D74E45
PERIWINKLE
#E3EEFF
BREEZE
#F3F7FF
Green
SACRAMENTO
#0DCC6C
ORCHID
#FFE3F4
ASH ROSE
#FFF3FA
Orange
CLEMENTINE
‍#EF7F31
MINT
#E3FFF0
FOG
#F3FFF9
Teal
ROBIN EGG
#5FC9AF
LAVENDER
#F4E3FF
LILAC
#FBF3FF
Magenta
PEONY
#D231A0
FROST
#E3FFF7
CLOUD
#F3FFFC
Dos
Try to match the color palette with the tone and imagery of a specific project.
Use the middle color (e.g., “Peach” or “Frost,”) to call attention or create a visual separator. The middle color is also used when there is an overuse of lines to separate different items or groups.
Don'ts
Don't mix multiple color palettes within a single viewport, unless it's a special project warranting surprise and delight – a confetti-like effect.
Don't use the middle color (e.g., “Peach” or “Frost”) as the main background color for the page.
Whites, grays, and blacks
White and black is used for text for maximum contrast and items of the highest visual hierarchy. Different levels of gray are used, sometimes as rules and in text.
White
#FFF
Gray-3
#262626
Black
#000
Grays
#CACACA
Gray-2
#555
Gray-4
#111
Dos
The combination of the accent color, dark gray, darkest gray, and black are used in displaying article data: kicker/rubric, headline, dek, byline.
Most rules and lines are either in light Gray or black and sometimes in the accent color.
Donts
Don't use black text on an accent color background. Always use white text on the accent color.
Never use darker grays as rules; only use #CACACA.
Diacritics
a. Marks
More commonly known as accent marks, these glyphs are used in many languages to change the sound value of a word. For example, the cedilla (as in ş) is used in Turkish, French, Portuguese and several other languages. The circumflex with the underdot (ộ) is less common, and appears in Vietnamese. This visual element playfully reflects the creative nature of our brand, and the incredible variety of cultures and communities we cover around the world. While most prominently featured within our logo, they also appear throughout our site and off-platform in various ways as patterned banners, alternative menu icons, story chapter separators, and more.
Dos
Create a pattern by limiting the use of diacritics within each viewport or experience.
Try playing with the outline or opaque versions of these marks.
Don'ts
Never use diacritics in black.
b. Banners and Rules
Diacritics are occasionally used as banners or rules, which can often be used as a separator of content.
Do's
Use one diacritical mark per banner.
Play around with different grids for the patterns: rectangular grids, staggered grids, rotation, etc.
Use them with the right color palettes.
Don'ts
Within one page or experience, try to limit use to one banner to avoid busyness of the page.
Image Guidelines
a. Specifications
File-formats
Preferred file formats are:
JPEG/JPG (preferred)
PNG (lossless, 24-bit format or higher)
Landscape
For landscape photos/illustrations (wider than tall):
16:9 aspect-ratio
Width greater than 4096 pixels
Portrait
For portrait photos/illustrations (taller than wide):
9:16 recommended
Width greater than 2048 pixels
Aspect Ratio
Track to aspect ratios only as it makes sense for your work.

Be mindful of critical details that fall close to edges. Where automated cropping may occur (thumbnails, etc.), padding images with appropriate filled background color can help.

Custom: Some features have specific design needs that dictate a focus on a specific aspect ratio. For example, our "Been There Built That” interview series uses illustrations in a 1:1 aspect ratio.
Screenshots
See more detailed guidelines for screenshots below.
Filenames
Meaningful filenames are appreciated. See more detailed guidelines below.
Fallback
When in doubt, send the largest image you have :)
b. File-formats
PNG and JPG formats are preferred, but please use the format that makes most sense. In general, high-quality lossless options should always be used. If the image contains transparency, then a PNG must be used.

There are times when SVG (vector-based images) should be used and other times when PSD files should be provided (layer information required).

In most cases, you would naturally avoid these formats unless there was a unique circumstance: PDF, GIF.
c. Screenshots
The foregoing guidelines don't apply to screenshots, which are beholden to the device on which they are taken and its operating system.
d. Filenames
The name of the file is very often what is used when it is uploaded. File names thus have consequences when it comes to search engines, accessibility, and general readability.
 
A good file name avoids ambiguous words, underscores, spaces, capitalization, and numbers.

Examples:
Rakesh_Color_Jane_Profile_v6.jpg
Filename
Better filename
rakesh-jane-profile.jpg
03Conversation-square-FINAL.JPG
conversation-vienna.jpg
RT_DP3HEALTH-CORONAVIRUS-VIETNAM.jpg
health-coronavirus-vietnam.jpg
We recommend using the name of the agency or photographer/illustrator as the file’s leading keyword.

There are different guidelines for screenshots.

Screenshots should be provided unmodified and in their original form. 
Please rename screenshots to include information such as device and keywords (browser and site name or app name, etc.). When a filename has spaces (" ") or underscores ("_"), please replace them with dashes ("-").

Examples:
Screen Shot 2020-08-03.png
Filename
Better filename
screenshot-facebook-safari-desktop.png
IMG_7242.PNG
screenshot-ios-whatsapp-keyword.png
e. EXIF Data
Exchangeable Image File Format (EXIF) is  embedded into an image file when a photo is taken. It often contains information such as aperture size, shutter speed, ISO, focal length, camera model, the date the photo was taken, and other details.

We use/mine EXIF data to pre-populate captions, descriptions, and credits in our content-management system.

For some photographs, it may be appropriate to remove sensitive information to a source’s protect privacy or location. If a photo is potentially sensitive and you are unsure how to modify its EXIF data, please let us know.
Important Miscellany
a. Borderless, when possible
Like the internet. What does this mean?
a. Hello World_
Our blog
a. Alignment
TK
Licensing and
Partnerships
a. Co-publishing stories
Rest of World regularly publishes stories — both original and in translation — in partnership with publications around the world. If you would like to co-publish a story either your team or Rest of World is working on, please send a note to hello@restofworld.org with “co-publishing a story” in the subject line, along with details about your publication, the types of stories you are broadly looking to publish, and your guidelines for publication.
b. Licensing guidelines
Any licensed content must include our full name — Rest of World — and either a live link to our site, restofworld.org, or a written URL for print-only versions.

The author must be clearly credited by name.

Please contact us to learn more about our licensing fee tiers.
c. Photography
Photography created for Rest of World may be licensed for use with associated stories. Photos may be used for social postings, print or digital, and in perpetuity with strict adherence to credit and only in association with articles specified under each license. 

Credit line must read “Photography by [name] for Rest of World.

Please contact us for the licensing fee tiers.
d. Social Promotion
In any promotion on social platforms or newsletters, our relevant social handle should be tagged (e.g., Twitter promotion must tag @restofworld).

Writers and photographers involved in a story should be credited in any social promotion. If they have relevant social accounts, they should be tagged.

To ease cross-promotion, licensing partners must follow our social accounts.
^ BACK TO TOP
Can't find what you're looking for or require more guidance? Reach out to jody@restofworld.org.
For general inquiries, please contact hello@restofworld.org.