Map Body

Components

• Map content

  • Fills

  • Lines

  • Labels

  • Symbols

• Scale

• North arrow

• Map inset for focus area, for static maps, if needed

• Buttons, for live maps

• Pop-overs and tooltips, for live maps

Padding and spacing

• Map content reaches the edges of the frame

• For enclosed components:

  • 12px top and bottom padding (What are the advantages of placing them so far from the map edges?)

  • 16px side padding, except buttons when present

  • For buttons, when present:

    • 12px side padding

    • 12px between buttons

Layout and responsiveness

• Scale hugs bottom left

• North arrow hugs bottom right

• For live maps:

  • Map content crops with center focus as width decreases until 609px width is reached, after which map content width and height scale down proportionally

  • Buttons hug top right

  • Buttons stack vertically

Fills

Basic colors

IPC colors

Use for maps that display IPC-compatible analysis.

For Remote Monitoring countries, use the appropriate fill color as a thick inner border that hugs the country boundary. The un-filled center area of the country should use Brand White (#FFFFFF) as a background fill.

Diverging colors

Use these colors for non-IPC maps with a 3 to 7 point diverging scale used as a country fill for a variable (e.g. self sufficiency status). These colors ensure good differentiation for color blindness and grayscale printing.

Sequential colors

This sequence of colors is a neutral option for sequential scales and can be used either as a fill or as symbols. These colors were selected to ensure good differentiation for color blindness and grayscale printing. Other brand colors may be used for sequential scales as long as they achieve good differentiation for color blindness and greyscale display.

Patterns

Data texture

There are 15 data texture patterns available to overlay on color fills to provide additional distinction between fills. Download the .svg files in the data texture patterns folder.

IPC

IPC fill patterns may be found in the data visualizations > IPC folder, including:

• Humanitarian assistance layer (exclamation points)

• Insufficient evidence layer (hexagons)

• Famine likely (diagonal white stripes)

Additional options

Refer to the full data visualization colors to find fill options for non-scale maps (e.g. livelihoods attributes and zones). The 400 shades and lighter have greatest contrast with boundary lines, roads, and other map labels and markings. Using a mix of colors across columns will ensure best contrast for color blindness and grayscale printing.

For livelihood zone maps, use the following colors for livelihood zone types:

• Cropping: Greens

• Agro-pastoral: Olive greens

• Pastoral: Oranges

• Riverine/coastal: Purples

Lines

Styles in this section are for lines that map directly onto geography. For styles associated with symbols and arrows, see those categories.

Symbols

Interface

Marker Name	Icon	Specifications
North arrow		See: Padding and Spacing Layout and Responsiveness

Content

Geographic markers

Files for the symbols for capitals, a north arrow, national parks, and IPC maps can be found in the data visualizations folder.

Marker Name	Icon	Specifications
Capital city (country and regional map)
Capital city (global map)	★
City		Dot, Brand Black (#212721)
Market		Square, Brand Black (#212721)
IDP Camp		Square shape with color matching the IPC classification for the camp Use 1 px (1pt) outer border in Brand Black (#212721)
National park		See data visualizations folder for pattern
Humanitarian Food Assistance ( ≥25% of households met 25-50% of their kcal needs through HFA)		Use for IPC maps
Humanitarian Food Assistance ( ≥25% of households met >50% of their kcal needs through HFA)		Use for IPC maps

Diverging scale markers

Use these symbol and color combinations for non-IPC maps with a 3 to 7 point diverging scale (e.g. commodity price maps and price change maps). All symbols use the fill colors listed in the Right hand column and are outlined in a 1 pt/1 px line using Brand Black (#212721). The up and down direction of the triangles can be switched if that makes sense for the data. Since the symbols aid in differentiation, these colors are as visually different as possible in both color and grayscale within each shape group on a small scale.

Color	7 point scale	5 point scale	4 point scale #1	4 point scale #2	3 point scale
Pine 800: #0C5D40; RGB: 12, 93, 64
Lime 600: #689F38, RGB: 104, 159, 56
Lime 400: #AED581; RGB: 174, 213, 129
Yellow 400: #FFF59D; RGB: 255, 245, 157
Orange 400: #D6A79A; RGB: 214, 167, 154
Orange 600: #B95A38; RGB: 185, 90, 56
Red 600: #6D4140; RGB: 109, 65, 64

Arrows

Use arrows to represent flows. All arrows should be rendered in Brand Black (#212721).

Bubbles

Use bubble layers to represent a variable numerical quantity associated with specific locations (e.g., number of conflicts). Use the following formatting for bubbles:

• Shape: circle 

• Size: Use a size-graduated range with diameters between 4pt minimum and 18pt maximum

• Fill: See full data visualization colors for options. Use any color from the 500 column.

• Border: 1pt outer border using the color from the 600 column that corresponds with the fill color.

Buttons

The on-map zoom buttons are combined into a single visual unit of two vertically adjoined buttons of 36px height each and 40px width. Buttons have 80px corner rounding on the non-adjoined corners.

The on-map expand and download buttons are circles of 40px diameter.

All buttons use Brand White (#FFFFFF) background fill and icons use Brand Black Dark (#090B09). For hover state, icons change to Brand Primary (#096640). Buttons cast the on-map shadow:

Logos

• Two logos should always be present for FEWS NET maps that are not presented inside a FEWS NET web property or official report: the FEWS NET logo on the left (horizontal, 0.5 inch, PNG) and the USAID logo on the right (horizontal, RGB, 294, PNG). Both should be equal size on the map. Both should also have a transparent background. If a map is embedded in a report that is branded with FEWS NET and USAID logos, these maps should not include logos. Logo files can be found in the FEWS NET Logos 2022 folder.

Map inset for focus area

Use inside the map body on static maps when there is a focus area that includes an entire country or countries.

• Country fill: Steel 400 (#98A9AE)

• Highlight box border: 1px (1pt), Orange 700 (#AB4B1E)

• Inset map border: 1px (1pt), Brand Black (#212721)

Typography

FEWS NET visualizations use the Segoe UI typeface unless specified otherwise. Use Open Sans if Segoe UI is not available.

All text for maps uses Brand Black (#212721) with a 1px (1pt) outer stroke in Brand White (#FFFFFF).

Contact us if you have an application question or recommended addition to these standards.