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
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:9
, 4:3
, 3: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.
Infinity Card
Enter headline
Card Templates
List Card
- List Item
Input your text here!
Unit Contact
List Item
Input your text here!
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
List Item
Input your text here!