Skip to main content
Skip table of contents

Map Body

BrandDocs_Shape_6.png

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

Type

Fill color

Additional specifications

Geographic default

Gray 2 (#E6E7E8; RGB: 230, 231, 232)

  • Use for non-focused and non-filled countries or other geographic units

Geographic default with part focused

Gray 3 (#D1D3D4; RGB(209, 211, 212)

  • Use for non-focused and non-filled areas of countries or other geographic units on maps where at least one country has a partial area that is able to be focused or that is the subject of a static map (e.g. area of concern, trade flow maps) Needs clarification

Geographic focused

White (#FFFFFF; RGB: 255, 255, 255)

  • Use for non-filled countries or other geographic units on live maps that are able to be focused and have user focus, or that are the subject of a static map

Water

Map Water Blue (#BCDAE9; RGB: 125, 203, 234) It is rgb(188, 218, 233)

  • Use for mapped bodies of water including oceans, lakes, rivers

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 White (#FFFFFF) as a background fill.

Type

Phase

Fill color

Additional specifications

Acute Food Insecurity and Acute Malnutrition

None / Minimal

#CDFACD; RGB: 205,250,205

Stressed

#FAE61E; RGB: 250,230,030

Crisis

#E67800, RGB: 230,120,000

Emergency

#C80000, RGB: 200,0,0

Catastrophe / Famine

#640000, RGB: 100,0,0

Famine Likely

#640000, RGB: 100,0,0

Chronic Food Insecurity

None / Minimal

#CDFACD; RGB: 205,250,205

Mild

#CBC9E2; RGB: 203, 201, 226

Moderate

#9E9AC8; RGB: 158, 154, 200

Severe

#6A51A3; RGB: 106, 81, 163

All types

Areas not analyzed

#BDBDBD; RGB: 189,189,189

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.

Color

7 point scale

6 point scale #1

6 point scale #2

5 point scale

4 point scale #1

4 point scale #2

3 point scale

Light Green 500: #689F38, RGB: 104, 159, 56

x

x

x

x

x

x

x

Light Green 400: #8BC34A, RGB: 139, 195, 74

x

x

x

x

x

Light green 300: #AED581; RGB: 174, 213, 129

x

x

Yellow 300: #FFF59DR; RGB: 255, 245, 157

x

x

x

x

x

x

x

Orange 500: #BA6B55; RGB: 186, 107, 85

x

x

Orange 600: #B95A38; RGB: 185, 90, 56

x

x

x

Orange 700: #AB4B1E; RGB: 171, 75, 30

x

x

Red 600: #6D4140; RGB: 109, 65, 64

x

x

x

x

x

x

x

Gray 3: #D1D3D4; RGB: 209, 211, 212

No data

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.

Color

Blue 400: #A6BFE2; RGB: 166, 191, 226

Blue 500: #688CCA; RGB: 104, 140, 202

Blue 600: #426FBC; RGB: 66, 111, 188

Blue 700: #305088; RGB: 48, 80, 136

Purple 700: #492674; RGB: 73, 38, 116

Charcoal 700: #0C1D28; RGB: 12, 29, 40

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 lightest (400) colors 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.

If additional distinctions are needed beyond the data visualization colors, use the map specific colors.

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.

Type

Thickness

Color

Additional Specifications

Administrative Unit 0 boundary (static)

2px (2pt)

USAID Black (#212721)

  • Use for static maps

Administrative Unit 0 boundary (live, Administrative Unit 1 boundaries showing)

2px (2pt)

USAID Black (#212721)

  • Use for live maps where the zoom level is such that Admin 1 boundaries are displayed

Administrative Unit 0 boundary (Live, Administrative Unit 1 boundaries not showing)

1px (1pt)

Charcoal 600 (#3A454C)

  • Use for live maps where the zoom level is such that Admin 1 boundaries are not displayed

Administrative Unit 1 boundary

1px (1pt)

Charcoal 600 (#3A454C)

Administrative Unit 2 or below boundary

1px (1pt)

Charcoal 400 (#7C888D)

Major road

2px (2pt)

Charcoal 600 (#3A454C)

  • Use for primary and trunk roads

  • Always use a solid, non-dashed line

Minor road

1px (1pt)

Charcoal 500 (#555E62)

  • Use for secondary roads

  • Always use a solid, non-dashed line


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, USAID Black (#212721)

Market

Square, USAID Black (#212721)

IDP Camp

  • Square shape with color matching the IPC classification for the camp

    • Use 1 px (1pt) outer border in USAID 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 USAID Black: #212721; RGB: 33, 39, 33. 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

Green 700: RGB(12, 93, 64)

#0C5D40

Light Green 500: #689F38, RGB: 104, 159, 56

Light green 300: #AED581; RGB: 174, 213, 129

Yellow 300: #FFF59DR; RGB: 255, 245, 157

Orange 400: RGB(214, 167, 154); #D6A79A

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 USAID Black (#212721).

Type

Specifications

Large flow

  • Line: Width: 4 pt.; Caps: butt; Joins: miter

  • Marker: Right flow triangle; Size: 14 pt.; Angle: 0

  • At extremities: Extremity: Just end, position: 1.5 pt.

  • Angle to line: check

Medium flow

  • Line: Width: 2.5 pt.; Caps: butt; Joins: miter

  • Marker: Right flow triangle; Size: 10 pt.; Angle: 0

  • At extremities: Extremity: just end; position: 1.5

  • Angle to line: Check

Small flow

  • Line: Width: 1pt; Caps: butt; Joins: miter

  • Marker: Right flow triangle; Size: 7pt; Angle: 0

  • At extremities: Extremity: Just end, position: 1.5

  • Angle to line: check

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 “Light (500)” column.

  • Border: 1pt outer border using the color from the “Dark (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 White (#FFFFFF) background fill and icons use USAID Black Dark (#090B09). For hover state, icons change to Globe Green (#096640). Buttons cast the on-map shadow:

Style name

Color

Blur

X offset

Y offset

Spread

Viz On-Map Shadow

#000000, 25% opacity

10px

0px

1.87px

0px


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: Data Steel Light (#98A9AE)

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

  • Inset map border: 1px (1pt), USAID 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 USAID Black (#212721) with a 1px (1pt) outer stroke in White (#FFFFFF).

Style name

Font

City / Market

9px (7pt) Regular

Capital city

14px (10pt) Regular

Administrative Unit 0

16px (12pt) Bold Now 14

Administrative Unit 1

14px (10pt) Semibold Now 12

Administrative Unit 2

12px (9pt) Semibold

Administrative Unit 3

10px (8pt) Semibold

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.