U.S. Department of Defense Brand Guide

Overview Overview

The Defense Department Brand Guide was developed to ensure a shared visual experience that reinforces DOD’s identity and core priorities.

The foundation of the department’s brand is the DOD Mission Statement:

The Department of Defense provides the military forces needed to deter war and ensure our nation’s security.

Objective

The purpose of this guide is to ensure that no matter how people engage with the DOD – on the website, via email or U.S. mail, through social media, livestream broadcasts or photographs – they are left with an impression that accurately reflects the department’s brand identity and mission.

Strength. Courage. Discipline. Accountability. Integrity. Diversity.

The department shares the DOD story daily through official statements and a variety of informational products, engaging with many audiences around the world. Communicators should refer to this guide for correct use of the DOD brand in all communications from inception to production and delivery, in all media.

Symbols of the DOD Brand

Please click here for important information and guidelines about the use of Department of Defense seals, logos, insignia, and service medals.

The DOD Seal

DOD Seal

The DOD seal was first authorized for official use on Aug. 22, 1949, by Defense Secretary Louis Johnson, when the National Military Establishment was redesignated the Department of Defense. The design of the seal and its symbolism is described in Appendix VI Joint Army and Air Force Bulletin No. 23:

“An American eagle is displayed facing to the right. Wings are horizontal. The eagle grasps three crossed arrows and bears on its breast a shield whose lower two-thirds carries alternating white and red stripes and whose upper third is blue. Above the eagle is an arc of thirteen stars with alternating rays. Below the eagle is a wreath of laurel extending to the eagle's right and wreath of olive extending to the eagle's left. On an encircling band is the inscription ‘Department of Defense’ and ‘United States of America.’

The American bald eagle, long associated with symbolism representing the United States of America and its military establishment, has been selected as an emblem of strength. In facing to the right, the field of honor is indicated. The eagle is defending the United States, represented by the Shield of thirteen pieces. The thirteen pieces are joined together by the blue chief, representing the Congress. The rays and stars above the eagle signify glory, while the three arrows are collectively symbolic of the three component parts of the Department of Defense. The laurel stands for honors received in combat defending the peace represented by the olive branch.

When the seal is displayed in color, the background is to be of medium blue with the eagle and wreath in natural colors and the arrows, stars, and rays of gold. The encircling band is to be dark blue with gold edges and letters in white.”

Elements of the DOD Brand

Design

The key components of DOD's visual brand identity — logos, typography and colors — should be used consistently across all platforms and media to reinforce and protect the brand.

Three items are critical to proper DOD visual branding:

  1. The DOD/Pentagon logo, which is the official, approved combination of the Pentagon icon and logotype.
  2. Typography, which consists of an approved family of typefaces for both digital and print content.
  3. Color palette, which consists of the approved palette and usage of specific colors.

Voice

Voice is the character of the brand and does not change. The DOD voice is straightforward, informational and authoritative.

To best convey the DOD voice, communicators should speak and write in a clear, accurate, concise and authoritative, though not necessarily formal, manner.

Tone

The tone of the DOD voice should be driven by audience, context and platform. A report posted on the Defense.gov website would necessarily include data and charts and more formal language, while feature content on the website may be written in a more conversational style and include videos and photos.

Name

Consistent use of the proper name of an entity and its representative acronym strengthen and reinforce brand identity.

Using DOD Voice and Tone

Applying the DOD voice and tone consistently in all communications is an essential part of reinforcing the brand:

  • Use Active Voice - avoid passive voice.
  • Write/Speak Clearly – use complete concise sentences; refer to the Official DOD Plain Language Website at https://www.esd.whs.mil/DD/plainlanguage/ as needed.
  • Use Plain English - avoid slang, jargon or acronyms.
  • Write With Authority – DOD is the country’s expert in defense and security.

Associated Press Style: For consistency in word usage throughout copy, products and department communications, DOD communicators should refer to the Associated Press Stylebook, the reader-friendly industry standard in journalism and public affairs writing. (See https://www.apstylebook.com/.) Be sure to cross-check word usage with separate, relevant DOD style guides for exceptions to AP Stylebook rules.

Use of Name

“U.S. Department of Defense” and “Department of Defense” refer to the proper name and legal entity of this cabinet-level government department. Reserve these for use in formal and official correspondence, documents, reports and testimony.

In all other cases, use “Defense Department” on first reference.

The correct acronym for “Defense Department” is “DOD” with an uppercase “O” in the center; use on second reference after “Defense Department” or when the stand-alone acronym suffices depending upon use. Do NOT use “DoD.”

Use of DOD Brand Symbols

The DOD logo and seal are protected by law from unauthorized use. The 1946 Lanham Act, sometimes called the Trademark Act, and other trademark and licensing acts give DOD, its components and the military services authorization to protect and license their names, insignia, seals, symbols, etc. Consequently, when the DOD logo and seal are used without authorization, the department may take appropriate action upon notification.

The DOD Logo

The logo may be used, in keeping with brand standards, in all DOD communications across all media platforms.

The DOD Seal

The DOD seal’s use is restricted to official DOD top leader correspondence, legal documents, reports, memoranda, ceremonial booklets, certificates and awards.

DOD Seal DOD Seal

Official Seal

DOD Seal

This is the official seal for the DOD.

The DOD seal’s use is restricted to official DOD top leader correspondence, legal documents, reports, memoranda, ceremonial booklets, certificates and awards. Click here for more information.

Sizing

The DOD seal has a minimum size standard that must be adhered to in all usage cases; the seal may be used at a larger scale as needed.

Minimum Sizing
DOD Seal

The DOD seal should not be rendered smaller than:

  • Web: 50px wide
  • Print: Approx. .5" wide
  • Broadcast: 50px wide

Seal Color

The following is the color guideline for the DOD seal.

DOD Seal
DOD Seal
Outer Yellow 1: Yellow 1 HEX: #ffd51d
Outer Yellow 2: Yellow 2 HEX: #ffe965
Outer Blue Ring: DOD Blue HEX: #355e93
Outer Ring Text: White HEX: #ffffff
Outer Ring Text Shadow: Black HEX: #000000
Light Blue Background: Light Blue HEX: #47a6dc
Leaf Green 1: Green 1 HEX: #9eb559
Leaf Green 2: Green 2 HEX: #005a77
Leaf Green 3: Green 3 HEX: #0E9a4a
Eagle Feather Brown 1: Brown 1 HEX: #8c543b
Eagle Feather Brown 2: Brown 2 HEX: #d09b53
Sheild Dark Blue: Dark Blue HEX: #003876
Shield Red: Red HEX: #ed1c24

Clear Space

Clear space is the open space around the seal and gives the seal ample breathing room from other text, images or graphics. The more clear space given to the seal the stronger impact it will have.

Official Seal
DOD Seal Spacing

Clear space around the official seal is equal to the thickness of the outer blue ring.

When using the seal in applications where the width is less than 150px, the allocated white space must double.

The rules outlined above must be followed in all circumstances unless given explicit written permission to do otherwise.

Avoid

The official DOD seal should in no way be edited or presented in any way except how it is displayed above. The size of the seal is the only variable that can be changed, while adhering to the minimum sizing requirements outlined above.

Downloads

Official Seal
DOD Seal

Typography Typography

Consistent typography can be a recognizable and synergistic part of any brand identity. All DOD-branded communications should use only the font families depicted in this section. The font families are separated into digital and print content.

A clear typographic system is critical to upholding the strength of the DOD brand. Type treatments should reflect the DOD as a strong and reliable voice. The DOD recommends a font system that uses three open-source font families: Oswald, Lato & Crimson Text, all of which are designed for legibility and can adapted to a variety of styles.

Primary Typefaces

Lato Title

Lato is an open-source sans serif typeface created for legibility in UI design. The semi-rounded details of the letters give Lato a feeling of warmth, while the strong structure provides stability and seriousness.

Lato Specimen
Oswald Title

Oswald is a reworking of the classic style historically represented by the 'Alternate Gothic' sans serif typefaces. The characters of Oswald were initially re-drawn and reformed to better fit the pixel grid of standard digital screens.

Oswald Specimen
Crimson Text Title

Crimson Text is a typeface designed in the tradition of beautiful oldstyle typefaces. As a transitional serif design, Crimson Text shows a number of traditional features of 'rational' serif typefaces from around the early 19th century, such as alternating thick and thin strokes, ball terminals and a vertical axis.

The combination of light, regular, and bold weights gives the font family stylistic range, while conveying a desirable mix of classic, yet modern simplicity. Crimson Text communicates warmth and credibility at both large and smaller font sizes.

Crimson Text Specimen

Alternate Typefaces

These typefaces are to be used ONLY IF their primary counterparts are unavailable.

Arial Title

A contemporary sans serif design, Arial contains more humanist characteristics than many of its predecessors and as such is more in tune with the mood of the last decades of the twentieth century.

If Lato is unavailable, Arial (which is one of the most common system fonts available) may be used in its place.

Arial Specimen
Franklin Gothic Medium Condensed Title

Franklin Gothic Medium Condensed shares many of the aesthetic traits of Oswald, but can be found in most modern text editors.

If Oswald is unavailable, Franklin Gothic Medium Condensed (which is available in most modern environments) may be used in its place.

Franklin Gothic Medium Condensed Specimen
Times New Roman Title

Times New Roman has a robust weight/density on the page and influences of European early modern and Baroque printing. The design is slightly condensed, with short ascenders and descenders and a high x-height (tall lower-case letters), all effects that save space and increase clarity.

If Crimson Text is unavailable, Times New Roman (which is one of the most common system fonts available) may be used in its place.

Times New Roman Specimen

Type Hierarchy

Consistent typography allows audiences to recognize content from the DOD.

Please see acceptable use cases below:

Primary

  • Web: Landing pages
  • Print: Posters, other promotional materials
  • Broadcast: Video slates, all other broadcast graphics.

This is an Example of a Standard Headline

This is an Example of a Subheadline

This is an example of body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis sed ipsum quis sagittis. Nullam eget placerat purus. Vivamus facilisis felis ac eros congue rutrum. Integer non leo placerat, placerat ex at, condimentum purus. Sed ut massa non nunc rhoncus pretium ut non arcu. Ut in vulputate nulla, ut luctus magna.

Alternate

  • Web: Website article content (news/feature stories, blogs, press products, etc.)
  • Print: Official DOD documents
  • Broadcast: Not for use in broadcast

This is an Example of a Standard Headline

This is an Example of a Subheadline

This is an example of body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis sed ipsum quis sagittis. Nullam eget placerat purus. Vivamus facilisis felis ac eros congue rutrum. Integer non leo placerat, placerat ex at, condimentum purus. Sed ut massa non nunc rhoncus pretium ut non arcu. Ut in vulputate nulla, ut luctus magna.

Type Color

  • Our primary font color across titles and body text is #333333 DOD Gray. This should be used against white and gray backgrounds.
  • Our secondary font color is #355e93 DOD Blue. This should be used sparingly and should only be used for stylized headings.
  • Our tertiary font color is #ffffff White and should only be used when placing text on dark backgrounds.
DOD Gray HEX: #333333 RGB: (51,51,51) CMYK: (0,0,0,80)
DOD Blue HEX: #355E93 RGB: (53,94,147) CMYK: (64,36,0,42)
White HEX: #ffffff RGB: (255,255,255) CMYK: (0,0,0,0)

Avoid

The examples shown here, while not all-inclusive, are presented to show improper uses of type.

Avoid setting all body copy in bold

Avoid setting all body copy in bold

Avoid using headings without sufficient contrast with body copy

Avoid using headings without sufficient contrast with body copy

Avoid setting both headline and body copy in Crimson Text

Avoid setting both headline and body copy in Crimson Text

Avoid applying extra letter spacing (tracking)

Avoid applying extra letter spacing (tracking)

Avoid applying more than the recommended amount of leading

Avoid applying more than the recommended amount of leading

Avoid setting body copy in all caps

Avoid setting body copy in all caps

Type Table

The following is a resource to help identify which typeface should be used in a specific context.

Page Title/Headline

Primary

Oswald Title

Alternate

Franklin Gothic Medium Condensed Title

Section Title/Headline

Primary

Lato Title

Alternate

Arial Specimen

Content Title/Headline

Primary

Crimson Text Title

Alternate

Times New Roman Title

Body Copy

Primary

Lato Title

Alternate

Arial Title

*Only use the alternate option outlined above when primary is unavailable.

Color Color

Primary Color Palette

The primary color palette should be used for all main design elements.

DOD Blue HEX: #355e93 RGB: (53,94,147) CMYK: (64,36,0,42)PMS: 653 C
DOD Gray HEX: #333333 RGB: (51,51,51) CMYK: (0,0,0,80) PMS: 447 C
White HEX: #ffffff RGB: (255,255,255) CMYK: (0,0,0,0) PMS: N/A

Secondary Color Palette

The secondary color palette should be used in conjunction with the primary colors to accent designs.

Hazy Blue HEX: #ebeff5 RGB: (235,239,245) CMYK: (4,2,0,4) PMS: 656 C
Steel Blue HEX: #aebfd4 RGB: (174,191,212) CMYK: (18,10,0,17) PMS: 651 C
Cadet Blue HEX: #728fb4 RGB: (114,143,180) CMYK: (37,21,0,29) PMS: 2157 C
Ocean Blue HEX: #254267 RGB: (37,66,103) CMYK: (64,36,0,60) PMS: 534 C
Space Blue HEX: #15263b RGB: (21,38,59) CMYK: (64,36,0,77) PMS: 289 C
Harbor Gray HEX: #ebebeb RGB: (235,235,235) CMYK: (0,0,0,8) PMS: 9345 C
Smoke Gray HEX: #adadad RGB: (173,173,173) CMYK: (0,0,0,32) PMS: Cool Gray 6 C
Anchor Gray HEX: #717171 RGB: (113,113,113) CMYK: (0,0,0,56) PMS: 424 C
Dark Gray HEX: #333333 RGB: (51,51,51) CMYK: (0,0,0,80) PMS: P 179-15 C
DOD Black HEX: #141414 RGB: (20,20,20) CMYK: (0,0,0,92) PMS: Black 6 C
Contact
If you have any questions regarding the DOD brand, please fill out the form below.

Web Web

Placeholder for a 1-2 paragraph explanation of the vision for this design and any keywords people should keep in mind while designing.

Structure

Widths & Heights

Guidelines Here.

Margins & Paddings

Guidelines Here.

Columns

Guidelines Here.

Sectioned Elements

Guidelines Here.

Typography

Page (Evergreen) Headlines

Headline (h1) Font: Lato | Color: #333 | Font Weight:700 | Font Size: 2.6rem

Headline (h2) Font: Lato | Color: #333 | Font Weight:700 | Font Size: 2.2rem

Headline (h3) Font: Lato | Color: #333 | Font Weight:700 | Font Size: 2rem

Headline (h4) Font: Lato | Color: #333 | Font Weight:700 | Font Size: 1.8rem

Headline (h5) Font: Lato | Color: #333 | Font Weight:700 | Font Size: 1.6rem
Headline (h6) Font: Lato | Color: #333 | Font Weight:700 | Font Size: 1.4rem

Content (Explore) Headlines

Headline (h1) Font: "Crimson Text" | Color: #333 | Font Weight:700 | Font Size: 2rem

Headline (h2) Font: "Crimson Text" | Color: #333 | Font Weight:700 | Font Size: 1.8rem

Headline (h3) Font: "Crimson Text" | Color: #333 | Font Weight:700 | Font Size: 1.6rem

Headline (h4) Font: "Crimson Text" | Color: #333 | Font Weight:700 | Font Size: 1.4rem

Headline (h5) Font: "Crimson Text" | Color: #333 | Font Weight:700 | Font Size: 1.3rem
Headline (h6) Font: "Crimson Text" | Color: #333 | Font Weight:700 | Font Size: 1.2rem

Body Copy

This is body copy. (p). This is what an inline link will look like. "The world changed when you were about 5 years old, and we've been at war now for almost 16 years," he said. "Today, there are more than 100,000 airmen standing watch around the world. Many are directly supporting combat operations and are joined by thousands more soldiers, sailors and Marines."

This is the start of the next paragraph. The general stressed that the priority for the new officers changed today with their commissioning oath. "The focus is not on you any more. It is not about your GPA, your MPA or your PEA," he said, referring to their grade point, military performance and physical education averages. "It's not about the superintendent's pin on your uniform, and it's not about your accomplishments on the athletic field.

Color

Armed Forces Color Palette

Colors to be used when designing elements for the Armed Forces.

  • Army - Primary
    HEX: #ffffff RGB: (255,255,255) CMYK: (0,0,0,0)
    HEX: #EFF1EE RGB: (239,241,238) CMYK: (1,0,1,5)
    HEX: #ADBFB3 RGB: (173,191,179) CMYK: (9,0,6,25)
    HEX: #376251 RGB: (55,98,81) CMYK: (44,0,17,62)
    Army - Secondary
    HEX: #EE3B33 RGB: (238,59,51) CMYK: (0,75,79,7)
    HEX: #778C7F RGB: (119,140,127) CMYK: (15,0,9,45)
  • Marines - Primary
    HEX: #E7E4D7 RGB: (231,228,215) CMYK: (0,1,7,9)
    HEX: #C9BFA4 RGB: (201,191,164) CMYK: (0,5,18,21)
    HEX: #2F2D26 RGB: (47,45,38) CMYK: (0,4,19,82)
    HEX: #FFFFFF RGB: (255,255,255) CMYK: (0,0,0,0)
    Marines - Secondary
    HEX: #990F00 RGB: (153,15,0) CMYK: (0,90,100,40)
    HEX: #7B7B7B RGB: (123,123,123) CMYK: (0,0,0,52)
    HEX: #3D3B34 RGB: (47,8,22) CMYK: (0,3,15,76)
    HEX: #103065 RGB: (16,48,101) CMYK: (84,52,0,60)
  • Navy - Primary
    HEX: #998542 RGB: (153,133,66) CMYK: (0,13,57,40)
    HEX: #FFB81C RGB: (41,100,55) CMYK: (0,28,89,0)
    HEX: #002F6C RGB: (0,47,108) CMYK: (100,56,0,58)
    HEX: #000000 RGB: (0,0,0) CMYK: (0,0,0,100)
    Navy - Secondary
    HEX: #9EA2A2 RGB: (158,162,162) CMYK: (2,0,0,36)
    HEX: #FFFFFF RGB: (255,255,255) CMYK: (0,0,0,0)
    HEX: #AF272F RGB: (175,39,47) CMYK: (0,78,73,31)
    HEX: #73381D RGB: (115,56,29) CMYK: (0,51,75,55)
  • Air Force - Primary
    HEX: #efefef RGB: (239,239,239) CMYK: (0,0,0,6)
    HEX: #144A75 RGB: (20,74,117) CMYK: (83,37,0,54)
    HEX: #363636 RGB: (54,54,54) CMYK: (0,0,0,79)
    Air Force - Secondary
    HEX: #D31F09 RGB: (211,31,9) CMYK: (0,85,96,17)
    HEX: #FFFFFF RGB: (255,255,255) CMYK: (0,0,0,0)
  • Coast Guard - Primary
    HEX: #FFFFFF RGB: (255,255,255) CMYK: (0,0,0,0)
    HEX: #EDEDED RGB: (237,237,237) CMYK: (0,0,0,7)
    HEX: #133E68 RGB: (19,62,104) CMYK: (82,40,0,59)
    HEX: #355E92 RGB: (53,94,146) CMYK: (64,36,0,43)
    Coast Guard - Secondary
    HEX: #FF5000 RGB: (255,80,0) CMYK: (0,69,100,0)
    HEX: #EA1E01 RGB: (234,40,1) CMYK: (0,87,100,8)
    HEX: #6780AE RGB: (103,128,174) CMYK: (41,26,0,32)
    HEX: #327AB7 RGB: (50,122,183) CMYK: (73,33,0,28)
  • National Guard - Primary
    HEX: #00457C RGB: (0,69,124) CMYK: (100,44,0,51)
    HEX: #E51B24 RGB: (229,27,36) CMYK: (0,88,84,10)
    National Guard - Secondary
    HEX: #ffffff RGB: (255,255,255) CMYK: (0,0,0,0)
    HEX: #000000 RGB: (0,0,0) CMYK: (0,0,0,100)

Buttons

The following are the various button classes to be used on Defense.gov.

Default Default Ghost Primary Primary Ghost External Button

Cards

The following are the classes, and illustrated styling, used to achieve consistent box-shadows throughout Defense.gov.

Card
Card 1
Card 2
Card 3
Card 4
Card 5

Iconography

General

External Link
Download
Photo
Information**
Expand
Tags
Share
Embed
Chevron Left
Chevron Right
Chevron Up
Chevron Down
Calendar
Envelope
Default View
List View
Search Plus
Search Minus
Phone

Social

Twitter
Facebook
Flickr
LinkedIn
Instagram
YouTube
Podcast
RSS

Lists

Unordered List

Ordered List

Under Construction Banner

This will be used at the top of pages, mainly Experience pieces, that ned to go live for testing. *Note - There is extra padding at the top to account for the fixed site nav bar.

UNDER CONSTRUCTION

Play Button

[XXXXXXXXXXXXXXXXXXXX]

Helper Classes

Various CSS classes that should be used to add consistency and assist in various use cases.

Content Constraints

.content-wrap

Will constrain the element to be no wider than 1400px.

<div class="content-wrap"> ... </div>
.content-wrap-wide

Will constrain the element to be no wider than 1600px.

<div class="content-wrap-wide"> ... </div>

Page Banners

.page-banner & .page-banner-inner

Used for the banner of content pages.


Page Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra tellus in ex ornare tempus.

<div class="page-banner" style="background-image:url(...);"> <div class="page-banner-inner"> <div class="content-wrap"> <h1 class="page-title">Page Title</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra tellus in ex ornare tempus.</p> </div> </div> </div>
.page-banner-thin

A variation of the banner for content pages, when a thin banner is needed.


Page Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra tellus in ex ornare tempus.

<div class="page-banner page-banner-thin" style="background-image:url(...);"> <div class="page-banner-inner"> <div class="content-wrap"> <h1 class="page-title">Page Title</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra tellus in ex ornare tempus.</p> </div> </div> </div>

Illustrator Design File

[XXXXXXXXXXXXXXXXXXXX]

Print Print

[Insert short description here.]

Broadcast Broadcast

[Insert short description here/.]]

Logo Placement

[XXXXXXXXXXXXXXXXXXXX]

On Screen Stylized Text BIG

[XXXXXXXXXXXXXXXXXXXX]

On Screen Stylized Text Small w/ Background

[XXXXXXXXXXXXXXXXXXXX]

Captions on Screen

[XXXXXXXXXXXXXXXXXXXX]

Lower Thirds

[XXXXXXXXXXXXXXXXXXXX]

Title Safe & Action Safe

[XXXXXXXXXXXXXXXXXXXX]

Live Events Logo & Placement

[XXXXXXXXXXXXXXXXXXXX]

Minimum Font Sizing

[XXXXXXXXXXXXXXXXXXXX]