Color Palette

  • $palette-dark #1b1d21
  • $palette-emphasis #1b2435
  • $palette-light #f7f7f9
  • $palette-text #272b31
  • $palette-light-text #858789
  • $palette-primary #1481a4
  • $palette-secondary #62778e
  • $palette-border #d8d8d8
  • $palette-success #2fa708
  • $palette-error #f54323

Font Families

  • Aa
    Lato Light Weight: 300 Style: Normal
  • Aa
    Lato Regular Weight: 400 Style: Normal
  • Aa
    Lato Regular Italic Weight: 400 Style: Italic
  • Aa
    Lato Bold Weight: 700 Style: Normal
  • Aa
    Merriweather Light Weight: 300 Style: Normal
  • Aa
    Merriweather Regular Weight: 400 Style: Normal
  • Aa
    Merriweather Regular Italic Weight: 400 Style: Italic

Typography

Headings

Eyebrow

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, laboriosam nihil expedita aliquid architecto iure, dolore impedit. Doloremque modi, quasi obcaecati laudantium incidunt, tenetur nam accusamus error, tempore sequi illo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, laboriosam nihil expedita aliquid architecto iure, dolore impedit. Doloremque modi, quasi obcaecati laudantium incidunt, tenetur nam accusamus error, tempore sequi illo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, laboriosam nihil expedita aliquid architecto iure, dolore impedit. Doloremque modi, quasi obcaecati laudantium incidunt, tenetur nam accusamus error, tempore sequi illo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, laboriosam nihil expedita aliquid architecto iure, dolore impedit. Doloremque modi, quasi obcaecati laudantium incidunt, tenetur nam accusamus error, tempore sequi illo.

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam sint doloremque officiis ut, doloribus, totam mollitia dicta. Explicabo nemo est maxime recusandae placeat cum quae quidem, quia magni.

Blockquote Caption

Other Type

Strong Copy

Emphasized Copy

Inline Anchor Link

Small Copy

  • Onions
  • Tomatos
  • Beans
  1. Onions
  2. Tomatos
  3. Beans

Horizontal Rulers


Buttons

Styles

Sizing

Responsive

Action Buttons

Default

With Text

{Button Label}
{Button Label}

Tab Buttons

Filter Buttons

Cards

Eyebrow

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ut necessitatibus aperiam maiores sapiente.

Card Button
Eyebrow

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ut necessitatibus aperiam maiores sapiente.

Card Button

Forms

Inputs

Required fields are followed by *

uploaded file no file uploaded

Select

Radio + Checkboxes

Select An Option

Grid

@include grid-cell(12)
@include grid-cell(1)
@include grid-cell(11)
@include grid-cell(2)
@include grid-cell(10)
@include grid-cell(3)
@include grid-cell(9)
@include grid-cell(4)
@include grid-cell(8)
@include grid-cell(5)
@include grid-cell(7)
@include grid-cell(6)
@include grid-cell(6)

Spacing

@include grid-cell(5, 2)
@include grid-cell(5, 8)

Images

Default

alt text

Round

alt text

Video

Custom Player

Vimeo Player

YouTube Player

Maps

Modules