DOD Brand Guide

The framework that brings the magic to life.

Overview Overview

The Defense Department Brand Guide was developed to ensure a shared visual experience that reinforces DOD’s identity and the core priorities that are the key elements of the brand: Lethality, Partnerships and Reform.

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

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 symbol and wordmark.
  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 more casually 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 a capitalized “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.

Logos Logos

DOD Seal

Official DOD Seal DOD Seal

Sizing

The DOD seal has a minimum size to adhere to in all situations.

DOD Seal DOD Seal

The seal in this configuration should be no smaller than:

  • Web: 135px wide
  • Print: 1.25" wide
  • Broadcast: 135px wide

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

White Space

The DOD seal should always be surrounded by generous white space. The diagram defines the minimum amount of clear space needed, which 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 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.

DOD Branded #Hashtags

When branding official DOD #hashtags, please use the following guidelines.

DOD Logo with Hashtag

DOD Logo with #Hashtag - Full Color
DOD Logo with Hashtag - Full Color
DOD Logo with #Hashtag - Dark on Light
DOD Logo with Hashtag - Dark on Light
DOD Logo with #Hashtag - Light on Dark
DOD Logo with Hashtag - Light on Dark

DOD Icon with #Hashtag

DOD Icon with #Hashtag - Full Color
DOD Icon with Hashtag - Full Color
DOD Icon with #Hashtag - Dark on Light
DOD Icon with Hashtag - Dark on Light
DOD Icon with #Hashtag - Light on Dark
DOD Icon with Hashtag - Light on Dark

When Referencing Hashtags in Sentence Copy

When referring to a DOD brand hashtag in written copy, please adhere to the following rules:

  • Please make sure to use the hashtag (#) adjacent to the first letter in the hashtag.
  • Please do not add any spaces between the hashtag symbol (#) and the first letter in the hashtag. (Should display as “#Hashtag”)
  • The first letter in each word within the hashtag should be uppercase, with the remaining letters being lowercase. (Example: #KnowYourMil)

White Space

The white space around the branded hashtag should adhere to the same guidelines as the DOD logo itself, which is based on the height of the bottom rectangle of the pentagon icon.

When using the DOD branded hashtag in applications where the pentagon symbol is narrower than 150px wide, the allocated white space must double.

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

Avoid

The DOD branded hashtags should follow the same guidelines outlined for the DOD logo above.

#KnowYourMil Word Mark

The #KnowYourMil word mark is used to promote materials that provide a closer look at the men and women in uniform.

#KnowYourMil Word Mark
#KnowYourMil Word Mark in Black
#KnowYourMil Word Mark (White)
#KnowYourMil Word Mark in White

Sizing

The #KnowYourMil Word Mark has a minimum size to adhere to when using in design.

Primary
#KnowYourMil Word Mark

The logo in this configuration should be no smaller than:

  • Web: 125px wide
  • Print: 1.125" wide
  • Broadcast: 125px wide

Color

The #KnowYourMil word mark can be used in any color of your choosing AS LONG AS you adhere to 508 compliance in your use of the word mark in your design. The following are a white and black version to illustrate safe scenarios.

Dark on Light
#KnowYourMil - Dark on Light
Word Mark: DOD Black HEX: #141414 RGB: (20,20,20) CMYK: (0,0,0,92) PMS: Black 6 C
Light on Dark
#KnowYourMil - Light on Dark
Word Mark: White HEX: #ffffff RGB: (255,255,255) CMYK: (0,0,0,0) PMS: N/A

White Space

The #KnowYourMil word mark should always be surrounded by generous white space. The diagram defines the minimum amount of clear space needed, which is equal to distance between the top of the hashtag and the bottom horizontal bar in the hashtag.

When using the word mark in applications where its width is narrower than 250px, the allocated white space must double.

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

Avoid

Do not lowercase

Do not change the font used

Do not use without the preceding hashtag

Do not use italics

Do not change text weight

Do not mix colors

Connect Brand Element

The Connect Brand Element is an additional brand element that can be used on print and digital products to engage with and inform the DOD audience.

The Connect Brand Element highlights the online and digital properties, including the KnowYourMil hashtag, defense.gov website and @DeptofDefense social media handle that the end user can interact with to engage and connect with the Defense Department.

Primary

Primary - Left
Connect Brand Element
Primary - Right
Connect Brand Element
Primary - Light on Dark - Left
Connect Brand Element
Primary - Light on Dark - Right
Connect Brand Element

Sizing

The Connect Brand Element has a minimum size to adhere to when using in design.

Primary
Connect Brand Element

The logo in this configuration should be no smaller than:

  • Web: 370px wide
  • Print: 1.875" wide
  • Broadcast: 370px wide

Color

The following is a color guideline for the various brand element configurations:

Primary
Connect Brand Element
"#KnowYourMil" & Bar: Ocean Blue HEX: #254267 RGB: (37,66,103) CMYK: (64,36,0,60) PMS: 534 C
All Lettering: White HEX: #ffffff RGB: (255,255,255) CMYK: (0,0,0,0) PMS: N/A
Dot Separator: DOD Blue HEX: #355e93 RGB: (53,94,147) CMYK: (64,36,0,42)PMS: 653 C
Primary - Light on Dark
Connect Brand Element
"#KnowYourMil" & Bar: White HEX: #ffffff RGB: (255,255,255) CMYK: (0,0,0,0) PMS: N/A
All Lettering: Ocean Blue HEX: #254267 RGB: (37,66,103) CMYK: (64,36,0,60) PMS: 534 C
Dot Separator: DOD Blue HEX: #355e93 RGB: (53,94,147) CMYK: (64,36,0,42)PMS: 653 C

White Space

The Connect Brand Element should always be surrounded by generous white space. The diagram defines the minimum amount of clear space needed, which is based on the height of the capital "E" in the bar.

When using the brand element in applications where its width is narrower than 250px, the allocated white space must double.

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

Avoid

The examples shown here, while not all-inclusive, are presented to show improper uses of the Connect Brand Element. The Connect Brand Element is an important expression of our brand identity. The Connect Brand Element should in no way be distorted, redrawn or recolored when applied to communications.

Do not change the color

Do not change the fonts

Do not use without #KnowYourMil

Do not move #KnowYourMil

Do not use in all caps

Do not remove angle at end of bar

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.

  • Large headlines should use Oswald Regular or Lato Bold set in title case (upper and lowercase), while subheads should use Lato Bold.
  • DOD content (story or press products) headlines should be Crimson Text Regular while subtitles should use Crimson Text Bold.
  • Large blocks of copy should use Lato Regular sentence case.

Primary

For use on: Website Landing Pages, Promotional Materials, etc.

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

For use in: Website Content, News Content, Press Products, etc.

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 Grey. This should be used against white and grey 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 Grey 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.

Do not set all body copy in bold.

Do not make headings without sufficient contrast with body copy.

Do not set both headline and body copy in Crimson Text.

Do not apply extra letter spacing (tracking).

Do not apply more than the recommended amount of leading.

Do not set 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

DOD Color Palette

Should be used as the base for most design elements.

Primary Color Palette

DOD Blue HEX: #355e93 RGB: (53,94,147) CMYK: (64,36,0,42)PMS: 653 C
DOD Grey HEX: #333333 RGB: (51,51,51) CMYK: (0,0,0,80) PMS: 447 C

Secondary Color Palette

Should be used in conjunction with the primary colors and to accent designs.

Hazy Blue HEX: #ebeff5 RGB: (235,249,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 Grey HEX: #ebebeb RGB: (235,235,235) CMYK: (0,0,0,8) PMS: 9345 C
Smoke Grey HEX: #adadad RGB: (173,173,173) CMYK: (0,0,0,32) PMS: Cool Gray 6 C
Anchor Grey HEX: #717171 RGB: (113,113,113) CMYK: (0,0,0,56) PMS: 424 C
Dark Grey 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

Downloads Downloads

DOD Seal

Official Seal

DOD Seal

#KnowYourMil Word Mark

#KnowYourMil Word Mark
#KnowYourMil Word Mark in Black
#KnowYourMil Word Mark (White)
#KnowYourMil Word Mark in White

Connect Brand Element

Primary - Left

Connect Brand Element

Primary - Right

Connect Logo

Primary - Light on Dark - Left

Connect Logo

Primary - Light on Dark - Right

Connect Logo

Armed Forces Seals

Seals to be used when referencing the armed forces.

Army

Army Seal

Marines

Marines Seal

Navy

Navy Seal

Air Force

Air Force Seal

Coast Guard

Coast Guard Seal

National Guard Bureau

National Guard Bureau Seal
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.

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]