Style Guide

Brand Palette

Color One#113C53$primary.color-primary.color-primary-bg
Color Two#004F72$primary-variant-1.color-primary-variant-1.color-primary-variant-1-bg
Color Three#E6CE44$primary-variant-2.color-primary-variant-2.color-primary-variant-2-bg
Color Four#D8E8F2$secondary.color-secondary.color-secondary-bg
Color Five#1282CB$secondary-variant-1.color-secondary-variant-1.color-secondary-variant-1-bg
Color Six#083058$secondary-variant-2.color-secondary-variant-2.color-secondary-variant-2-bg

Gray Scale

Black#242B2E$black.color-black.color-black-bg
Dark Gray#3B4A50$dark-gray.color-dark-gray.color-dark-gray-bg
Medium Gray#677E88$medium-gray.color-medium-gray.color-medium-gray-bg
Light Gray#EDEDED$light-gray.color-light-gray.color-light-gray-bg
White#FDFDFD$white.color-white.color-white-bg

Status Colors

Success#1BD330$success.color-success.color-success-bg
Warning#FF7621$warning.color-warning.color-warning-bg
Alert#FA0026$alert.color-alert.color-alert-bg

Buttons

Dark variant
Primary button
Secondary button
Tertiary button
Light variant
Primary button
Secondary button
Tertiary button

External Primary Button

Dark variant
Primary button
Secondary button
Light variant
Primary button
Secondary button

Download Primary Button

Dark variant
Primary button
Secondary button
Light variant
Primary button
Secondary button

Social Media

Light variant

Hyper Links

Light variant

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Typography

Paragraph

This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content—so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Use the <strong> and <em> tags to denote text that should be displayed or read with emphasis. Browsers will bold and italicize the words, while screen readers will read them with emphasis.

Header

The quick brown fox jumps over the lazy dog (H1)

The quick brown fox jumps over the lazy dog (H2)

The quick brown fox jumps over the lazy dog (H3)

The quick brown fox jumps over the lazy dog (H4)

The quick brown fox jumps over the lazy dog (H5)
The quick brown fox jumps over the lazy dog (H6)

Small Header Segments

By inserting a <small> element into a header Foundation will scale the header font size down for an inline element, allowing you to use this for subtitles or other secondary header text.

Foundation for Sites Version 6.6.3

Links

Links are very standard, and the color is preset to the Foundation primary color. Learn more about Foundation's global colors.

Dividers

Use dividers to define thematic breaks between paragraphs. To denote the end of one section of a page and the start of another, it's better to use the <section> tag.

Unordered Lists

  • Unordered list item one
  • Unordered list item two
  • Unordered list item three

Ordered Lists

  1. Ordered list item one
  2. Oordered list item two
  3. Ordered list item three