Marine Blue
hex: #236192
scss variable: $color-brand-marine-blue
Dark Blue
hex: #0064c8
scss variable: $color-brand-dark-blue
Bright Green
hex: #00d649
scss variable: $color-brand-bright-green
Light Blue
hex: #2ec4ff
scss variable: $color-brand-light-blue

To add to these items, use Sass variables that start with $color-brand- in ./source/css/scss/abstracts/_variables.scss

Lightest Gray
hex: #f7f7f9
scss variable: $color-neutral-lightest-gray
Cool Gray
hex: #e2e2e2
scss variable: $color-neutral-cool-gray
Medium Cool Gray
hex: #b1b3b3
scss variable: $color-neutral-medium-cool-gray
Dark Cool Gray
hex: #53565a
scss variable: $color-neutral-dark-cool-gray

To add to these items, use Sass variables that start with $color-neutral- in ./source/css/scss/abstracts/_variables.scss

Yellow
hex: #ffc23b
scss variable: $color-accent-yellow
Violet
hex: #5c419e
scss variable: $color-accent-violet
Coral
hex: #f4715b
scss variable: $color-accent-coral

To add to these items, use Sass variables that start with $color-accent- in ./source/css/scss/abstracts/_variables.scss

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white

.bg-transparent

$font-family-primary: "Averta", "Helvetica", "Arial", sans-serif
$font-family-monospace: "SFMono-Regular", Menol, Monaco, Consolas, "Liberation Mono", "Courier New", monospace

To add to these items, use Sass variables that start with $font-family- in ./source/css/scss/abstracts/_variables.scss

$font-size-sm: 0.75rem
$font-size-sm-2: 0.85rem
$font-size-med: 1rem
$font-size-med-2: 1.2rem
$font-size-large: 2rem
$font-size-xl: 3rem

To add to these items, use Sass variables that start with $font-size- in ./source/css/scss/abstracts/_variables.scss

Bold text.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

Primary font: "Averta", Arial, Helvetica, sans-serif

Primary font italic: "Averta", Arial, Helvetica, sans-serif

Primary font bold: "Averta", Arial, Helvetica, sans-serif

Display 1

Display 2

Display 3

Display 4

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

~~This text is deleted~~ and This text is inserted

~~This text has a strikethrough~~

Superscript^®

Subscript for things like H₂O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variable element, such as x = y

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

Contextual text classes also work well on anchors with the provided hover and focus states.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
1. Phasellus iaculis neque
2. Purus sodales ultricies
3. Vestibulum laoreet porttitor sem
4. Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem