Rest of World Style Guide

Logo and icon

a. Wordmark Logo

We have three variations of logos

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.

Apple iOS

Take a screenshot on your iPhone >

Android

Take a screenshot >

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.

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.