Colors

The website's color palette stems primarily from four colors:

•  
  Brand 1
•  
  Brand 2
•  
  Brand 3
•  
  Brand 4

A variety of light, dark, accent and faded variations of these colors make up the several colors used throughout the site. These colors can be applied via CSS classes to affect text, links, backgrounds and more.

Text Colors

*Color and text sized doesn't meet contrast requirements for accessibility.
**Color was originally lighter (#61a509) but has been darkened to improve contrast for accessibility.

Link Colors

*Color and text sized doesn't meet contrast requirements for accessibility.
**Color was originally lighter (#61a509) but has been darkened to improve contrast for accessibility.

Background Colors

*Color and text sized doesn't meet contrast requirements for accessibility.
**Color was originally lighter (#61a509) but has been darkened to improve contrast for accessibility.

Background Waves

Buttons

All buttons use the .btn class to apply the default styles. This can be done on the following HTML elements:

• Anchor links
• Buttons
• Inputs with "submit" or "reset" types

<a class="btn" href="#">

Button Recommendations

When possible, always try to limit the use of buttons to 1-3 times on a single page, depending on the layout and context. The button is meant to be a strong focal point of a section or page, so it is best saved for the main call to action (such as "Apply" or "Contact Us"). In simpler scenarios, such as linking to another page or a document available for download, be sure to consider if the button style is truly necessary or if the standard link style might suffice. This is especially true if there are multiple links next to each other on the page. Having several buttons in the same area can be very confusing to the user and provide a call-to-action overload. When in doubt, remember this common saying (originated for text styles but easily applicable to buttons): "If everything is bold, nothing is."

Button Colors

To add additional style to a button, combine one of the color classes with the default .btn class.

<a class="btn brand-2" href="#">Button</a>

All of the available color options are listed below.

Arrow Button

By adding the .arrow-button class and an inline SVG arrow icon, buttons can have some additional interactivity.

<a class="btn brand-2" href="#">Button
  <svg class="arrow-button-icon" fill="currentColor" height="1em" viewbox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg">
    <path d="M3,13h14.2l-3.6,3.6L15,18l6-6l-6-6l-1.4,1.4l3.6,3.6H3V13z"></path>
  </svg>
</a>

Additional Button Styles

There are also a few classes available that affect the shape of the button, which can be used in combination with the button color classes, if desired.

<a class="btn outline" href="#">Outline Button</a>
<a class="btn squared" href="#">Square Button</a>
<a class="btn rounded" href="#">Rounded Button</a>

Call to Action Links

The Call-to-Action link style is a great in-between style for when a standard link is too plain but a button style is too much. The .cta-link class adds a colored arrow and underline to help make the link feel more prominent, while still remaining subdued enough to not hurt the flow or design of a page.

<a class="cta-link" href="#">
  <span class="cta-link-text">Call to Action</span>
  <svg class="cta-link-icon" fill="currentColor" height="1em" viewbox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg">
    <path d="M3,13h14.2l-3.6,3.6L15,18l6-6l-6-6l-1.4,1.4l3.6,3.6H3V13z"></path>
  </svg>
</a>

Headlines

Headline classes are available to provide emphases to text with a bold, uppercase Lemon Milk font style.

Available Classes

There are five headline classes that provide the same text style but with different font sizes (1 being the largest, 5 being the smallest).

• .headline-1
• .headline-2
• .headline-3
• .headline-4
• .headline-5
• .headline-6

Though the headline classes can be applied to nearly any HTML element, it is recommended to use with header elements only (e.g., h1, h2, h3, etc.). Note that the element doesn't always need to match the class, though. For example, there may be a case when the h1 element of a page may look best with smaller text, so the .headline-4 class could be applied without affecting the structure of the page's HTML.

Headline Examples

<h1 class="headline-1">Headline One</h1>
<h2 class="headline-2">Headline Two</h2>
<h3 class="headline-3">Headline Three</h3>
<h4 class="headline-4">Headline Four</h4>
<h5 class="headline-5">Headline Five</h5>
<h6 class="headline-6">Headline Six</h6>

Headline Colors

By default, the headline classes do not apply any color styling to the font. This means the color will default to the current color of the HTML element. To get best results, pair a headline class with one of the text color classes. Additionally, you can apply an accent color to a portion of the headline (via an HTML span element), which will provide added emphases on important words.

<h3 class="headline-5 brand-2">Brand Color Headline</h3>

<h3 class="headline-5 brand-3">Brand Color with
  <span class="brand-3-accent">Accent Color</span>
</h3>

Other Text Styles

Spacing

The website template provides CSS utility classes that help with element spacing. These classes use shorthand to determine the property, sides and size.

• Property
  • m = margin
  • p = padding
• Sides
  • t = top
  • r = right
  • b = bottom
  • l = left
  • x = left and right (horizontal)
  • y = top and bottom (vertical)
  • blank/none = all sides
• Size
  • Starting with 0, each size increments by a value of 0.25rem (which is 4px on the vast majority of browsers)
  • 0 = 0rem (no margin or padding)
  • 1 = 0.25rem
  • 2 = 0.5rem
  • 3 = 0.75rem
  • 4 = 1rem
  • 5= 1.25rem
  • 6= 1.5rem
  • 7= 1.75rem
  • 8= 2rem
  • 10= 2.5rem
  • 12= 3rem
  • 14= 3.5rem
  • 16= 4rem
  • 20= 5rem
  • 24 = 6rem
  • auto = auto
  • fluid = a growing value based on screen size

When writing out the shorthand CSS class, list the property first, then the side (if applicable), followed by a hyphen (-) and the size.

Examples

There are several different combinations of CSS classes available from the shorthand options. Below is a small list of examples.

Fluid Spacing

The -fluid size prefix can be used in shorthand spacing classes to provide flexible, responsive spacing. This fluid spacing starts low on small screens, then grows with the size of the device.

Note: The website template gradually increases the size of the default font based on screen size as well. This is why the rem values listed below do not appear to increment proportionally. Pixel estimates based on the global template are provided in parentheses.

List Columns

Use the .ul-columns style when you have a list you want divided into columns. Set the class on the UL tag to ul-columns and you will get a flexible list that falls into an orderly column layout appropriate for the screen size. This works best if the list is inside a wide column, taking up the full width of the content area and/or with very short list items. This is not a good solution for list items with long text.

<ul class="ul-columns">
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
</ul>

Display & Visibility

There are several CSS classes that can help with the style of how elements are displayed and whether or not they are visible.

Flexible iFrames

We most commonly use iframes for embedding YouTube videos, but there are many other applications, like embedding forms, some dynamic social media embeds, etc. Without special styling, iframe embeds must have fixed pixel height and width dimensions, which is problematic in our template that is designed to be flexible to the user's screen size. Use the styles below to make your iframes flexible.

Video iFrames

Wrap the video embed iframe in a <div> element with one of these classes that matches the height-to-width aspect ratio of the video. This will allow the video to scale while preserving the height-to-width ratio.

100% Width iFrames

If you just want the iframe to flex to the width of the container, just add the w-full CSS class.