The Container sets the maximum width for content.


Use .Container (max-width of 1600px and margin-left and margin-right of auto) to center the element on the page.
Illustration to show the standard Container. The max-width on our Container is 1600px.


Use .Container--fluid to change the max-width to 100 percent (Note: the margin-left and margin-right of auto becomes obsolete)
Illustration to show the fluid Container.


The grid is a fundamental piece of the Digital Design System. It's what holds the content in place and gives structure to our content.

Grid structure

We use a 12 column responsive grid. The .Grid creates horizontal groups of .Grid-cells. All content should be placed in the .Grid-cells.

The proper structure should be .Grid with children of .Grid-cells.

Ilustration to help you visualize the Grid.

Grid cells


.Grid-cells create gutters using padding. By default, .Grid-cells have left and right padding of 16px/1.6rem

Ilustration to show Grid-cells with padding by default.

Without gutters

Use .Grid--withoutGutter to set the grid margin to 0. The left and right padding of all child Grid-cell elements will also be set to 0

Ilustration to show how Grid--withoutGutter removes the left and right padding on each child Grid-cell.


By default a .Grid-cell is 100% of the .Grid.

.Grid-cells will wrap if their combined width is greater than 100%.

.Grid-cell width can be set using Size Utilities.

Ilustration to show how the width of Grid-cell works.



.Grids can be nested. By default each consecutive .Grid holds its padding.

Ilustration showing how nested Grids hold their padding by default.

Nested (flush)

Not adding the .Grid-cell element will ensure the nested .Grid-cell adheres to the padding of the parent .Grid-cell



By default, .Grid-cells are left aligned and the same is true for the content inside of them.

Ilustration showing how Grid-cells are left aligned as well as the content they contain.


Single cell

Use .Grid-cell--center to center a single .Grid-cell.

Note: that this center aligns the text inside the .Grid-cell.

Illustration showing how to center a single Grid-cell.

Multiple cells

Use .Grid--alignCenter to center multiple .Grid-cells

Note: This also will change the text alignment of the content in the grid to center align.

Illustration showing how to center multiple Grid-cells.


Use .Grid--alignRight to change the order of .Grid-cells.

Note: This also will change the text alignment of the content in the grid to right align.

Illustration showing how Grid--alignRight changes the order of Grid-cells and changes the text to right align.


We have 4 predetermined breakpoints, creating 5 different screen size ranges. Default, Small, Medium, Large and X-Large.

up to 535px wide

Small -sm
536-765px wide

Medium -md
766-980px wide

Large -lg
981-1300px wide

X-Large -xl
1301-1600px wide

Illustration showing breakpoints on different device sizes.


Size is what constrains content to our Grid. It allows you to control how much space an item takes up on the Grid.



Size is defined as .u-sizeXof12. Where X is a number 1-11. This controls how wide or condensed somehing should be.

Size ratios

It should be noted that you don’t have to base size off of a 12-column grid. The Digital Design System will accept any size ratio. See code snippet.






Helpful hint


Avoid using .u-size2of2 or .u-size12of12. These classes do not do anything and will be ignored. To make something full width see SizeFull.


The Offset classes are used to push a cell to the left or right with margins using the same familiar column widths. Options include .xof2, .xof3, .xof4, .xof5, .xof6, .xof8, .xof10, .xof12 with an option to use the -sm-, -md, -lg and -xl breakpoint prefixes.

While the Offset classes can be used to center one or more cells, using the .Grid-cell—centered modifier is cleaner with fewer classes to override.

Helpful hint

checkmark Do use Offset classes along with .Grid-cell classes.


Use .u-before[x]of[n] to add a margin-left to the element. You can use .u-beforeNoneto reset the margin-left style to 0.


Use .u-after[x]of[n] to add a margin-right to the element. You can use .u-afterNoneto reset the margin-right style to 0.

Push and pull

Sometimes you need something that is first in the markup to render on the screen as the second item. Use .Push and .Pull to accomplish this.


Many times you need to change your layout based on device. You can do this by utilizing media-query modifiers with .Size.

In order to do this just add -sm, -md, -lg or -xl before size.

Mobile first

The Digital Design System is architected using a mobile first mentality. Therefore you just need to add the size modifier when you want that layout to begin.



This will make the item full width until it reaches the -lg breakpoint. At this point it will split into a 50% layout.


Sometimes you need to be able to override a Size set at a smaller viewport. This is when you should utilize .SizeFull.


.u-size1of2 .u-lg-sizeFull

This will make the item 50% until it reaches the -lg breakpoint. At this point it will return to a 100% layout.

Helpful hint


Avoid using .SizeFull where it is not needed.


class="u-sizeFull u-lg-size3of4"

.SizeFull is unnecessary because by default .Size is 100% until it reaches a size modifier.


Sometimes you want a container-type element to have a set width and height and the content next to it to flex based on viewport size. This is when .SizeFit and .SizeFull are helpful.

Apply the .u-sizeFit class to the container that will have the set width. This width will be determined by the .u-sizeFit element’s children, which should have set widths (such as images or icons). Apply .u-sizeFill to the other element which will flex its width accordingly.

Helpful hint


Avoid setting too many fixed width containers.


The alternative version of .sizeFit works the same, with the exception that the element will instead float to the right side of the layout.

Please note that the class name changes to .u-sizeFitAlt as well.


The class .u-sizeFullHeight works similarly to .sizeFull, with the added effect of the element spanning vertically across the entire available layout as well.



.u-cf forces content after floated elements or a container containing floated elements to render below it.

The float property allows side-by-side block-level elements but they do not take the shape of the container.

Using .u-cf will make the content or the container “wrap” around the floated elements.

New block formatting context

.u-nbfc fixes the wrapping issue that occurs when a none floated element follows a floated element. Inside of wrapping around the floated element the .u-nbfc clears the none floated element and inherits a fluid width based on the width set on the floated element.


Primary palette

These are the colors that make our brand. BlueDark is our corporate blue, Blue is our call to action color (links, buttons), Teal is our accent color and White is the color that we primarily use to give focus to content.





Supporting palette

These colors support our brand by allowing contrast and brightness to be added to the pages. These colors are not meant to be used within typography.




Gray palette

Grays are mostly used for text colors and background colors. They support the Primary Palette and help bring more focus on the content.









By default all backgrounds will be White.

Sometimes it is necessary to use color to break up content or give something a container. In these cases, GrayLightest or Sand can be used.

In rare occasions Blue or TealDark can be used as a background color.

warning-indicator Don't use Blue as a large flood background color.







We design and build with accessibility in mind. Color contrast for text and buttons must meet WCAG Level AA standards. Contrast can be calculated for different color combinations using the WebAIM Color Contrast Checker.

ADA Contrast Checker

checkmark Do use colors that meet color contrast requirements

warning-indicator Don't use color combinations that do not pass color contrast requirements

Acceptable colors

Some font colors will work for text on White or GrayLightest backgrounds. This chart shows examples of what colors will pass or fail ADA contrast requirements.































* Passes, but only for text that is above 24px.


Corporate font

Our corporate typeface is Source Sans Pro. We use four weights: light (h1 only), regular, semibold and occasionally bold.

All text elements use a base-10 rem (root em) as the default form of size measurement with a px (pixel) fallback. 1rem = 10px. Our type styles have been designed using a modified 1.25 scale to create a clear hierarchy between different pieces of text. Each style has a defined size for small and large screens. Line-heights and margins have been built to fall upon our 4px baseline grid.

As a fallback we use Helvetica.

You will need to add the following code snippet to the head block on your page for the font to load. The script tag version supports better asynchronicity.

Illustration to show the typography hiearchy.

Text block width

We strive to set paragraph text at an ideal line length of 55-85 characters per line (CPL). This translates to body copy set within a 430-675px wide area on a large-screen device. Lines of text that are much longer or shorter can become difficult for users to read – especially with paragraphs or multiple lines of text.

checkmark Allow text boxes to run a max of 675px wide only.

warning-indicator Avoid letting text blocks span wider than 675px.

Type styles


There are six primary types of headings available through the standard header HTML tags.

For SEO every page should have only one h1. After that it is important to follow semantic order. If you were to turn off CSS the page should read like an easy to understand outline.

Be consistent in the usage of headers across pages.

Writing headings

H1 headings should be written in title case. H2-H6 headings should be written in sentence case.

Body copy and smaller styles

Body copy can be set using paragraph <p> style.

Small text is used for supporting text, such as captions and other secondary copy. It should not be used as the primary body copy size.

Smaller text should be used only for disclaimers or short amounts of copy.

Helpful hints

information-indicator All text styles use ADA compliant colors by default.
information-indicator If text needs to be changed to a different color, ensure that the color contrast meets at least WCAG AA Level guidelines. Use this site to ensure color contrast is acceptable.


Various weights can be applied to Source Sans Pro using the following classes:

Helpful hints

information-indicator Avoid adjusting the weight of an element for purely stylistic reasons.
information-indicator It’s important headings look consistent across pages. This helps the user quickly scan the page because they understand how it is laid out.

Text links

To create a link to a URL, apply an anchor tag around the applicable text.

If the attribute target has the value “_blank”, an icon will be added after the linked text to indicate to the user that they will be leaving the current site.

View more detailed link information

Text formatting

Basic text formatting

Formatting can be added to text to call attention, add emphasis, and enhance the meaning of important content.

To denote important text, use an HTML strong tag.

To bold key words, use an HTML b tag.
To emphasize text, use an HTML em tag.
To italicize text, use an HTML i tag.
To underline text, apply the class u-fontUnderline.
To make a word uppercase, apply the class u-textCaps.

Helpful hints

information-indicator Avoid underlining text whenever possible. It can be misconstrued as a link.
information-indicator Use text formatting sparingly, and avoid changing the styling of large blocks of text.
information-indicator Both the HTML b and strong tags will bold text, but they have important semantic differences. Read MDN Web Docs on <strong> to learn more.
information-indicator Similarly, em and i will italicize text, but have semantic differences. Read MDN Web Docs on <em> to learn more.
information-indicator To italicize the name of a work, such as a book, play, or song, use the HTML cite tag.

Text wrapping and truncating

Text formatting can also be used to keep words together on the same line or let users know that there is more text than they are seeing on the page.

To prevent text from wrapping to another line, apply the class u-textNoWrap.

To truncate text, apply the class u-textTruncate to a block element. This will truncate the text based on the width of the parent container.


Use unordered lists to indicate a list of things that does not have any sequential dependency.

Use ordered lists for sequential items.

Helpful hints

checkmark Do use ordered lists when listing out a step-by-step process
  1. First, do this thing
  2. Next, do this thing
  3. Finally, do this last thing
warning-indicator Don't use an unordered list for a step-by-step process
  • First, do this thing
  • Next, do this thing
  • Finally, do this last thing


Text can be aligned left, right, or centered.

.u-textLeft class applies left alignment
.u-textRight applies right alignment
.u-textCenter applies center alignment.

These classes can also be triggered in regard to the responsive layout by adding the -sm, -md, -lg suffixes to the class names.

Responsive sizes also available (-sm, -md, -lg).

Helpful hints

information-indicator It’s not recommended to center align large sections of text.

Margin and Padding


Margin and padding work together to create space in a layout. Space can be very important for user understanding and can give a certain feeling to a layout.

We calculate spacing in multiples of 4. This gives our designs a consistent baseline and grid while being flexible enough to be used on different kinds of designs and layouts. Be consistent on the amount of spacing you use throughout your project.

For example, use the same amount of space between content sections on every page of a website.

Components and typography in the design system have been built using the 4px baseline grid.

Illustration showing margin and padding.


The Space classes add margin and padding to an element. Space classes follow a pattern


Which allows for breakpoint, property, direction and width of property.



The breakpoint add-ons allow for different spacing at different breakpoints.

Margin and padding


The property [m/p] defines whether the class is using margin or padding.



The direction [T/B/L/R/V/H/A] defines which direction of the margin or padding property, either top, bottom, left, right, vertical (top and bottom), horizontal (left and right) or all (top, bottom, left and right).



The width [0/1-25] defines the width of the padding or margin. The number used is a multiplier of 4.

Helpful hint


Keep all Space classes near each other in the code and in their breakpoint order. This helps to visually understand the spacing properties and at what breakpoints they are being added to an element.

Rounded Corners

We use rounded corners to help provide a sense of approachability and friendliness to our materials.

For small items such as buttons and input boxes, we use a 6px radius on all corners.

For larger items such as a call out box or card, we use a 8px radius on all corners.

Helpful hints


Do use rounded corners on these items:

  • Cards
  • Buttons
  • Outlined input boxes
  • Call out boxes
  • Modals and overlays
  • Hero title boxes

Don't use rounded corners on these items:

  • Photo boxes
  • Data tables
  • Menu and dropdowns
Illustration showing the relationship of smaller and larger items and their border radius.



Makes an item display: inline


Makes an item display: block

Inline block

Makes an item display: inline-block


Makes an item display: none

Hidden visually

Hides an item, but leaves it accessible to screen readers.

Table and table cell

Use these display properties to imitate table cell and table row properties without using the table html.


You can use the breakpoint prefixes (-sm -md -lg -xl) to adjust the display property at certain screen sizes.

Learn more about the breakpoints



The alignment classes set the alignment elements. There are four alignment options: .u-alignBaseline, .u-alignBottom, .u-alignMiddle and .u-alignTop

Note: The alignment classes will only work on inline-block or on a table row element.



Aligns an inline-block or table row element to the baseline of another item



Aligns an inline-block or table row element to the bottom of another item.



Aligns an inline-block or table row element to the middle of another item.



Aligns an inline-block or table row element to the top of another item.


Using .u-opacity[0-9] changes the opacity of the element to which the class is assigned. Opacity can be changed in 10% increments where .u-opacity0 has 0% opacity and is invisible to the eye.




Absolutely positions an item.

Absolute center


Absolutely position and center an element (requires explicit height).



Fixed positions an item.



Relatively positions an item.



Positions an item staticly.


To float something to the left use .u-floatLeft.

To float something to the right use .u-floatRight.