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

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

Status Colors



External Primary Button

Download Primary 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.



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.


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 are very standard, and the color is preset to the Foundation primary color. Learn more about Foundation's global colors.


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