Color Palette

Instructions

Colors used with text or icons that provide meaningful information are required to meet a minimum of 4.5:1 contrast ratio. The color palette illustrates the correct contrast color to use with each shade or tint. For more information visit the Utah Design System's Color Guidelines and Standards

Color guidlinesImage

Images

Images on the site

All images. All images should be converted from PNG or JPG to WebP formatting to help with load times. This can be done in Adobe Photoshop or there are free image converters online.

Hero images. Most of the images being used in the sliders are 2000px or more and are then converted.

Slider Images. For accessibility purposes, do not add text or content to the image. When the slide is off the screen, the screen reader has no idea it's there and will skip over any content on the slides.

 

Tips and Tricks

Establish a clear focal point. Ensure that your imagery has a distinctive focal point, as it affects how the images should be cropped for various sizes.
Resolution and loading speed. The loading speed of imagery is primarily influenced by its resolution. However, the higher the resolution you'll have a better quality image. In order to help balance the loading times with quality imagery, convert your file (jpg, png, etc.) to a .webp format. There are many free options available on the web to utilize. This will optimize network bandwidth, and keep the image quality at it's highest. It is still essential to test and determine appropriate resolution sizes for specific aspect ratios and devices, ensuring that assets appear crisp and devoid of pixelation.
Sizing/Aspect Ratios. Cropping images to the following aspect ratios can help ensure consistent image sizing: 16:94:33:2, and 1:1.

For more information visit the Utah Design Systems Images guidelines and standards page.

 

Guidelines

Headings

Headline <h1>

Headline <h2>

Headline <h3>

Headline <h4>

Headline <h5>
Headline <h6>

vs.

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Default h1 & h2 settings

font-size: 1.6rem, font-weight: 700, color: var(--primary-color)

Default h3 & h4 settings

font-size: 1.5rem; font-weight: 600; color: var(--gray-color)

Default settings for Card Headings

font-size: 1.1rem; font-weight: 500; color: var(--gray-color)


Heading Tips & Tricks

  • To use the default sizes, set the font sizes to "calc()" in the Text Format area. Then the Utah Design system css will be able to take over.

  • Card titles are usually formatted a bit differently; see the Global CSS and associated class

Spacing and Border Radius

--spacing-3xs: 2px;
--spacing-2xs: 4px;
--spacing-xs: 8px;
--spacing-s: 12px;
--spacing: 16px;
--spacing-l: 24px;
--spacing-xl: 32px;
--spacing-2xl: 40px;
--spacing-3xl: 48px;
--spacing-4xl: 64px;
--spacing-5xl: 80px;
--spacing-6xl: 96px;

--radius-small1x: 3px;
--radius-small: 6px;
--radius-medium: 9px;
--radius-large: 12px;
--radius-circle: 999px;

Spacing Increments

These spacing variables are being pulled in from the Utah Design System and are available to use where ever you need to add padding or margins.


Tips & Tricks

  • Spacing between page sections: 64px

  • Spacing between rows in a section: 24px

  • Spacing between most text elements or some content elements (i.e. accordions, list items, etc.): 16px

Button Types

Main Button

  • Ability to change the style in one place
  • Automatically adds accessibility to any external site links

*To use these, search in Elements Editor

Quick Link Buttons

  • Allows the user to quickly navigate to content on the current page.
  • Used in conjunction with a button that will get the user "Back to Top" of the page

*To use this, search in Templates, and you'll find it under the Sections area.

*To use the "Back to Top" button, go to the Global Settings and enable the "Scroll Top Anchor" toggle

Card Types

Card Components

""

Pillar Card

Used to highlight common or popular services or pages on your site. Generally found on landing pages that link off to different groups of content, like the Home.

Learn more

Infinity Card

Input your text here! The card is very versatile and can be used to link information or be used solely for informational purposes.
Learn more

Enter headline

Input your text here! The text element is intended for longform copy that could potentially include multiple paragraphs.

Card Templates

List Card

  • List Item

    Input your text here!

    $4.00

Unit Contact

  • List Item

    Input your text here!

Contact Card
  • List Item

    Input your text here!

Contacts

Unit

  • Office

    801-878-5352

  • Special Operations Recruiting

    801-432-5180 or 385-202-4206

Family Readiness Group

  • Camp Williams, Utah

    Aaron Butler Readiness Center

  • Office

    801-878-5037

  • Cell

    801-347-6777

Placeholder Image
Profile Card
Sub title with additional information
  • List Item

    Input your text here!

Pre-defined Templates

Accordions