DESIGNGUIDE

Bureau of Educational and Cultural Affairs

The Bureau of Educational and Cultural Affairs works
to increase mutual understanding between the people
of the United States and the people of other countries
by means of educational and cultural exchange that
assist in the development of peaceful relations."
 3

INTRODUCTION
ECA DESIGN GUIDELINES
The ECA Design Guide was created in an effort to streamline and standardize design and branding
for the Bureau of Educational and Cultural Affairs. This guide includes important design guidance
about the U.S. Flag, State Department Seal, digital product formatting, 508 compliance, and ECA
program logos.

Files of the flag, seal, and program logos can be downloaded digitally from this guide. By clicking on
the Box Link button, you will be able to download the content you need.

We hope this guide helps you design beautiful and functional materials for your office or program! If
you need to fill out a design request please click here.
ECA DESIGN GUIDLINES

TABLE OF
CONTENTS
SECTION 1 | U.S. FLAG SECTION4 | DIGITAL ENGAGEMENT
PAGE 5–15 • The Flag PAGE 26–33 • Websites
• Color • Social Media
• Scale • Video

• Photo
SECTION 2 | STATE DEPT SEAL
PAGE 16–23 • The logo
SECTION 5 | 508 COMPLIANCE
• Color
PAGE 34–37 • What is 508
• Typeface
• Text

SECTION 3 | ECA COLOR GUIDE • Color

PAGE 24–25 • Primary

SECTION 6 | ECA PROGRAM LOGOS
• Secondary
PAGE 38–43 • A-C

• D-N

• O-Z
01 U.S. Flag

The Flag 06

Color 07

Scale 11
6

The Flag
Flag Specifications
The U.S. flag is arguably one of the strongest and most recognizable symbols in the world. It
represents U.S. national values and cuts across cultures and languages.

The Department of State spends billions of dollars each year administering a broad array of
programs and activities overseas. As part of this investment, it is important that the Department
appropriately highlight and inform audiences about U.S. partnership and sponsorship of programs,
our provision of humanitarian, economic, technical, and other types of assistance, and our efforts to
address issues of common interest.

Please note that ECA requires both the flag and Department of State seal on all print materials.
Exceptions will made for items that are too small or otherwise unsuitable to include these logos,
such as pencils, pens and USB drives. For additional guidance visit our website.

The basic design of the current flag is specified by 4 U.S.C. § 1. The specifications are below.

• Hoist (width) of the flag: A = 1.0 D

• Fly (length) of the flag: B = 1.9

• Hoist (width) of the Union: C = 0.5385

• Fly (length) of the Union: D = 0.76 C

• Width of stripe: E = 0.0769

(A/13, One thirteenth of the flag width) A

B
 7

Colors
The RGB, CYMK, and Pantone equivalents of U.S. Flag colors are
provided below. These are the only colors that can be used to make
up the U.S. Flag. As always you should proof any print jobs for
color consistency.

OLD GLORY BLUE OLD GLORY RED WHITE

COLOR CODES COLOR CODES COLOR CODES

CMYK : 100,68,0,54 CMYK : 0,100,66,13 CMYK : 0,0,0,0
Pantone : 282C Pantone : 193C RGB : 255,255,255
RGB : 10,49,97 RGB : 179,25,66
8

1) Full Color Version

CORRECT VERSIONS OF THE FLAG
For primary use
There is Only One True U.S. Flag. While there may be many iterations
available from various resources, the correct files can be downloaded 2) Black & White Version
from this document. Color, grayscale, and black and white images are For use when the background is a solid color or when
available at this resource site. Always use the full flag. other logo colors clash.

3) Grayscale Version
For use when the background is a solid color or when
other logo colors clash.

Box Link

CORRECT FULL CORRECT BLACK AND CORRECT

COLOR VERSION WHITE VERSION GRAYSCALE VERSION
 9

COLOR USE

As seen in these examples, the

color U.S. flag best works on white
or neutral colored backgrounds.
The black/white and grayscale
flag options should be used on
design material with backgrounds
of similar color that may cause
the U.S. flag to bleed into the
background color. They also work
better on background colors that
may clash with the U.S. flag colors.

Designers should ultimately use

their judgement and choose the
version that works best with the
design product to ensure that the
flag is well pronounced.
10
 11

Scale
The flag should be clearly and easily identified as the U.S.
flag. The proportion of the flag must remain consistent. Do
not scale the flag horizontally or vertically; only keep the
horizontal-vertical aspect ratio locked when you are resizing
the flag for publications, signage, or online use.

ORIENTATION
The flag must always appear in absolute horizontal or absolute
vertical orientation. When displayed horizontally or vertically
the union is always at the top-left.
12

SPACE AROUND THE FLAG

Always reserve a cushion of open space around the U.S. flag. The
height of 3 flag stripes, known as the x-height, is the minimum
amount of clear space to provide around the flag. This includes,
for example, space between the flag and other logos, flags, text,
color fields, and the edge of a page, screen, or printed area.

x-height

x
 13

SIZE OF THE FLAG

The U.S. flag should be the same size as other logos, flags, and seals. When
placing the flag close to other logos or seals it is important that they are
proportional in size (not same in size). Owing to the fact that logos, seals and
flags vary in their shapes and proportions there is no golden rule for making
them appear the same size. Simply matching lengths or widths will make logos of
different shapes appear unproportioned to one another. A good starting point is to
scale images so that they have approximately the same area.

with a circle with a flag with rectange

with square with vertical with vertical

14

PLACEMENT OF THE FLAG

The guidelines here should not be interpreted as a mandate that USG information products
be a lineup of logos. This is only a guideline for placement when logos are being used to
represent sponsorship or involvement by multiple entities. As you will see in examples on
the following pages a group of logos is rarely the main part of an information product and
they are usually subordinate to the main visual element.

Horizontal Vertical Grouping

In a horizontal line of logos, the U.S. In a vertical line of logos, the U.S. When used with other Department
flag should be the first icon on the left flag should be the first icon on the top or foreign seals and implementing
followed by the State Department seal followed by the State Department seal partner logos, the icons should be
or, in the event of use of both the U.S. or, in the event of use of both the U.S. located together as one element. Within
and the host-country flag, the U.S. and and the host-country flag, the U.S. and this group, the flag must be placed
host-country flags should enjoy equal host-country flags should enjoy equal according to the vertical and horizontal
prominence, followed by the State prominence, followed by the State guidelines above.
Department seal. Department seal.
 15

INCORRECT USES OF THE FLAG

Incorrect Orientation

The flag must always have

the Union in the upper left
corner, and may not be
rotated from the horizontal
or vertical orientation.

Incorrect Scaling

The flag may not be scaled

in only one direction, may
not be presented in shapes
other than a rectangle, and
must always be shown in its
full form.
Incorrect Variations

Abstractions or wavy
versions are not permitted.

Overlays

Placing the flag over or

under a photo or artwork is
not permitted.

Text
Placing text on the flag is not

ECA permitted.
02 State Dept. Seal

The Seal 17

Color 18

Scale 22
 17

The Seal
SEAL SPECIFICATIONS
x
All ECA print designs should be clearly identified as
Department of State materials by utilizing the agency x
seal in the design. The seal incorporates specific
colors and typography that must be followed in order
to maintain its integrity at all times.

x
18

Colors
The RGB, CYMK, and Pantone equivalents of these colors are
provided below. These are the only colors that can be used to make
up the U.S. Department of State Seal. As always, you should proof
all print jobs for color consistency.

RED BLUE DARK BLUE YELLOW

COLOR CODES COLOR CODES COLOR CODES COLOR CODES

CMYK : 17,100,86,7 CMYK : 100,91,26,15 CMYK : 99,84,45,51 CMYK : 14,26,100,0
Pantone : 206 C Pantone : 288 C Pantone : 289 C Pantone : P 7-16 C
RGB : 193,2,48 RGB : 0,45,116 RGB : 10,34,64 RGB : 224,182,36
Hex : #C10230 Hex : #002D74 Hex : #0A2240 Hex : #E0B624
 19

Primary Seal
The seal is the most recognizable brand
element of the State Department, and Solid Color Seals
therefore, should be present as a lead element
Use when the background is a color that might clash with
on all department digital properties.
the full color seal. When used digitally, be sure the seal of
The full color seal is the primary brand mark choice and background combination is color compliant.
for use in print and digital. The seal should
When using the variations of the seal without text, be sure
be clearly and easily identifiable as the U.S.
that the product or website has "U.S. Department of State"
Department of State seal. The proportion of
written somewhere visible.
the seal must remain consistent. Do not scale
the seal horizontally or vertically only; keep
the horizontal-vertical aspect ratio locked
when resizing. Monochromatic Stamp | Box Link

When using the full color seal without text,

be sure that the product or website has "U.S.
Department of State" written somewhere visible.

Full Color | Box Link

20

COLOR USE
The given blue, gold, white, and
black seals are certified for
use. These four options would
be preferable for material with
backgrounds that vary in color.
Examples of possible seal and color
combinations are included here.

Designers should ultimately use their

judgement and choose the version
that works best with the design
product to ensure that the seal is
well pronounced.
21
22

Scale
The seal should be clearly and easily identified as the U.S.
Department of State seal. The proportion of the seal must
remain consistent. Do not scale the seal horizontally or
vertically only; keep the horizontal-vertical aspect ratio
locked when you are resizing the seal.

ORIENTATION
The seal must always appear in absolute horizontal orientation. The
seal cannot appear in vertical oreintation.
 23

INCORRECT USES OF THE SEAL

Incorrect Orientation

The seal must always have the

eagle facing up and may not be
rotated from the horizontal or
vertical orientation.

Incorrect Scaling

The seal may not be scaled in

only one direction, may not be
presented in shapes other than
a circle, and must always be
shown in its full form.

Overlays
Placing the seal over or under
a photo or artwork is not
permitted.

Text
Placing text on the seal is not
permitted.

ECA
24

03 ECA Color Guide

Primary
ECA BLUE ECA YELLOW ECA LIGHT GRAY ECA GRAY ECA BLACK

COLOR CODES COLOR CODES COLOR CODES COLOR CODES COLOR CODES

CMYK : 67,2,0,0 CMYK : 0,19,89,0 CMYK : 0,0,0,11 CMYK : 20,14,12,40 CMYK : 38,35,33,92
Pantone : 298 C Pantone : 123 C Pantone : 179-2 C Pantone : Cool Gray 7 C Pantone : Black 7 C
RGB : 65,182,230 RGB : 255,199,44 RGB : 223,222,222 RGB : 151,153,155 RGB : 61,57,53
 25

Secondary
ECA PINK ECA RED ECA SEA FOAM ECA GREEN ECA NAVY
GREEN

COLOR CODES COLOR CODES COLOR CODES COLOR CODES COLOR CODES
CMYK : 48,0,22,0
CMYK : 9,100,14,33 CMYK : 0,78,74,0 Pantone : 3248 C CMYK : 25,0,98,0 CMYK : 100,79,12,59
Pantone : 676 C Pantone : Bright Red C RGB : 109,205,184 Pantone : 381 C Pantone : 655 C
RGB : 150,0,81 RGB : 249,56,34 RGB : 206,220,0 RGB : 0,37,84
04 Digital Engagement

Websites 25

Social Media 26

Video 30

Photo 31
 27

Website
The U.S. flag and U.S. Department of State seal must be Program web pages, websites and mobile applications,
prominently placed on each program web page or website including those maintained by recipient organizations, must
dedicated to an ECA-funded program, typically in the footer. be compliant with Section 508 of the Rehabilitation Act.
An example of this can be seen in the footer of ECA.state. For a more detailed list of information on what is required
gov. Review Section 1 of this document for additional flag for websites to be Section 508 compliant, visit the WebAIM
and seal design guidelines. Accessibility Checklist.

All new websites, including program application materials For additional requirements and recommendations regarding
(if applicable), must utilize mobile-responsive design. ECA ECA websites please visit our website.
28

Social Media
Facebook Image size

Profile Picture: 180x180

The State Department seal does not have to be a program's profile picture, but placing pixels
the program's logo as the Facebook profile picture is highly recommended (180x180
pixels). Use an RGB .png file for best results.The cover image (851x315 pixels) can and Cover Image: 851x315 pixels
should be changed out regularly. When selecting a cover image chose a clear rich-
colored image that positively highlights the program.
 29

Twitter
The Twitter profile picture is not required to be the Department of State Seal, but Image size

it is highly recommended that it be the program's specific logo (400x400 pixels). Profile Picture: 400x400 pixels
Use an RGB .png file for best results. You are encouraged to change out the large
header image regularly (1500x1500 pixels). The header image should be a large, Cover Image: 1500x500 pixels
captivating image.
30

Instagram
The Instagram profile image is not required to be the Department of State Seal, Image size

Profile Picture: 110x110

but it is highly recommended that it be the program's specific logo (110x110 pixels).
pixels
When selecting a profile image for Instagram, chose a rich-colored image that
positively highlights the program or initiative.
 31

YouTube
Image size
The YouTube channel profile picture is not required to be the Department of State Seal,
but it is highly recommended that it be the program's specific logo (800x800 pixels). Profile Picture: 800x800 pixels
The channel art (2560x1440 pixels) should be changed out regularly. When selecting a
thumbnail, chose a rich-colored image that positively highlights the program or initiative. Channel Art: 2560x1440 pixels
It’s best to maintain a consistent look and feel of thumbnail images as the videos may be
pulled into ECA websites.
32

Video
In order to create a consistent design to all ECA
program videos, a standard outro should be A
placed at the end of every video. Outro video
file templates are available on the ECA website.
The flag, seal, and program logo should be
included as seen on these examples. A link about
the program or campaign should typically be
included as a call to action.
C ECA.STATE.GOV
To comply with federal 508 compliance,
closed captioning must accompany every Produced by the Bureau of Educational
B
video including videos published on Facebook,
and Cultural Affairs
Twitter, YouTube, etc. For further instructions
on video requirements please refer to the ECA
Communications Guidance.

A: Flag before seal (proportional in size)

B: Producer of video
D E
C: link to find more information

D: program logo either after seal or above closed captioning

E: all videos must have closed captioning on

YouTube and Facebook
 33

Photo
Photography is a key element in ECA's brand and can be Take photos in diverse places that will visually help the viewer
used in a variety of communication tools. Photos on social see our exchange programs, and capture moments when you
media can be branded with the State Department seal, U.S. feel like participants are discovering something new about
flag and/or program logo as shown below. However, it is not themselves, their culture, or other people’s cultures (such as
required. It is best practice to accompany every photo with a food or dancing). For premium quality, remember to place the
caption that tells the viewer the who, what, where, when, and light source in front of the object or subject you are capturing.
why of the subject matter. If the photo was not taken by ECA If the light is behind the subject or object, the subject or
it should have a photo credit. object may be dark or turn into a silhouette.
05 508 Compliance
in Design

What is 508 Compliance 33

T Text 34

Color 35
 35

508 Compliance in Design

Section 508 of the Rehabilitation Act Effective June 21, 2001, requires Federal departments and
agencies that develop, procure, maintain, or use electronic and information technology to assure
that these technologies provide access to information and data to people with disabilities.

ECA Program videos, web pages, websites and mobile applications created and/or maintained
by recipient organizations must be compliant with Section 508 of the Rehabilitation Act, which

5 8
addresses accessibility of content to persons with disabilities. It states that they must be
508 compliant"…unless an undue burden would be imposed on the department or agency.”
Even if there is an “undue burden,” the U.S. Department of State and recipient organizations
must provide accessible alternatives for all non-accessible content that they publish. Specific
requirements for videos and websites are detailed in the Communications Guidance for ECA
Recipient Organizations document. Additional resources for design are located below.

Resources

1. Accessibility Through Design

2. A Designer's Guide to Accessibility and 508 Compliance

3. What is 508 Compliance?

4. Section508.gov
36

Text T

In order to design for accessibility text or 'body copy' cannot be smaller than 10 point font.
The minimum point size is important in order to decrease strain on the eye for those with visual
impairments. However, body copy should not be excessively large. Paragraphs and longer portions
of information should not go above 12 pt font.

In compliance with Section 508, san serif type is preferred over serif typefaces. Examples of both
are shown below. Serif typefaces much like smaller type can put strain on the eyes and prevent
people from being able to read your content. Avenir, Lato, Arial, Helvetica are all examples of sans
serif typefaces. This does not mean that serif typefaces like Times cannot be used, but just be
conscious when picking typefaces for digital use.

AVENIR BOOK
LATO REGULAR
ARIAL REGULAR
HELVETICA LIGHT
 37

Color
Color much like text can have a significant effect on the readability of your web content. Contrast
is a key aspect of 508 compliance. As shown below, there must be significant contrast when
placing type, objects or symbols over a colored background. Picking two oranges or blues to be
placed on top of one another does not fit within 508 compliance. Similar shades of colors are also
not allowed, for example red text over a pink background. Create as much contrast as possible
when designing. When in doubt print your document or webpage out in black and white to see if
the text or objects are readable and clear. Colors contrast for accessibility can be checked on
websites such as WebAim.

NO NO NO NO

NO NO NO YES

YES YES YES YES

06 ECA Program and
Initative Logos

A-C 39

E-G 40

I-P 41

S-U 42

Y 43
 39

Box Link Box Link

Box Link Box Link

Box Link Box Link

Box Link Box Link

Box Link Box Link

40

Box Link Box Link

Box Link Box Link

Box Link Box Link

Box Link
Box Link

Box Link
Box Link
 41

Box Link Box Link

Box Link Box Link

Box Link Box Link

Box Link
Box Link

Box Link

Box Link
42

Box Link Box Link

Box Link Box Link

Box Link Box Link

Box Link Box Link

SOLIDARITY Box Link Box Link

CENTER
AF L- CIO
 43

Box Link Box Link

Box Link

Box Link

Box Link

Box Link

Box Link

Box Link

Box Link

Box Link Box Link

THANK YOU.

CONTACT

ECA Office of Public Affairs and Strategic Communications

[email protected]