Official US Government Icon

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you're on a federal government site.

Secure Site Icon

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

The latest general information on the Coronavirus Disease 2019 (COVID-19) is available on Coronavirus.gov. For USDOT specific COVID-19 resources, please visit our page.

USDOT Web Design System Components

Components are built using reusable USDOT Web Design System elements.

Global

The following components are used and available across all sites.

Alert

An alert keeps users informed of important and sometimes time-sensitive changes. The global alert is activated on all pages, except for Transportation.gov home page, which uses the larger version below.

Global Alert

Example of a global alert

Transportation.gov Home Page Alert

Example of Transportation.gov home page alert

USA Banner

The banner identifies your site as an official website of the United States government and helps visitors understand how to tell that it is official. It follows the specifications from the U.S. Web Design System and is used across all USDOT websites except USMMA.edu.

Example of USA banner

DOT Banner

The banner identifies your site as an official website of the United States Department of Transportation and helps visitors understand how to tell that it is official. It is used across all sites except Transportation.gov.

Example of DOT banner

Accordion

An accordion is a list of headers that hide or reveal additional content when selected.

Closed

Example of closed accordion

Open

Example of an open accordion

Button

Buttons draw attention to important actions. The USDOT Web Design System uses a standard design for buttons across all sites with some minor exceptions, including buttons used on Build America and USMMA.

Main Button Style

Example of main button style

Build America and USMMA Button Style

Example of Build America and USMMA button style

Card

Cards are flexible content containers that can include images, links, and text.

Example of a card for news items

Example of a card with photo and title

Example of a card with text overlaid on a photo

Example of a card with text overlaid on an image

Transportation.gov

Below are some example cards with components used on Transportation.gov.

Operating Administration Sites

Below are some example cards with components used on OA sites.

Example of a OA site card used on carousels

Example of a large card used on OA sites

Example of a horizontal card used on OA sites

Contact Block

The contact block is placed in the left-side column and under the side navigation.

Example of a contact block

The related content block is placed in the left-side column and under the side navigation.

Transportation.gov

Example of a related contact block on Transportation.gov

OA Sites

Example of a related contact block on OA sites

The footer assists site visitors with finding what they need, from the bottom of every page.

Transportation.gov

The Transportation.gov footer contains five columns.

Example the footer on Transportation.gov

Operating Administration Sites

OA site footer is flexible and can utilize up to five columns.

Example the footer on FMCSA (OA site)

Build America

The Build America footer follows the main Transportation.gov footer layout.

Example the footer on Build America

USMMA

The USMMA footer uses a two-column format and includes an additional section at the top to promote student applications.

Example the footer on USMMA

Form Controls

The design system uses base form control elements provided by the Twitter Bootstrap framework. This includes text inputs, select lists, checkboxes, and radio buttons. Please refer to Bootstrap’s Forms documentation for more details.

Grid

The USDOT Web Design System utilizes Twitter Bootstrap’s flexible grid system to structure web page and content layout for all sites. The grid is mobile-first, accessible on all major browsers, and based on a twelve-column system.

Example of the Twitter Bootstrap grid

The header helps users identify where they are and provides a quick, organized way to reach the main sections of the website. The USDOT and OA headers include branding to identify the site, horizontal navigation, and site search.

Transportation.gov Header

The Transportation.gov header includes a logo, navigation, site search tool, and social media links. The navigation includes a regular menu and a mega menu.

Default

Example of the Transportation.gov header

Regular Menu (Expanded)

Example of the Transportation.gov header (regular menu expanded)

Mega Menu (Expanded)

Example of the Transportation.gov header (mega menu expanded)

Operating Administration Header

The OA header includes a logo, navigation, and site search tool. The navigation includes a regular menu and a mega menu.

Default

Example of the FHWA header (OA)

Regular Menu (Expanded)

Example of the FHWA header (OA, expanded)

Mega Menu (Expanded)

Example of the FTA header (OA, mega, expanded)

Build America Header

The Build America header includes a logo, navigation, site search tool, and “Today’s Interest Rate” block. The navigation includes a regular menu.

Default

Example of the Build America header

Expanded

Example of the Build America header (expanded)

USMMA Header

The USMMA header contains the USMMA crest, text logo, links, site search tool, and a sub navigation.

Default

Example of the USMMA header

Sub navigation (Expanded)

Example of the USMMA header (expanded)

Hero

The USDOT Web Design System is flexible and supports several implementations for the home page hero components.

General Specifications

Hero image dimensions: 2600px x 1114px
Transportation.gov hero text: 32px Lato 700 white (Hex value #FFFFFF)
OA hero text: 41.5px Open Sans white (Hex value #FFFFFF)

Transportation.gov Hero

Transportation.gov contains a full-bleed background image, which extends from one edge of the browser window to the other, with large text on an opaque overlay, as well as a site search block.

Example of the Transportation.gov hero

FHWA Hero

FHWA utilizes a full-bleed background image and large text with an opaque overlay to provide greater accessibility.

Example of the FHWA hero

FMCSA Hero

FMCSA utilizes a full-bleed background image with large text and an opaque overlay, and includes a news block component and a “FMCSA Highlights” carousel block with three or more promoted items.

Example of the FMCSA hero

FRA Hero

FRA utilizes a full-bleed background image with large text and an opaque overlay, and includes a carousel block with three or more promoted items.

Example of the FRA hero

FTA Hero

FTA utilizes a full-bleed background image with large text and an opaque overlay, and includes a carousel block with three or more promoted items.

Example of the FTA hero

PHMSA Hero

PHMSA utilizes a full-bleed background image with large text over an opaque overlay, a call-to-action button, a news block component, and a carousel block with three or more promoted items.

Example of the PHMSA hero

Seaway Hero

Seaway utilizes a full-bleed background image with large text and an opaque overlay, and a “Highlights” block with three promoted items.

Example of the Seaway hero

Build America

Build America utilizes a full-bleed background image with large text, and a “Working with the Build America Bureau” block.

Example of the Build America hero

Icons

Icons communicate meaning in a graphical user interface. The USDOT Web Design System uses open source Font Awesome icons on the project. If you need additional icons, refer to the implementation instructions at Font Awesome’s website.

Search allows users to search for specific content if they know what search terms to use or can’t find desired content in the main navigation. Each site contains a search widget in the header component that searches content for that site only.

Side Navigation

The USDOT Web Design System uses a two-level vertical navigation positioned in a left-hand column as is shown below.

Single Level

Example of a side navigation

Two Levels

Example of two-level side navigation

Table

Tables show tabular data in columns and rows. Tables can contain a header row, a header column, or both, depending on the data being presented. Table headers are offset with a grey background and bold text.

Example of a table

Tag

Tags draw attention to categorized content elements and are positioned in the left-hand column under the sub-navigation.

Transportation.gov

Example of tags on Transportation.gov

OA Sites

Example of tags on OA sites

Typography

Following the U.S. Web Design System, the USDOT Web Design System provides clear and consistent headings, highly legible body paragraphs, clear labels, and easy-to-use input fields. When text is overlaid on a background or image, the text must have enough of a color contrast in order to be readable. The USDOT Web Design System adheres to WCAG 2.0 Level AA standards for color contrast with a minimum of 3.1 contrast ratio for large text and 4.5.1 contrast ratio for regular text. (Large text is defined as 18pt and larger or 14pt and bold.) When choosing a background image, please choose graphics that will provide foreground text with a suitable contrast. The WebAIM Color Contrast Checker is a useful tool to measure the contrast ratio.

Fonts

Transportation.gov

Source Sans Pro serves as the base font transportation.gov. Source Sans Pro is a sans serif typeface designed to work well in user interfaces. It consists of a variety of weights including light, regular, semi bold, bold, and extrabold, which allows for a wide range of type treatments and hierarchies within a page while still maintaining a unified look and feel.

Operating Administration Sites

Open Sans serves as the base font for OA sites. The full Open Sans type family consists of a variety of weights including light, regular, semi bold, bold, and extrabold, which allows for a wide range of type treatments and hierarchies within a page while still maintaining a unified look and feel.

For WCAG 2.0 AA standards, large text is defined as text that is 18pt and larger, or 14pt and larger if it is bold. The color contrast standard for large text is a foreground: background color contrast ratio of at least 3:1. Regular text must have a foreground: background color contrast ratio of contrast ratio of at least 4.5:1. In other words, the smaller the text, the greater the color the contrast must be in order to pass WCAG 2.0 standards.

Headers

The USDOT Web Design System utilizes semantic HTML, which includes <main>, <article>, <section>, <aside>, <header>, <navigation>, and <footer> elements. Each element should begin with and contain one <h1> header tag, and additional header tags should follow a structured and logical order. Content authored in the Content Management System, however, should use <h2> tags and below; (<h3>, <h4>, etc.) and should not contain <h1> tags. The <h1> tag is autogenerated for the page title when content is authored.

All HTML headings, <h1> through <h6>, are available as described below.

Transportation.gov OA Sites

H1: 36px Lato Bold #133466
H2: 28px Source Sans Pro 700 #343F4E
H3: 24px Source Sans Pro #343F4E
H4: 22px Source Sans Pro 500 #3F4A5D
H5: 20px Source Sans Pro 500 #3F4A5D
H6: 18px Source Sans Pro 500 #3F4A5D

H1: 30px Open Sans 600 #194178
H2: 22.5px Open Sans 700 #72655F
H3: 20px Open Sans 700 #194178
H4: 19px Open Sans 700 #72655F
H5: 16px Open Sans 500 #212519
H6: 14px Open Sans 500 #72655F

Build America USMMA

H1: 32px Raleway 700 #0D5384
H2: 29px Raleway 400 #212529
H3: 21px Raleway 700 #212529
H4: 18px Raleway 700 #212529
H5: 18px Raleway 400 #212529
H6: 16px Raleway 400 #212529

H1: 50px Quantico Bold #173363
H2: 30px Quantico Bold #3F4A5D
H3: 26px Quantico Bold #3F4A5D
H4: 22px Quantico Bold #3F4A5D
H5: 20px Quantico Bold #3F4A5D
H6: 18px Quantico Bold #3F4A5D

Inline Elements

This is a paragraph.

This is a text link.

Strong is used to indicate strong importance.

This text has added emphasis using the <em> tag.

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation. The <u> element should rarely, if ever, be used; links should be the only underlined text for accessibility purposes.

This text is deleted and This text is inserted.

strikethrough has a strikethrough.

Superscript®

Subscript for things like H2O.

This small text is small for fine print, etc.

Lists

  • Unordered List
  1. Ordered List
Last updated: Monday, August 3, 2020