Style Guide

A central guide for common interface components.
Colors
A conveniently prepared palette to easily adjust all colors.
Primary 1 (USU Orange)
Primary 2 (Oxford)
Primary 3 (Charcoal - FP)
Primary 4 (New Color - #6DADDA)
Primary 5
Gray 1
Gray 2
Gray 3
Gray 4
Gray 5
Gray 6
Highlight
White
Success
Warning
Danger
Stylings
Adjust Global Padding Classes
14 Px Bottom Margin
Typography
Headings, body and other common text elements.

Display One

Display Two

Display Three

Heading One

Large Heading

Heading Two

Medium Heading

Heading Three

Heading Four

Heading Five
Heading Six
Large Text  Large Link 
Text 18
Body Text  Body Link
Small Text  Small Link
Tiny Text  Tiny Link
Link with arrow
Link with arrow
Icon Arrow Right
Text Primary 1
Text Primary 5
Rich Text Element
Formatting for typographic elements inside the Rich Text Element.

Heading Two

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Here is a blockquote

Heading Four

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system. Here is some Bold Text and here is some Italicised Text.

Here's a figure caption.
  • Bulleted List Item 1
  • Bulleted List Item 2
  • Bulleted List Item 3
  1. Numbered Item 1
  2. Numbered Item 2
  3. Numbered Item 3
Icons - Interface
Common interface iconography
Icon Arrow UpIcon CheckIcon CalendarIcon Arrow LeftIcon Arrow RightIcon Chevron DownIcon Chevron LeftIcon HeartIcon MailIcon Map Marker 2Icon MenuIcon MinusIcon StarIcon ClockIcon Chevron RightIcon XIcon HomeIcon PlusIcon Select ArrowIcon SearchIcon Shopping Cart
Icons - Social
Common social network icons
Google LogoInstagram LogoKickstarter LogoGithub LogoFacebook LogoSkype LogoSlack LogoPinterest LogoSpotify LogoTwitter LogoVimeo LogoLinkedin Logo
Buttons
Component, text style and size variations.
Button Sizes
Round Button
Icon Button
Form Inputs
Size and state variations for text inputs.
Input Sizes
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Textareas
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input with Icon
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Labelled Input
Label
* Input hint text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form Selectables
Checkboxes, Radios and Selects.
Checkboxes
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Radios
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Selects
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Switches
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Tabs
Multiple styles for displaying tabbed contents.
Tab 1 Content
Tab 2 Content
Tab 3 Content
Tab 1 Content
Tab 2 Content
Tab 3 Content
Tab 1 Content
Tab 2 Content
Tab 3 Content
Tab 1 Content
Tab 2 Content
Tab 3 Content
Badges
Combine with other components to display metadata.
Primary 1
Primary 2
Primary 3
Gray 1
Gray 2
Gray 3
Gray 4
Success
Warning
Danger
Avatars
Represent users about the interface.
Avatar Sizes
Small
Standard
Large
Shadows
Preset styles to imply depth on interface components.
Small
Standard
Large
Boxed Content
Structural component for displaying content with padding and a border.
Heading
This is some text inside of a div block.
Heading

This is some text inside of a div block.

Button
Icons
Component arrangements that include icons.
Content Title
Volutpat egestas nibh rhoncus mauris semper. Quam nec consectetur est sed lobortis orci ridiculus.
Content Title
Volutpat egestas nibh rhoncus mauris semper. Quam nec consectetur est sed lobortis orci ridiculus.

Grab some attention with this short headline.

Volutpat egestas nibh rhoncus mauris semper. Quam nec consectetur est sed lobortis orci ridiculus.
Icon Horizontal Heading
Content Title
Bolutpat egestas nibh rhoncus mauris semper. Quam nec consectetur est sed lobortis orci ridiculus.
Links
Multi-purpose components for linking to other pages.
Link Title
Icon Chevron Right
Lists
Conveniently prepared lists in multiple styles.
Modular Architecture
Clean, Curated Visual Aesthetic
Friendly Customer Support
Modular Architecture
Clean, Curated Visual Aesthetic
Friendly Customer Support
Modular Architecture
Clean, Curated Visual Aesthetic
Friendly Customer Support
Modular Architecture
Clean, Curated Visual Aesthetic
Friendly Customer Support

Contact Us

We don’t share your data.  View Privacy Policy
We'll be in touch!
Oops! Something went wrong while submitting the form.

Get In Touch

We don’t share your data.  View Privacy Policy
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Search