Style Guide

This is the style guide approved by Kim for Utah.  Text, Colors, Buttons and related classes and shades are included here for reference.  

 

Logo Styles

DEFAULT

Kimforutah-Logo-Blue-Transparent-1x.png

Kimforutah-Logo-WhiteonBlack-Square-1x.jpg

ALT RED

Kimforutah-Logo-Red-1x.jpg

Words and Text

 

Style

Content according to AP Style Manual

 

Fonts

Headline Font: Aktiv Grotesk Extended, Menlo, Monaco, Consolas, "Liberation Mono", monospace

Body Font:  Stolzl, Roboto, Arial, sans-serif

Serif Font:  FF Tisa Pro, Georgia, Palatino, serif

 

Icons

 

    

 

Headline Styles

This line is an example of our H1 Style

This line is an example of our H2 Style

This line is an example of our H3 Style

This line is an example of our H4 Style

This line is an example of our H5 Style
This line is an example of our H6 Style

 

Body Text

This color corresponds to our normal text style. Lorem Ipsum is simply Lorem Ipsum is simply Lorem Ipsum is simply Lorem Ipsum is simply Lorem Ipsum is simply Lorem Ipsum is simply Lorem Ipsum is simply Lorem Ipsum is simply.

 

Unordered List
  • Lorem Ipsum is simply
  • Lorem Ipsum is simply
  • Lorem Ipsum is simply
  • Lorem Ipsum is simply
  • Lorem Ipsum is simply

 

Ordered List
  1. Lorem Ipsum is simply
  2. Lorem Ipsum is simply
  3. Lorem Ipsum is simply
  4. Lorem Ipsum is simply
  5. Lorem Ipsum is simply

 

Colors

 

Colored Text

This text color corresponds to .text-primary class.

This text color corresponds to .text-secondary class.

This color corresponds to .text-success class

This color corresponds to .text-info class

This color corresponds to .text-warning class

This text color corresponds to .text-danger class

This color corresponds to .text-light class

This color corresponds to .text-dark class

This color corresponds to .text-muted class

This color corresponds to .text-white class

 

Colored Shades
Primary:
#5EB0E5
Secondary:
#124559
Success:
#28A745
Info:
#5EB0E5
Warning:
#FFC107
Danger:
#AC162C
Dark:
#080705
Light:
#F8F9FA
Blue:
#007BFF
Indigo:
#124559
Purple:
#6F42C1
Pink:
#E83E8C
Red:
#AC162C
Orange:
#FD7E14
Yellow:
#FFC107
Green:
#28A745
Teal:
#20C997
Cyan:
#5EB0E5

 

Mono Text

This text is colored white:#ffffff

This text is colored gray-100:#f8f9fa

This text is colored gray-200:#e9ecef

This text is colored gray-300:#dee2e6

This text is colored gray-400:#ced4da

This text is colored gray-500:#adb5bd

This text is colored gray-600:#414042

This text is colored gray-700:#495057

This text is colored gray-800:#080705

This text is colored gray-900:#212529

This text is colored black:#080705

 

Mono Shades
white:
#ffffff
gray-100:
#f8f9fa
gray-200:
#e9ecef
gray-300:
#dee2e6
gray-400:
#ced4da
gray-500:
#adb5bd
gray-600:
#414042
gray-700:
#495057
gray-800:
#080705
gray-900:
#212529
black:
#080705

 

Buttons

 

Primary Secondary Success Danger Warning Info Light Dark Link