iDeas Lab Style Guides
Website Style Guide
Aerospace Security Project

Aerospace Security

The Aerospace Security Project aims to expand their audience and published content potential with a new website. This site will act as a one-stop shop of data-driven commentaries, expert analysis, introductory materials, and data repositories focusing on issues facing decision makers in the air and space domains.

The site will offer users a chance to interact with the latest data and commentary using a variety of content types, attracting both technical experts and curious newcomers to space policy and security.

Typography

Headings

Headings define the title of a section in text content, and they are usually a bit larger and/or more distinctive than surrounding text. Sizes are defined from H1 to H6.

A few rules of thumb:

  1. Make sure to use them! Using bold text instead of a heading is not enough. This negatively affects accessibility, as the underlying code does not reflect the intended hierarchy.
  2. Use headings in order of their hierarchy. Do not select heading levels based on their appearance.

Overview of pairings

Headings
{"group_title"=>"Header 1", "html"=>"

The July sun caused a fragment of black pine wax to ooze on the velvet quilt.

", "extra_css"=>"font-family: \"Abel\", sans-serif !important; font-size: 36px; font-weight: 700; line-height: 36px; color: #18384f", "notes"=>"Only used for page titles"}{"group_title"=>"Header 2", "html"=>"

The July sun caused a fragment of black pine wax to ooze on the velvet quilt.

", "notes"=>"", "extra_css"=>"font-family:\"Abel\", sans-serif !important; font-size: 36px; font-weight: 700; line-height: 42.12px; color: #185271;"}{"group_title"=>"Header 3", "html"=>"

The July sun caused a fragment of black pine wax to ooze on the velvet quilt.

", "notes"=>"", "extra_css"=>"font-family:\"Abel\", sans-serif !important; font-size: 28px; font-weight: 700; line-height: 40.04px; color: #000000;"}{"html"=>"

The July sun caused a fragment of black pine wax to ooze on the velvet quilt.

", "group_title"=>"Header 4", "notes"=>"", "extra_css"=>"font-family:\"Source Sans Pro\", sans-serif !important; font-size: 20px; font-weight: 600; line-height: 20px; color: #000000;"}

Overview of pairings

Headings
{"group_title"=>"Header 1", "html"=>"

The July sun caused a fragment of black pine wax to ooze on the velvet quilt.

", "extra_css"=>"font-family: \"Abel\", sans-serif !important; font-size: 36px; font-weight: 700; line-height: 36px; color: #18384f", "notes"=>"Only used for page titles"}{"group_title"=>"Header 2", "html"=>"

The July sun caused a fragment of black pine wax to ooze on the velvet quilt.

", "notes"=>"", "extra_css"=>"font-family:\"Abel\", sans-serif !important; font-size: 36px; font-weight: 700; line-height: 42.12px; color: #185271;"}{"group_title"=>"Header 3", "html"=>"

The July sun caused a fragment of black pine wax to ooze on the velvet quilt.

", "notes"=>"", "extra_css"=>"font-family:\"Abel\", sans-serif !important; font-size: 28px; font-weight: 700; line-height: 40.04px; color: #000000;"}{"html"=>"

The July sun caused a fragment of black pine wax to ooze on the velvet quilt.

", "group_title"=>"Header 4", "notes"=>"", "extra_css"=>"font-family:\"Source Sans Pro\", sans-serif !important; font-size: 20px; font-weight: 600; line-height: 20px; color: #000000;"}

Overview of pairings

Headings
{"group_title"=>"Header 1", "html"=>"

The July sun caused a fragment of black pine wax to ooze on the velvet quilt.

", "extra_css"=>"font-family: \"Abel\", sans-serif !important; font-size: 36px; font-weight: 700; line-height: 36px; color: #18384f", "notes"=>"Only used for page titles"}{"group_title"=>"Header 2", "html"=>"

The July sun caused a fragment of black pine wax to ooze on the velvet quilt.

", "notes"=>"", "extra_css"=>"font-family:\"Abel\", sans-serif !important; font-size: 36px; font-weight: 700; line-height: 42.12px; color: #185271;"}{"group_title"=>"Header 3", "html"=>"

The July sun caused a fragment of black pine wax to ooze on the velvet quilt.

", "notes"=>"", "extra_css"=>"font-family:\"Abel\", sans-serif !important; font-size: 28px; font-weight: 700; line-height: 40.04px; color: #000000;"}{"html"=>"

The July sun caused a fragment of black pine wax to ooze on the velvet quilt.

", "group_title"=>"Header 4", "notes"=>"", "extra_css"=>"font-family:\"Source Sans Pro\", sans-serif !important; font-size: 20px; font-weight: 600; line-height: 20px; color: #000000;"}

Overview of pairings

Headings
{"group_title"=>"Header 1", "html"=>"

The July sun caused a fragment of black pine wax to ooze on the velvet quilt.

", "extra_css"=>"font-family: \"Abel\", sans-serif !important; font-size: 36px; font-weight: 700; line-height: 36px; color: #18384f", "notes"=>"Only used for page titles"}{"group_title"=>"Header 2", "html"=>"

The July sun caused a fragment of black pine wax to ooze on the velvet quilt.

", "notes"=>"", "extra_css"=>"font-family:\"Abel\", sans-serif !important; font-size: 36px; font-weight: 700; line-height: 42.12px; color: #185271;"}{"group_title"=>"Header 3", "html"=>"

The July sun caused a fragment of black pine wax to ooze on the velvet quilt.

", "notes"=>"", "extra_css"=>"font-family:\"Abel\", sans-serif !important; font-size: 28px; font-weight: 700; line-height: 40.04px; color: #000000;"}{"html"=>"

The July sun caused a fragment of black pine wax to ooze on the velvet quilt.

", "group_title"=>"Header 4", "notes"=>"", "extra_css"=>"font-family:\"Source Sans Pro\", sans-serif !important; font-size: 20px; font-weight: 600; line-height: 20px; color: #000000;"}

Elements

The following styles represent areas of text content that are frequently used within the page or post’s main written content (not UI elements).

Overview of pairings

Headings
{"group_title"=>"Header 1", "html"=>"

The July sun caused a fragment of black pine wax to ooze on the velvet quilt.

", "extra_css"=>"font-family: \"Abel\", sans-serif !important; font-size: 36px; font-weight: 700; line-height: 36px; color: #18384f", "notes"=>"Only used for page titles"}{"group_title"=>"Header 2", "html"=>"

The July sun caused a fragment of black pine wax to ooze on the velvet quilt.

", "notes"=>"", "extra_css"=>"font-family:\"Abel\", sans-serif !important; font-size: 36px; font-weight: 700; line-height: 42.12px; color: #185271;"}{"group_title"=>"Header 3", "html"=>"

The July sun caused a fragment of black pine wax to ooze on the velvet quilt.

", "notes"=>"", "extra_css"=>"font-family:\"Abel\", sans-serif !important; font-size: 28px; font-weight: 700; line-height: 40.04px; color: #000000;"}{"html"=>"

The July sun caused a fragment of black pine wax to ooze on the velvet quilt.

", "group_title"=>"Header 4", "notes"=>"", "extra_css"=>"font-family:\"Source Sans Pro\", sans-serif !important; font-size: 20px; font-weight: 600; line-height: 20px; color: #000000;"}

Overview of pairings

Headings
{"group_title"=>"Header 1", "html"=>"

The July sun caused a fragment of black pine wax to ooze on the velvet quilt.

", "extra_css"=>"font-family: \"Abel\", sans-serif !important; font-size: 36px; font-weight: 700; line-height: 36px; color: #18384f", "notes"=>"Only used for page titles"}{"group_title"=>"Header 2", "html"=>"

The July sun caused a fragment of black pine wax to ooze on the velvet quilt.

", "notes"=>"", "extra_css"=>"font-family:\"Abel\", sans-serif !important; font-size: 36px; font-weight: 700; line-height: 42.12px; color: #185271;"}{"group_title"=>"Header 3", "html"=>"

The July sun caused a fragment of black pine wax to ooze on the velvet quilt.

", "notes"=>"", "extra_css"=>"font-family:\"Abel\", sans-serif !important; font-size: 28px; font-weight: 700; line-height: 40.04px; color: #000000;"}{"html"=>"

The July sun caused a fragment of black pine wax to ooze on the velvet quilt.

", "group_title"=>"Header 4", "notes"=>"", "extra_css"=>"font-family:\"Source Sans Pro\", sans-serif !important; font-size: 20px; font-weight: 600; line-height: 20px; color: #000000;"}