Style Guide

Last updated: 12/7/2023

We’re updating the LINCS Style Guide

You’ll soon find more guidance on LINCS interface content, UI components, and usage. Check back soon.


 

Main Colors

 
#112e51
 
#205493
 
#03a7ce
 
#02bee6
 
#9bdaf1
 
 
#01061c
 
#0071bc
 
#dce4ef
 
#f1f1f1
 

Section Colors

 
#6798fc
 
#f06d2f
 
#fdb81e
 
#01ae94
 

Body Tag

(em base font-size: 10px) font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; font-weight: 400; font-size: 1.7rem; line-height: 1.5em; margin: 1em 0px; color: #323a45;

Header Tags

H1 tags should never be used within the body of the site. They are rendered through the drupal template at the top of each page. Header tags should not be used for "design" they should be used in a cascaded format. That is that an H3 tag should not appear before an H2 tag; an H4 before an H3 tag, etc. Block titles are presented as H2 tags and it is acceptable for a block body to contain H2-H6 tags. For reference

H1 Tag

(em base font-size: 10px) font-family: "Merriweather", "Georgia", "Cambria", "Times New Roman", "Times", serif; margin: 1.5em 0 .5em 0; color: #112e51; font-weight: 400; font-size: 3.6rem; line-height: 48px;

H2 Tag

(em base font-size: 10px) font-family: "Merriweather", "Georgia", "Cambria", "Times New Roman", "Times", serif; margin: 1.5em 0 .5em 0; color: #112e51; font-weight: 400; font-size: 2.5rem; line-height: 30px;

H3 Tag

(em base font-size: 10px) font-family: "Merriweather", "Georgia", "Cambria", "Times New Roman", "Times", serif; margin: 1.5em 0 .5em 0; color: #112e51; font-weight: 400; font-size: 2rem; line-height: 34px;

H4 Tag

(em base font-size: 10px) font-family: "Merriweather", "Georgia", "Cambria", "Times New Roman", "Times", serif; margin: 1.5em 0 .5em 0; color: #112e51; font-weight: 400; font-size: 1.7rem; line-height: 26px;

H5 Tag

(em base font-size: 10px) font-family: "Merriweather", "Georgia", "Cambria", "Times New Roman", "Times", serif; margin: 1.5em 0 .5em 0; color: #112e51; font-weight: 400; font-size: 1.5rem; line-height: 1.3;

H6 Tag

(em base font-size: 10px) font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; text-transform: uppercase; margin: 1.5em 0 .5em 0; color: #112e51; font-weight: 700; font-size: 1.3rem; line-height: 1.3;

Paragraphs

Long-form content (such as this document) should leverage P tags for separating paragraphs.

Lists

There are three major types of semantic HTML lists: UL (unordered, a.k.a. bulleted), OL (ordered, a.k.a. numbered), and DL (definition lists). Additionally Drupal (the CMS) makes use of several non-semantic list-like structures using DIV tags with specific classes assigned. Whenever possibly you are encouraged to use the semantic HTML list types.

UL (Unordered, a.k.a. Bulleted Lists)

  • First bullet
    • Nested bullet (two-deep)
      • Nested bullet (three-deep)
        • Nested bullet (four-deep)
  • Second bullet
  • Third bullet

OL (Ordered, a.k.a. Ordered Lists)

  1. First bullet
    1. Nested bullet (two-deep)
      1. Nested bullet (three-deep)
        1. Nested bullet (four-deep)
  2. Second bullet
  3. Third bullet

DL (Definition Lists)

Definition Term (DT tag)

Definition one (DD tag)

Definition two

Blockquotes and Cites

Blockquotes should not be used for indentation but used when quoting something:

"The integration of professional wisdom with the best available empirical evidence in making decisions about how to deliver instruction." Quote from Dr. Grover (Russ) Whitehurst, former director of the Institute of Education Sciences within the U.S. Department of Education

Inline Styles

Inline styles consistent non-block-level elements such as EM, STRONG, A, IMG (see more about images below), SUBscript, SUPscript, ABBR, etc.

Images

Information to come.

Buttons

We also have a button style for the LINCS websites. This style sheet applies them to the element that is assigned a class of .button or .button-alt. It's recommended that these classes be assigned to anchor tags (A) or buttons (BUTTON tag):

Button

Button Alt

Button Alt2

Button Button Mini modifier

Blocks

Blocks are Drupal specific layout elements. Below are common styles for skinning individual blocks.

Block Title

Standard block content.

We have three alternate classes which can be used to apply simple styles to existing blocks.

Block Title

block-layout1 content.

Block Title

block-layout2 content.

Block Title

block-layout3 content.

 

 

 

Block Layout Archive Disclaimer Title

block-layout-archive-disclaimer content. 

Current content for all archive disclaimers reads as:

Please note: This page contains archived content from the lincs.ed.gov e-mail discussion list system, which was disabled in 2012. The content on this page is available for archival purposes only. Hyperlinks on this page may be broken or may no longer link to the content specified from within the archive posting. In addition, information displayed on this page may no longer be relevant.

Block Title

block-callout1 content.

Block Title

block-callout2 content.

Block Title

block-callout3 content.