
Usage
General
Axes
Colors
Components
-
Chart content frame
-
Lines
-
Bars
-
-
Axis titles
-
Y-axis labels
-
Text
-
Tick
-
-
X-axis labels
-
Text
-
Padding and spacing
-
Chart body fills full width of the visualization frame
-
Chart body height is fixed to the minimum height necessary to clearly convey the relevant data
-
0px top
-
8px bottom
-
16px when x-axis title is present
-
-
52px right side
-
16px when y-axis title is present
-
-
16px left side
-
16px horizontal between y-axis title(s) and y-axis labels
-
2px horizontal between y-axis label and tick
-
13px horizontal padding between left- and right-most x-axis labels and y-axes
-
8px vertical between x-axis and x-axis labels
-
24px between x-axis labels and x-axis title, when present
-
60px minimum vertical space between y-axis labels
Layout and responsiveness
-
Chart content frame width and height fills full space available
-
Y-axis titles are vertically centered to y-axis
-
X-axis title is horizontally centered to x-axis, when present
-
Equal vertical space between each y-axis label
-
Equal horizontal space to the left and right of each x-axis label
-
Left-side y-axis label text hugs right, right side text hugs left
-
Y-axis label text is vertically centered to y-axis tick, including bottom “0” label and top label
-
Chart content frame scales down horizontally as width decreases until 609px width is reached, after which width and height scale down proportionally.
-
Note axis titles and labels remain the same size
-
Fills
Chart content background
Every chart should have rows of alternating colors to delineate divisions of y-axis values. Colors should alternate between Brand White (#FFFFFF) and Gray 150 (#FAFAFA).
Data
When representing data series using lines or bars, use colors in the following order. These colors were chosen to ensure the best possible contrast for 6 lines against each other and a White/Gray 150 fill.
Charts should not contain more than 6 line/bar colors (see Charts usage guidance). 10 additional colors are included in the sequence for rare cases where more than 6 colors are needed.
Order |
Color style name |
Hex value |
RGB value |
---|---|---|---|
1 |
|
#426FBC |
66, 111, 188 |
2 |
|
#319B86 |
49, 155, 134 |
3 |
|
#3A454C |
58, 69, 76 |
4 |
|
#BA6B55 |
186, 107, 85 |
5 |
|
#7A5A5A |
122, 90, 90 |
6 |
|
#55747E |
85, 116, 126 |
7 |
|
#707257 |
112, 114, 87 |
8 |
|
#A173B3 |
161, 115, 179 |
9 |
|
#305088 |
48, 80, 136 |
10 |
|
#107157 |
16, 113, 87 |
11 |
|
#555E62 |
85, 94, 98 |
12 |
|
#B95A38 |
185, 90, 56 |
13 |
|
#6D4140 |
109, 65, 64 |
14 |
|
#6A8188 |
106, 129, 136 |
15 |
|
#60613A |
96, 97, 58 |
16 |
|
#784595 |
120, 69, 149 |
Lines
Type |
Thickness |
Color |
Additional Specifications |
---|---|---|---|
Axis |
1px (1pt) |
Gray 500 (#ADADAD) |
|
Y-axis tick (left of axis) |
1px (1pt) |
Gray 500 (#ADADAD) |
|
Y-axis tick (right of axis) |
1px (1pt) |
Gray 400 (#D1D3D4) |
|
Line (Data) |
4px (3pt) |
See Fills > Data |
|
Typography
FEWS NET visualizations use the Segoe UI typeface unless specified otherwise. Use Open Sans if Segoe UI is not available.
Style name |
Font |
Line height |
Color |
Additional specifications |
---|---|---|---|---|
Axis title |
16px (12pt) Semibold |
120% |
Brand Black Dark (#090B09) |
|
Axis label |
14px (10.5pt) Bold |
120% |
Brand Black Dark (#090B09) |
|
Contact us if you have an application question or recommended addition to these standards.