iDeas Lab Style Guides
Website Style Guide
Global Health Policy Center

The CSIS Commission on Strengthening America's Health Security

This website will be developed in conjunction with CSIS’s Commission on Strengthening America’s Health Security. The Commission will be comprised of a distinguished and diverse group of leaders from the fields of health and security. Over a two-year period, the Commission will focus on 5 pre-determined issues or pillars related to Health Security in addition to the overarching issue of health security. With the aid of an advisory group of subject experts, the Commission will periodically release series of papers and reports that aim to chart a new vision for the future of U.S. leadership in global health security.

The site will be the Commission and project’s online presence. It will be a resource for the commissioners as they convene and inform the general public and policy influencers on leading issues in health 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"=>"

Woven silk pyjamas exchanged for blue quartz.

", "extra_css"=>"font-family: Georgia,Times,\"Times New Roman\", serif; font-size: 32px; font-weight: 700; line-height: 1.31; color: #000;", "notes"=>""}{"group_title"=>"Header 2", "html"=>"

Woven silk pyjamas exchanged for blue quartz.

", "extra_css"=>"font-family:\"europa\", sans-serif !important; font-size: 26px; font-weight: 700; line-height: 1.38; color: #143459;", "notes"=>""}{"group_title"=>"Header 3", "html"=>"

Woven silk pyjamas exchanged for blue quartz.

", "extra_css"=>"font-family:\"europa\", sans-serif !important; font-size: 22px; color: #000; font-weight: 700; line-height: 1.45; ", "notes"=>""}{"group_title"=>"Header 4", "html"=>"

Woven silk pyjamas exchanged for blue quartz.

", "extra_css"=>"font-family:\"europa\", sans-serif !important; font-size: 20px; color: #000; font-weight: bold; line-height: 1.6; ", "notes"=>""}

Overview of pairings

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

Woven silk pyjamas exchanged for blue quartz.

", "extra_css"=>"font-family: Georgia,Times,\"Times New Roman\", serif; font-size: 32px; font-weight: 700; line-height: 1.31; color: #000;", "notes"=>""}{"group_title"=>"Header 2", "html"=>"

Woven silk pyjamas exchanged for blue quartz.

", "extra_css"=>"font-family:\"europa\", sans-serif !important; font-size: 26px; font-weight: 700; line-height: 1.38; color: #143459;", "notes"=>""}{"group_title"=>"Header 3", "html"=>"

Woven silk pyjamas exchanged for blue quartz.

", "extra_css"=>"font-family:\"europa\", sans-serif !important; font-size: 22px; color: #000; font-weight: 700; line-height: 1.45; ", "notes"=>""}{"group_title"=>"Header 4", "html"=>"

Woven silk pyjamas exchanged for blue quartz.

", "extra_css"=>"font-family:\"europa\", sans-serif !important; font-size: 20px; color: #000; font-weight: bold; line-height: 1.6; ", "notes"=>""}

Overview of pairings

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

Woven silk pyjamas exchanged for blue quartz.

", "extra_css"=>"font-family: Georgia,Times,\"Times New Roman\", serif; font-size: 32px; font-weight: 700; line-height: 1.31; color: #000;", "notes"=>""}{"group_title"=>"Header 2", "html"=>"

Woven silk pyjamas exchanged for blue quartz.

", "extra_css"=>"font-family:\"europa\", sans-serif !important; font-size: 26px; font-weight: 700; line-height: 1.38; color: #143459;", "notes"=>""}{"group_title"=>"Header 3", "html"=>"

Woven silk pyjamas exchanged for blue quartz.

", "extra_css"=>"font-family:\"europa\", sans-serif !important; font-size: 22px; color: #000; font-weight: 700; line-height: 1.45; ", "notes"=>""}{"group_title"=>"Header 4", "html"=>"

Woven silk pyjamas exchanged for blue quartz.

", "extra_css"=>"font-family:\"europa\", sans-serif !important; font-size: 20px; color: #000; font-weight: bold; line-height: 1.6; ", "notes"=>""}

Overview of pairings

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

Woven silk pyjamas exchanged for blue quartz.

", "extra_css"=>"font-family: Georgia,Times,\"Times New Roman\", serif; font-size: 32px; font-weight: 700; line-height: 1.31; color: #000;", "notes"=>""}{"group_title"=>"Header 2", "html"=>"

Woven silk pyjamas exchanged for blue quartz.

", "extra_css"=>"font-family:\"europa\", sans-serif !important; font-size: 26px; font-weight: 700; line-height: 1.38; color: #143459;", "notes"=>""}{"group_title"=>"Header 3", "html"=>"

Woven silk pyjamas exchanged for blue quartz.

", "extra_css"=>"font-family:\"europa\", sans-serif !important; font-size: 22px; color: #000; font-weight: 700; line-height: 1.45; ", "notes"=>""}{"group_title"=>"Header 4", "html"=>"

Woven silk pyjamas exchanged for blue quartz.

", "extra_css"=>"font-family:\"europa\", sans-serif !important; font-size: 20px; color: #000; font-weight: bold; line-height: 1.6; ", "notes"=>""}

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"=>"

Woven silk pyjamas exchanged for blue quartz.

", "extra_css"=>"font-family: Georgia,Times,\"Times New Roman\", serif; font-size: 32px; font-weight: 700; line-height: 1.31; color: #000;", "notes"=>""}{"group_title"=>"Header 2", "html"=>"

Woven silk pyjamas exchanged for blue quartz.

", "extra_css"=>"font-family:\"europa\", sans-serif !important; font-size: 26px; font-weight: 700; line-height: 1.38; color: #143459;", "notes"=>""}{"group_title"=>"Header 3", "html"=>"

Woven silk pyjamas exchanged for blue quartz.

", "extra_css"=>"font-family:\"europa\", sans-serif !important; font-size: 22px; color: #000; font-weight: 700; line-height: 1.45; ", "notes"=>""}{"group_title"=>"Header 4", "html"=>"

Woven silk pyjamas exchanged for blue quartz.

", "extra_css"=>"font-family:\"europa\", sans-serif !important; font-size: 20px; color: #000; font-weight: bold; line-height: 1.6; ", "notes"=>""}