Style Guide

A complete guide to Bozeman's elements.
Colors
A complete color swatch used to color all interface elements on the website.
Theme Colors
Primary 1
#2B59C3
Primary 2
#0B1B40
Primary 3
#C3CDE5
Grays
Gray 1
#222525
Gray 2
#62636B
Gray 3
#E5EBF8
Gray 4
#F2F5FC
Feedback
Success
#57A773
Warning
#F19953
Error
#ED6A5E
Buttons
Component, text style and size variations
Button Sizes
Small
Standard
Large
Theme Colors
Primary 1
Primary 2
Outline
Feedback Colors
Success
Warning
Error
Grays & White
Gray 1
Gray 2
Gray 3
Gray 4
White
Circle Buttons
Icons
Search
Finish
Sign up with Google
Typography
Headings, body and other common text elements.
Font Used: 
Silka by Atipo Foundry

Display  - 60px

Large Heading- 54p

Medium Heading - 40px

Small Heading - 32px

X-Small Heading - 24px

Heading Six - Class H6 Small - 16px
Text Large - 18px   
Link Large
Body Text - 16px  
Body Link
Small Text 14px   
Small Link
Page Eyebrow - 24px
Lists
Headings, body and other common text elements.
Unstyled <ul>
  • Dope
  • Sick
  • Amazing
Colored Bullets
  • Dope
  • Sick
  • Amazing
Checklist
  • Check
    Dope
  • Check
    Sick
  • Check
    Amazing
Icons - Interface
Headings, body and other common text elements.
decorative chevron indicating a dropdown
Icons - Social
Icons for popular social networks.
Badges
Combine with other components to display metadata
Default
Badge Text
Theme Colors
Primary 1
Primary 2
Primary 3
Feedback Colors
Success
Warning
Error
Cards
A multipurpose component used to display content in boxed format.
Default Styles
Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
With Image

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
Form Inputs
Styles for form inputs and form feedback states.
Input Sizes
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Labelled Input
* Hint Text
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.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Radio & Checkbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form Feedback
Shadows
Preset styles to imply depth on interface components
Shadow Small
Shadow
Shadow Large
Dropdowns
Preset styles to imply depth on interface components
Tooltips
Provide additional information in a small pop-up.
Hover on this icon
?
Here is a message to help explain the content.