Body text copy,
Form input focus
Section background,
Secondary
Form input incorrect,
Extreme highlight,
Danger
Main menu link
hover or highlight
Subtle column or
cell background
Light border
Light border hover
Form input
label and border
Form input correct,
Success
Primary CTA button hover
Main title,
Text copy links
Primary CTA button
Main title lighter
background layer
Text border highlight
Neptune
Main title ampersand
lighter background layer
Main title ampersand
Typography
Typefaces
Font weights and styles
300
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 ‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
700
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 ‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
200i
Italic
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 ‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
400
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 ‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
400i
Italic
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 ‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
700
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 ‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
700
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 ‘?’“!”(%)[#]{@}/&\<-+÷×=>$€£¢:;,.*
Font sizes and usage
Heading 1
Description:
Level 1 heading. Single use for each page.
Markup:
<h1 class="page-heading"></h1>Heading 2
Subheading - optional supporting text
Description:
Level 2 heading. Significant vertical sections.
Markup:
<h2 class="section-heading"></h2>
Description:
Level 3 subheading (optional supporting text).
Markup:
<h3 class="subheading"></h3>Heading 3
Description:
Level 3 heading.
Markup:
<h3 class="heading-3"></h3>Heading 4
Description:
Level 4 heading.
Markup:
<h4 class="heading-4"></h4>Heading 5
Description:
Level 5 heading.
Markup:
<h5 class="heading-5"></h5>Lead intro text
Body copy text content. The width of each line of text should be limited to 56 - 60 characters.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam venenatis sapien at tellus hendrerit volutpat. Aliquam vitae accumsan libero. Mauris gravida mi at lectus sollicitudin consectetur. Donec quis augue ut risus tempus cursus. Suspendisse auctor nunc elit.
Phasellus pulvinar tellus eget ligula congue malesuada. Aliquam leo felis, fermentum nec luctus quis, tempus sed augue.
In laoreet massa nec velit faucibus consequat. Maecenas a sollicitudin justo, nec vestibulum justo.
Maecenas efficitur odio at egestas rutrum. Pellentesque laoreet commodo tellus vitae venenatis. Nam fringilla dictum diam.
Description:
Paragraph lead introduction text line (optional).
Markup:
<p class="lead"></p>
Description:
Paragraph. Body text copy.
Markup:
<p></p>
Description:
Paragraph 'bold' text.
Markup:
<p><strong></strong></p>
Description:
Paragraph 'italic' text.
Markup:
<p><i></i></p>
Description:
Paragraph 'inline hyperlink'.
Markup:
<p><a href="#"></a></p>Call to action
Buttons
Primary button
State:
Default
Pseudo states:
:hover, :active, :focus
State:
Disabled