Escolar Documentos
Profissional Documentos
Cultura Documentos
FOREWARD
pie charts
scatter plots
maps
Basic Structure
650px max for a regular blog post (900px max for a feature post)
EXAMPLE
12px
100px
22px
Background color:
Background Light
(#F5F3F2)
22px
30 units
5px
Y Axis Title
22px
20 units
22px
10 units
1px white (#FFFFFF)
0
1px 4pt dash 4pt
gap Line Grey 80%
(#CDCDC9)
Label 1
5px
Label 2
Label 3
Label 4
22px
X Axis Title
22px
22px
Source: www.fruitsperbushel.com
Text Styles
Header Title with emphasis
ITC Franklin Gothic Std | Book Condensed with Demi Condensed emphasis | 20px | Left Aligned | #635F5D (Text Main)
ITC Franklin Gothic Std | Demi | 12px | centered on line | #635F5D (Text Main)
ITC Franklin Gothic Std | Book | 12px | centered | #635F5D (Text Main)
Key labels
ITC Franklin Gothic Std | Book | 10px | left aligned | #635F5D (Text Main)
Callout text
Point Label
Source: www.fruitsperbushel.com
ITC Franklin Gothic Std | Book | 10px | right aligned to point | #635F5D (Text Main)
Georgia | bold title with italic text | 8px | left aligned | #8E8883 (Text Light)
Background Colors
Base Colors
Background
CMYK: 5, 5, 5, 0
CMYK: 2, 2, 2, 0
CMYK: 9, 8, 8, 0
Hex: #EFECEA
Hex: #F5F3F2
Hex: #E5E2E0
Text Main
Text Light
CMYK: 59, 54, 54, 25
Hex: #635F5D
Hex: #8E8883
Line White
CMYK: 0, 0, 0, 0
Hex: #FFFFFF
Hex: #C0C0BB
Data Colors
Main Colors
a thing
a different thing
No Data
neutral thing
CMYK: 9, 8, 8, 0
Hex: #E3BA22
Hex: #E6842A
Hex: #137B80
Hex: #8E6C8A
Hex: #978F80
Hex: #E5E2E0
CMYK: 6, 9, 78, 0
Hex: #F2DA57
Hex: #F6B656
Hex: #42A5B3
Hex: #B396AD
Hex: #C1BAA9
Hex: #BD8F22
Hex: #BA5F06
Hex: #005D6E
Hex: #684664
Hex: #7C715E
Specialty Colors
Republican
Democrat
Independent
Con
Pro
Money
Hex: #9A3E25
Hex: #156B90
Hex: #708259
Hex: #BD2D28
Hex: #0F8C79
Hex: #5C8100
a subset of Republican
a subset of Democrat
a subset of independent
a subset of Pro
a subset of Con
a subset of Money
Hex: #B37055
Hex: #688BAB
Hex: #95A17E
Hex: #E25A42
Hex: #6BBBA1
Hex: #A0B700
EXAMPLE
Possible label:
Fill: White (#FFF)
Line: Line Grey
(#C0C0BB)
Day with the most
Granny Smith
Apple production
30 units
Y Axis Title
20 units
Possible line:
1px 4pt dash 4pt gap
Line Grey
10 units
Possible label:
Fill: White (#FFF)
Line: Line Grey
(#C0C0BB)
amount of unique
fruits needed to fill
a bushel
Honey Crisp
Apples
Granny Smith
Apples
Clementine
Oranges
Navel Oranges
Monday
Starts at 0
Source: www.fruitsperbushel.com
Tuesday
Wednesday
X Axis Title
Thursday
Friday
Possible Key:
Fill: Background dark
Accent (#E5E2E0)
Line: Line Grey
(#C0C0BB)
Honey
Crisp
Granny
Smith
Clementine
Navel
Monday
12
10
Tuesday
Wednesday
18
12
Thursday
15
10
Friday
22
1994
1995
EXAMPLE
$3,000
Republican
Democrat
Y Axis Title
$2,100
$2,000
2px of color
$1,000
$1,090
$930
$710
$590
0
2000
Starts at 0
Source: www.fruitsperbushel.com
2010
X Axis Title
2020
Republican
Democrat
1990
1991
1992
1996
13
1994
15
1995
17
EXAMPLE
Pro (94%)
Con (5%)
Other (1%)
1px stroke
#FFFFFF white
Source: www.fruitsperbushel.com
Con
Other
94
EXAMPLE
6,000
Y Axis Title
5,000
FirstName
LastName
FirstName
1px Line Grey with LastName
1px white line inside
possible
trend line: 1px 4pt
dash 4pt gap Line
Grey
Firstname LastName
FirstName LastName
FirstName
LastName
4,000
5px
Source: www.fruitsperbushel.com
10
20
X Axis Title
30
40
variable 2
7.560309668
48.87193277
8.569477057
57.70873996
5.178854559
35.50990599
5.044602676
31.94896911
7.629095533
49.76954493
6.631379
46.66529366
7.035723733
45.68632108
8.152163624
57.46279438
EXAMPLE
6,000
Apples
FirstName
LastName
FirstName
LastName
Oranges
Pear
Y Axis Title
Papaya
5,000
4,000
FirstName
LastName
10
20
X Axis Title
Source: www.fruitsperbushel.com
30
Possible Key:
Fill: Background dark
Accent (#E5E2E0)
Line: Line Grey
(#C0C0BB)
Change both color
and shape if possible
(helps with sight
issues)
variable 1
variable 2
7.560309668
48.87193277
8.569477057
57.70873996
5.178854559
35.50990599
5.044602676
31.94896911
7.629095533
49.76954493
6.631379
46.66529366
7.035723733
45.68632108
8.152163624
57.46279438
EXAMPLE
More Republican
#712422
#9A3E25
#B37055
#D9A78D
More Democrat
#05426C
#156B90
More Republican
#9A3E25
#688BAB
#8CAEC6
50/50
#D9A78D
#C8C6C6
#8CAEC6
Less Republican
No data
Anti
#EDCEBC
#E5E2E0
#BD2D28
Less Democrat
No data
More Money
#BAD2E2
#E5E2E0
#0C4E00
More Democrat
No data
More Thing
#156B90
#E5E2E0
#936B00
50/50
#C37A73
#5C8100
#C8C6C6
#A0B700
Pro
#75A999
#D2CF00
#0F8C79
#E5E2E0
Less Money
No Data
#E6E4A6
Less Thing
#BD8F22
#E3BA22
#F2DA57
No Data
#F1E8AE
#E5E2E0
No Data
#E5E2E0
#F2DA57
#F6B656
#E25A42
#DCBDCF
#B396AD
#B0CBDB
#33B6D0
#7ABFCC
#C8D7A1
#A0B700
242, 218, 87
244, 182, 86
226, 90, 66
160, 183, 0
#E3BA22
#E58429
#BD2D28
#D15A86
#8E6C8A
#6B99A1
#42A5B3
#0F8C79
#6BBBA1
#5C8100
227, 186, 34
229, 132, 41
189, 45, 40
92, 129, 0
#B08B12
#BA5F06
#8C3B00
#6D191B
#842854
#5F7186
#193556
#137B80
#144847
#254E00
176, 139, 18
186, 95, 6
140, 59, 0
109, 25, 27
132, 40, 84
25, 53, 86
20, 72, 71
37, 78, 0