iDeas Lab Style Guides
Website Style Guide
Project on Nuclear Issues (PONI)

Next Generation Nuclear Network

Next Generation Nuclear Network “aims to build and sustain a networked community of young nuclear experts from the military, national laboratories, industry, academia, and policy communities.” The website is a platform for sharing the latest developments in nuclear initiatives, and it aims to inform and support the next generation of young professionals in related fields.

This website will offer users numerous ways to be involved in the community, both on the internet and off.

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", "notes"=>"", "html"=>"

A wizard's job is to vex chumps quickly in fog.


", "extra_css"=>"font-family: \"Lato\", sans-serif; font-size: 50px; font-weight: 400; line-height: 1.2; color: #235d94;"}{"group_title"=>"Header 2", "notes"=>"", "html"=>"

A wizard's job is to vex chumps quickly in fog.


", "extra_css"=>"font-family: \"Lato\", sans-serif; font-size: 30px; font-weight: 300; line-height: 1.2; color: #235d94;"}{"notes"=>"", "html"=>"

A wizard's job is to vex chumps quickly in fog.


", "extra_css"=>"font-family: \"Lato\", sans-serif; font-size: 26px; font-weight: 400; line-height: 1.2; color: #000;", "group_title"=>"Header 3"}{"group_title"=>"Header 4", "notes"=>"", "html"=>"

A wizard's job is to vex chumps quickly in fog.


", "extra_css"=>"font-family: \"Lato\", sans-serif; font-size: 20px; font-weight: 300; line-height: 25px; color: #000;"}

Overview of pairings

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

A wizard's job is to vex chumps quickly in fog.


", "extra_css"=>"font-family: \"Lato\", sans-serif; font-size: 50px; font-weight: 400; line-height: 1.2; color: #235d94;"}{"group_title"=>"Header 2", "notes"=>"", "html"=>"

A wizard's job is to vex chumps quickly in fog.


", "extra_css"=>"font-family: \"Lato\", sans-serif; font-size: 30px; font-weight: 300; line-height: 1.2; color: #235d94;"}{"notes"=>"", "html"=>"

A wizard's job is to vex chumps quickly in fog.


", "extra_css"=>"font-family: \"Lato\", sans-serif; font-size: 26px; font-weight: 400; line-height: 1.2; color: #000;", "group_title"=>"Header 3"}{"group_title"=>"Header 4", "notes"=>"", "html"=>"

A wizard's job is to vex chumps quickly in fog.


", "extra_css"=>"font-family: \"Lato\", sans-serif; font-size: 20px; font-weight: 300; line-height: 25px; color: #000;"}

Overview of pairings

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

A wizard's job is to vex chumps quickly in fog.


", "extra_css"=>"font-family: \"Lato\", sans-serif; font-size: 50px; font-weight: 400; line-height: 1.2; color: #235d94;"}{"group_title"=>"Header 2", "notes"=>"", "html"=>"

A wizard's job is to vex chumps quickly in fog.


", "extra_css"=>"font-family: \"Lato\", sans-serif; font-size: 30px; font-weight: 300; line-height: 1.2; color: #235d94;"}{"notes"=>"", "html"=>"

A wizard's job is to vex chumps quickly in fog.


", "extra_css"=>"font-family: \"Lato\", sans-serif; font-size: 26px; font-weight: 400; line-height: 1.2; color: #000;", "group_title"=>"Header 3"}{"group_title"=>"Header 4", "notes"=>"", "html"=>"

A wizard's job is to vex chumps quickly in fog.


", "extra_css"=>"font-family: \"Lato\", sans-serif; font-size: 20px; font-weight: 300; line-height: 25px; color: #000;"}

Overview of pairings

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

A wizard's job is to vex chumps quickly in fog.


", "extra_css"=>"font-family: \"Lato\", sans-serif; font-size: 50px; font-weight: 400; line-height: 1.2; color: #235d94;"}{"group_title"=>"Header 2", "notes"=>"", "html"=>"

A wizard's job is to vex chumps quickly in fog.


", "extra_css"=>"font-family: \"Lato\", sans-serif; font-size: 30px; font-weight: 300; line-height: 1.2; color: #235d94;"}{"notes"=>"", "html"=>"

A wizard's job is to vex chumps quickly in fog.


", "extra_css"=>"font-family: \"Lato\", sans-serif; font-size: 26px; font-weight: 400; line-height: 1.2; color: #000;", "group_title"=>"Header 3"}{"group_title"=>"Header 4", "notes"=>"", "html"=>"

A wizard's job is to vex chumps quickly in fog.


", "extra_css"=>"font-family: \"Lato\", sans-serif; font-size: 20px; font-weight: 300; line-height: 25px; color: #000;"}

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", "notes"=>"", "html"=>"

A wizard's job is to vex chumps quickly in fog.


", "extra_css"=>"font-family: \"Lato\", sans-serif; font-size: 50px; font-weight: 400; line-height: 1.2; color: #235d94;"}{"group_title"=>"Header 2", "notes"=>"", "html"=>"

A wizard's job is to vex chumps quickly in fog.


", "extra_css"=>"font-family: \"Lato\", sans-serif; font-size: 30px; font-weight: 300; line-height: 1.2; color: #235d94;"}{"notes"=>"", "html"=>"

A wizard's job is to vex chumps quickly in fog.


", "extra_css"=>"font-family: \"Lato\", sans-serif; font-size: 26px; font-weight: 400; line-height: 1.2; color: #000;", "group_title"=>"Header 3"}{"group_title"=>"Header 4", "notes"=>"", "html"=>"

A wizard's job is to vex chumps quickly in fog.


", "extra_css"=>"font-family: \"Lato\", sans-serif; font-size: 20px; font-weight: 300; line-height: 25px; color: #000;"}

Overview of pairings

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

A wizard's job is to vex chumps quickly in fog.


", "extra_css"=>"font-family: \"Lato\", sans-serif; font-size: 50px; font-weight: 400; line-height: 1.2; color: #235d94;"}{"group_title"=>"Header 2", "notes"=>"", "html"=>"

A wizard's job is to vex chumps quickly in fog.


", "extra_css"=>"font-family: \"Lato\", sans-serif; font-size: 30px; font-weight: 300; line-height: 1.2; color: #235d94;"}{"notes"=>"", "html"=>"

A wizard's job is to vex chumps quickly in fog.


", "extra_css"=>"font-family: \"Lato\", sans-serif; font-size: 26px; font-weight: 400; line-height: 1.2; color: #000;", "group_title"=>"Header 3"}{"group_title"=>"Header 4", "notes"=>"", "html"=>"

A wizard's job is to vex chumps quickly in fog.


", "extra_css"=>"font-family: \"Lato\", sans-serif; font-size: 20px; font-weight: 300; line-height: 25px; color: #000;"}