Skip to main content

This style guide provides examples of the application of FTC graphic elements and formatting of web materials. It addresses typography, colors, interactive states, and more. It was developed to ensure consistency in the look and feel of FTC.gov, and to provide visual cues and stylistic interest to online users.  

 


Logo

 

 


Primary Colors

 
Dark Navy
#1D3557
 
 
Blue
#065CB4
 
 
Light Blue
#E6F1FD
 
 
Dark Gray
#414751
 
 
Medium Gray
#D2D7DD
 
 
Light Gray
#F2F3F4

 

 


Secondary Colors

 
Red
#DB504A
 
 
Gold
#E7A941
 
 
Teal
#2E9591
 
 
Green
#2E9557
 

 

 


Social Icons

        

Font Awesome

Iconography for top tasks and take action links can be pulled from the Font Awesome icon library. Icons should be sized relative to the text it accompanies, roughly 25x25 pixels and in FTC Navy. Below are examples of icons used throughout the site. New icons may be downloaded from Font Awesome.

Icons from Font Awesome

 

 


Button

 

 


Typefaces

Cormorant is the primary typeface for headlines.

Cormorant font

Inter is used for body text, navigation, and sidebar headings.

Inter font

 

 


Headings 

The page header is the title to your page. This is also referred to as Header 1 or H1. Because it is used as the title, there can only be one H1 per page. When titling your page it is important to accurately describe the pages’s content so that search engines can find your page. For this same reason we recommend never omitting an H1 on any given page. The Header 1 is: Cormorant Medium 48pt, with a line-height of 120% and a color of #1D3557.

Heading 2

The above title is created by selecting Heading 2 from the format dropdown in the WYSIWYG. The Header 2 is: Cormorant Semibold 32px, with a line-height of 123.5% and a color of #1D3557.

Heading 3

The above title is created by selecting Heading 3 from the format dropdown in the WYSIWYG. The Third Level Header is used to separate sub sections with a clear sense of hierarchy within a Sub Section. The Header 3 is: Cormorant Semibold 28px with a line-height of 115% and a color of #1D3557.

Heading 4

The above title is created by selecting Heading 4 from the format dropdown in the WYSIWYG. The Fourth Level Header provides yet another level to help break a page up into easily digested sections. The Header 4 is: Cormorant Semibold 22px with a line-height of 115% and a color of #1D3557.

Heading 5

The above title is created by selecting Heading 5 from the format dropdown in the WYSIWYG. The Fifth Level Header provides yet another level to help break a page up into easily digested sections. The Header 5 is: Cormorant Semibold 20px with a line-height of 115% and a color of #1D3557.

 

 


Paragraph Styles

This is the paragraph style, Inter Regular 17px, 33px line height. This sentence includes a default hyperlink style.

The intro paragraph style can be applied to a subtitle and is found in the WYSIWYG editor. 

This callout block appears at the top of several pages. It’s set in Cormorant Semibold, 28 pt/38 pt, #1D3557. This block should include a short paragraph, roughly this length. Do not use this for a very lengthy paragraph.

 

 


Pull-Quote

This is a pullquote style. The pullquote is Cormorant Semibold, 30px, 137.5% line-height, #1D3557. Use this style to highlight a short quote. Do not use this style on a very long quote or multiple paragraphs.”

– This is the quote caption style. Inter regular 16/22. 

 

 


List Styles

Ordered List

  1. Lacus lacinia aliquam
  2. Et felis et
    1. Cras dignissim auctor
    2. Amet lacinia sed
    3. Mi sit ipsum
  3. Cras dignissim auctor
  4. Amet lacinia sed
  5. Mi sit ipsum

Unordered List

  • Lacus lacinia aliquam
  • Et felis et
    • Cras dignissim auctor
    • Amet lacinia sed
    • Mi sit ipsum
  • Cras dignissim auctor
  • Amet lacinia sed
  • Mi sit ipsum

Unordered List with 'Icon List' style applied

  • Lacus lacinia aliquam
  • Cras dignissim auctor
  • Amet lacinia sed
  • Mi sit ipsum

Unordered List with 'Unstyled List' style applied

  • Lacus lacinia aliquam
  • Cras dignissim auctor
  • Amet lacinia sed
  • Mi sit ipsum

Unordered List with 'Unstyled List Columns' style applied 

  • Lacus lacinia aliquam
  • Cras dignissim auctor
  • Amet lacinia sed
  • Mi sit ipsum

 

 


Accordions

 

 


Card Group

Lorem Ipsum

Placeholder for the alt text

Eget porta lobortis lorem lacinia sed magna sed tempor enim lobortis est urna adipiscing neque felis nam convallis id lorem aliquam tincidunt urna dignissim.

Dolor Sit Amet

Placeholder for the alt text

Magna vulputate iaculis consectetur et nam enim velit magna erat lorem dui venenatis ante vulputate nunc dictum dignissim aliquam.

Consectiteur

Placeholder for the alt text

enim lobortis est urna adipiscing neque felis nam convallis id lorem aliquam tincidunt urna dign.

 

 


Graphic List 

COVID-19 Visualization Map

Magnaa morbi onec iam nulla ultricie.

Tur suscipit praesent lorem tortor diamin. Aliquama tortorp non anunc tique rissed sodale. Rissed egestas dolornu ellus teger posuere liquam massased. Tique diamin ulla at ullam orciduis faucibus aliquam potent.

Computer-generated illustration of gray and red coronavirus cell on solid black background

Ellus facilis enim lum cras nequen

Cursus justov unc curabitu lacuse ulla. Teger gravida lacusnam proin pharetr rhoncus adipisci massama auris natis. Temporin imperdie at convalli cras cidunt non suscipit eger blandi.

 

 


Ribbon CTA

Sign up to get e-mail updates.

Stay connected

 

 


Alerts

 

 

 


Embedded Submenu

 

 


Filters

 

 


Table

Vulputate dignissim vitae Massa amet tempor Sit amet viverra Lacus egestas in Fusce amet convallis
Ac malesuada et Et nam auctor Eu lacus magna Consequat mi sed Est tempor consectetur
Sit eros tempor Tortor nam dignissim Tincidunt duis convallis Eros magna eget Massa magna lobortis
Fusce convallis auctor Erat lacus ut Ac enim est Et mattis lacinia Sit sit erat
Urna sit dignissim Nam sed elementum Iaculis magna in Mattis tincidunt enim Lorem aliquam tempor
Elementum est nam Nisl convallis in Turpis tortor tortor Amet auctor orci In nec amet

 

 


Pager

 

 


Breadcrumb

 

 


Images

Image
"Default" display of image media item with caption.
Image
FTC Seal
"25% Width" display with right alignment and caption.

 

Image
FTC Seal
"50% Width" display with center alignment and caption.

 

Image
FTC Seal
"100% Width" display with caption.

 

 


Video

The referenced media source is missing and needs to be re-embedded.

 

 


Document

 

 


PDF 

 

 


Search Form

 

 


Search Results

Mar10

Panel: Top Scams Affecting People in MA

-
Join the FTC, Massachusetts Office of Consumer Affairs, Better Business Bureau, AARP, and Internal Revenue Service for a panel focused on top scams affecting people in Massachusetts. Register to...

 

 


US Government Web Design Standards

Review the US Government Web Design Standards at https://standards.usa.gov/