global

The global category defines visual elements such as color, font families, and motion. While not technically UI components, these elements are critical to document in the pattern library.

Brand Colors

▼
  • $color-brand-green
    #5C832F
  • $color-brand-brown
    #825534

Neutral Colors

▼
  • $color-white
    #ffffff
  • $color-gray-02
    #f7f9f9
  • $color-gray-15
    #d9d9d9
  • $color-gray-35
    #a5a5a5
  • $color-gray-50
    #808080
  • $color-gray-65
    #595959
  • $color-gray-73
    #444444
  • $color-gray-87
    #222222
  • $color-black
    #000000

Utility Colors

▼
  • $color-utility-positive
    #03804d
  • $color-utility-positive-subtle
    #d4f3e6
  • $color-utility-caution
    #a59b15
  • $color-utility-caution-subtle
    #fffecf
  • $color-utility-negative
    #b12a0b
  • $color-utility-negative-subtle
    #fdded8
  • $color-utility-neutral
    #0192d0
  • $color-utility-neutral-subtle
    #d3f2ff

Fonts

▼
Primary font: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
Primary font italic: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
Primary font bold: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
Secondary font: Georgia, Times, "Times New Roman", serif;
Secondary font italic: Georgia, Times, "Times New Roman", serif;
Secondary font bold; Georgia, Times, "Times New Roman", serif;

Animations

▼
Fade: Duration: 0.3s Easing: ease-out (Hover to see effect)

Button

▼

Text Button

▼
Button

Progress

▼

Text Field

▼

Text Area

▼

Select Menu

▼

Radio Button

▼

Checkbox

▼

Avatar Image

▼
Avatar

Hero Image

▼
Hero Image

Landscape Image

▼
Landscape Image

Square Image

▼
Square Image

text

Headings

▼

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Horizontal Rule

▼

Inline Elements

▼

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 H2O

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 variarble element, such as x = y

Paragraph

▼

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.

Preformatted Text

▼ 
  	
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~

Hero

▼
Hero Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit iopa. (76 characters)

Media Block inreview

▼
Square Image

Lorem ipsum dolor sit (37 characters)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tile inreview

▼
12

Lorem ipsum dolor sit (37 characters)

Tout

▼
Landscape Image

Lorem ipsum dolor sit (37 characters)

Field

▼

Text Area

▼

One Up Grid Layout

▼
1/1

Figure with Caption inreview

▼
Landscape Image
This is an example of an image with a caption. Photo captions, also known as cutlines, are a few lines of text used to explain or elaborate on published photographs.

Alert

▼
An alert is messaging that tells the user some information. Alerts can be error, warning, success, or info messages

Overlay

▼

Let's go on a hike and climb in elevation

Find a Hike

Pagination

▼
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7

Primary Navigation

▼

text

Blockquote

▼
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.
Wikiepedia

Header inreview

▼

Stacked Form inreview

▼

Media List inreview

▼

Tile List inreview

▼

Tout List inreview

▼

Media List Section inreview

▼

Section Title

Button

Tile Grid inreview

▼
12

Lorem ipsum dolor sit (37 characters)

text

Page Header

▼

Page Title

Text Blob

▼

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, unde, dolore? Ex fugit, necessitatibus tempore neque ullam nostrum ducimus alias beatae voluptatibus iusto, perspiciatis tenetur consectetur reprehenderit, harum quae rerum!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit corrupti fuga, quas quisquam perspiciatis. Consequatur, atque ducimus dolores natus officia qui rerum consectetur repellat ullam accusantium laboriosam, reprehenderit nemo deleniti