Rest of World Style Guide

Logo and Icon

Our logo system reflects the flexibility and global sensibility of our brand. It includes a primary wordmark and supporting variants for different contexts and screen sizes. Use this guidance to ensure consistency and clarity across all applications.

Wordmark

Our primary logo is a one-line wordmark. Use this version whenever possible - it represents our brand most directly and is how we want to introduce ourselves to our readers.

Variations

We’ve created three variations with our different diacritics to be readily used.

Note: The last variation doesn’t have any letters with descenders, so it’s used in places where there should be less white space.

Square Icon

For use when our one-line wordmark logo is too wide or not legible. This is primarily used for platform icons and avatars.

The two-line logo should always be displayed in our Cobalt Blue (#242EF7) and white.

The diacritics are not legible when the icon is at sizes less than 100px wide. Use the version without the diacritics for such cases.

Lettermark

The simplified lettermark is reserved for extremely small use cases, such as favicons (less than 32px). The only currently approved case is the Favicon for our website.

Usage

Logos should always be displayed in our Cobalt Blue (#242EF7), white or black. For any exceptions, reach out to the designer.

Typography

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.

Typefaces

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.

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 Georgia.

Georgia

Designed for clarity on a computer monitor even at small sizes, Georgia is a serif typeface that’s often used by online publications for their body text. It takes the complexity of more traditional serif characters and makes them comfortable to read on-screen with its large x-height and thicker strokes. It is also a web-safe font, pre-installed on most browsers and devices regardless of operating system.

Note: We moved away from GT Sectra in favor of Georgia.

Typeface Hierarchy

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

Georgia Regular

Georgia Italic

Georgia Bold

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 Georgia as the DEK. When the DEK is overlaid onto an image, as in Featured Story Templates, use Moderat Regular, because Georgia is lighter in weight.

Headings: Always use Moderat Bold.
‍
Paragraph copy: Always Georgia.

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

All brand communications use Moderat exclusively.

Fonts

Moderat Bold

Moderat Regular

Guidance

Even for paragraph text, we use Moderat to distinguish our brand communications from our journalism.

UI Fonts

Use Input Mono for all system labels, buttons, and prompts.

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

Color Palette

Our visual identity is anchored in a distinct blue-based palette, with accents that bring flexibility and cultural richness. Color usage should be intentional, accessible, and brand-consistent.

Primary

COBALT #242EF7

Our primary color Cobalt is a bright blue that is as attention-grabbing as it is trustworthy and steadfast. Its vibrancy feels modern, reminiscent of technology like digital screens. We should always try to include Cobalt in our branding, even if a dash.

Secondary

GLACIER #E4F3F7

MIDNIGHT #0B2566

Our secondary colors are the supporting characters to our Cobalt. On opposite ends of brightness, these shades of blue help ground the vibrant primary color.

Accent

LOTUS #FFBEF0

MAGENTA #BA0582

MINT #66FFB2

YUZU #FFFD8D

AJI #FF691F

These accent colors complement the blues and help infuse more warmth, contrast and variety into our designs.

Dos

Use the blues for large areas like module fills.

Reserve Cobalt for designs meant to command the user’s attention due to its vibrancy.

Otherwise stick to Glacier or Midnight which are easier on the eyes.

Always check contrast.

Don'ts

Accent colors shouldn’t clash with the Cobalt — use in smaller amounts since they’re also bright and saturated.

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

WHITE #FFF

Black

BLACK #000

Grays

PUMICE #CACACA

ASH #555

BASALT #262626

CHARCOAL #111

Dos

The combination of the primary 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 primary color.

Don'ts

Never use darker grays as rules unless it’s dark mode; only use #CACACA.

Dark Mode

Only a small portion of our users browse in dark mode. Our approach prioritizes simplicity and low overhead - we support dark mode through basic palette mapping rather than custom theming.

Dark Mode Primary

AQUA #9EE9DF

Dark Mode Secondary

ASH #555

GLACIER #E4F3F7

Dark Mode Accent

MAGENTA #BA0582

LOTUS #FFBEF0

MOSS #389B7A

TURMERIC #F0D522

CANYON #CE7448

Accessibility

Check contrast ratios for text and background combinations. They should at least meet the Web Content Accessibility Guidelines (WCAG) 2.1 at Level AA. Never place black text on Cobalt and use white text instead.

Diacritics

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 — use brand colors or opacity treatments.

Ready-to-Use Patterns

Components

Buttons

Our buttons come in two main styles: solid and outline. They use a consistent type treatment and react visually across different states.

Solid

Default

Hover/Pressed

Focus

Outline

Default

Hover/Pressed

Focus

The hover state will always invert the current style (e.g. solid becomes outline), and the pressed state is the same as the hover state. The focus state adds a dashed 1px border around button.

Button Styles

width: 85px;
padding: 0 10px; /* 0 20px */
border-radius: 3px;
border: 1px solid #242EF7;
cursor: pointer;
transition: background-color ease-out 150ms,
            color ease-out 150ms;

Text Styles

font-family: 'Input Mono', monospace;
font-size: 12px;
line-height: 30px;
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;

Modules

Our modules are rounded rectangles using the different blues from our color palette. For example, we might use Cobalt #242EF7 for a design that needs to grab attention like a notification alert. Meanwhile, our lighter blue Glacier #E4F3F7 would be better for a module that should blend in more seamlessly with the page.

20px 20px

TitleModerat Bold 20px

Body textModerat Regular 16px

Module Styles

border-radius: 5px;
padding: 20px;
background-color: #E4F3F7, #242EF7, #0B2566

Links

Links should be visually distinct, accessible, and consistent across the site. Underlines are our primary affordance for indicating links, with exceptions based on context and hierarchy.

Inline Links

Links within paragraph text are always underlined.

The default underline color is Cobalt #242EF7.

An alternative underline color may be used only when background contrast makes Cobalt difficult to see.

But I think, Mr. Frodo, I do understand. I know now. Folk in those stories had lots of chances of turning back. Only they didn’t, because they were holding on to something…That there’s some good in this world, Mr. Frodo. And it’s worth fighting for.

Navigation and UI Links

Links within navigation menus, standalone UI elements, or recirculation headlines do not need to be underlined by default.

In these contexts, hierarchy, placement, and typography are sufficient to indicate interactivity.

States

The hover state shows an underline and changes color (generally to Cobalt), with a transition of 150ms ease on the color change. The exceptions are headlines and deks within recirculation components, which do not require an underline on hover (e.g. Homepage or Most Popular module).

We do not support visited states.

Miscellaneous

Bullet Points

Bullet points use dots in our primary color Cobalt.

Dismiss Button

Our dismiss buttons are represented by an X and have a minimum tap target of at least 35px (44px meets WCAG 2.1 at Level AAA). The hover state changes the button to a darker color with a black overlay of 40%.

Default

Hover/Pressed

Focus

Image Guidelines

Specificiations

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.

File sizes

Where possible compress images before upload and do not upload images greater than 3MB to the Media Library

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 case, you would naturally avoid these formats unless there was a unique circumstance: PDF, GIF.

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 >

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:

Filename

Better filename

Rakesh_Color-Jane_Profile_v6.jpg

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:

Filename

Better filename

Screen Shot 2020-08-03.png

screenshot-facebook-safari-desktop.png

IMG_7242.PNG

screenshot-ios-whatsapp-keyword.png

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.

Licensing and
Partnerships

Republication and Licensing Guidelines

Rest of World allows certain articles on our site to be republished by other newsrooms, publications, or other entities. Articles marked “News” or “Reports” that have been live on our site for at least one week may be republished. Features or special projects are not available for republishing at this time.

Nonprofit newsrooms, publications, or other entities may republish articles free of charge; for-profit newsrooms, publications, or other entities may license articles for a one-time fee. In either case, please contact us at hello@restofworld.org to complete an agreement and, in the latter case, learn more about our licensing fee tiers.

Any republished or licensed content must include the following:

This tagline at the top of the republished article:
“This article was originally published by Rest of World, a nonprofit newsroom covering the effect of technology outside the West.”
In the tagline above and/or at the end of the article, include a link to https://restofworld.org
For print-only versions please write the URL out "restofworld.org" (not "www.restofworld.org")
The author or authors’ name(s) clearly credited.

Photography and Illustrations

Photography and illustrations created for Rest of World may also be republished or licensed for use with associated articles under the same conditions as above. Photos and illustrations may be used for social postings, print or digital, and in perpetuity with strict adherence to crediting guidelines, and only in association with articles specified under each license. Please contact us, as above, for the licensing fee tiers for each piece of art you are interested in republishing.

Any republished or licensed photographs or illustrations must include the following:

Credit line must read “Photography by [name] for Rest of World” or “Illustration by [name] for Rest of World”

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.

Changelog

Created June 3rd 2022 and last updated on January 12th 2026.

2025

Brand palette simplified and consolidated
New component guidelines introduced

2024

Georgia added as primary body font
GT Sectra retired

2022

Initial version (archived copy)